From 12792db1854adb1964e51e1a7acb9fa467d13cca Mon Sep 17 00:00:00 2001
From: Darkraise <quangtc94@gmail.com>
Date: Wed, 4 Feb 2026 06:03:39 +0700
Subject: [PATCH] chore: apply consistent code formatting across codebase

---
 CLAUDE.md                                     |  23 +-
 CONTRIBUTING.md                               |  60 ++-
 backend/.eslintrc.json                        |  16 +-
 backend/README.md                             |   6 +-
 backend/scripts/fix-absolute-paths.ts         |   5 +-
 backend/scripts/kill-port.js                  |   1 -
 backend/src/config.ts                         |  15 +-
 backend/src/jobs/MetadataSyncJob.ts           |   9 +-
 backend/src/jobs/RuffleUpdateJob.ts           |   4 +-
 backend/src/middleware/MAINTENANCE_MODE.md    |  89 +++-
 backend/src/middleware/activityLogger.ts      |   2 +-
 backend/src/middleware/asyncHandler.ts        |   6 +-
 backend/src/middleware/auth.ts                |  18 +-
 backend/src/middleware/dateValidation.ts      |   4 +-
 backend/src/middleware/errorHandler.ts        |  16 +-
 backend/src/middleware/featureFlags.ts        |   5 +-
 backend/src/middleware/maintenanceMode.ts     |  49 +-
 backend/src/middleware/performanceTracking.ts |  16 +-
 backend/src/middleware/rbac.ts                |   4 +-
 backend/src/middleware/requestTimeout.ts      |  18 +-
 backend/src/middleware/validation.ts          |   8 +-
 backend/src/migrations/README.md              |  36 +-
 backend/src/migrations/archived/README.md     |  46 +-
 backend/src/proxy/config.ts                   |   2 +-
 backend/src/proxy/gamezipserver.ts            |  11 +-
 backend/src/proxy/legacy-server.ts            |  23 +-
 backend/src/proxy/mimeTypes.ts                |   4 +-
 backend/src/proxy/proxy-request-handler.ts    |   8 +-
 backend/src/proxy/server.ts                   |  62 ++-
 backend/src/proxy/zip-manager.ts              |  10 +-
 backend/src/routes/activities.ts              |  42 +-
 backend/src/routes/auth-settings.ts           |  13 +-
 backend/src/routes/auth.ts                    | 237 +++++----
 backend/src/routes/cache.ts                   |   8 +-
 backend/src/routes/community-playlists.ts     |   4 +-
 backend/src/routes/database.ts                |  68 +--
 backend/src/routes/domains.ts                 |   8 +-
 backend/src/routes/downloads.ts               | 495 +++++++++---------
 backend/src/routes/errors.ts                  |  53 +-
 backend/src/routes/favorites.ts               |  14 +-
 backend/src/routes/game-files.ts              |  67 +--
 backend/src/routes/games.ts                   |  96 ++--
 backend/src/routes/github.ts                  |  16 +-
 backend/src/routes/health.ts                  |  32 +-
 backend/src/routes/index.ts                   |   4 +-
 backend/src/routes/jobs.ts                    |  10 +-
 backend/src/routes/metrics.ts                 |  12 +-
 backend/src/routes/platforms.ts               |  13 +-
 backend/src/routes/play-tracking.ts           | 144 ++---
 backend/src/routes/playlists.ts               |  34 +-
 backend/src/routes/proxy.ts                   | 186 ++++---
 backend/src/routes/roles.ts                   |  13 +-
 backend/src/routes/ruffle.ts                  |  28 +-
 backend/src/routes/shared-playlists.ts        |  16 +-
 backend/src/routes/statistics.ts              |  11 +-
 backend/src/routes/system-settings.ts         |  52 +-
 backend/src/routes/tags.ts                    |  40 +-
 backend/src/routes/updates.ts                 |  45 +-
 backend/src/routes/user-playlists.ts          |  34 +-
 backend/src/routes/users.ts                   |  24 +-
 backend/src/server.ts                         |  97 ++--
 backend/src/services/ActivityService.ts       | 102 ++--
 backend/src/services/AuthService.ts           |  97 ++--
 backend/src/services/AuthSettingsService.ts   |  32 +-
 .../services/CachedSystemSettingsService.ts   |   6 +-
 .../src/services/CommunityPlaylistService.ts  |  99 ++--
 backend/src/services/DatabaseService.ts       | 106 ++--
 backend/src/services/DomainService.ts         |  20 +-
 backend/src/services/DownloadManager.ts       |  55 +-
 backend/src/services/FallbackCache.ts         |  10 +-
 backend/src/services/FavoritesService.ts      |   2 +-
 backend/src/services/FileImporter.ts          |  14 +-
 backend/src/services/GameDataService.ts       |  44 +-
 backend/src/services/GameDatabaseUpdater.ts   |  28 +-
 backend/src/services/GameFileService.ts       |  29 +-
 backend/src/services/GameSearchCache.ts       |  56 +-
 backend/src/services/GameService.ts           |  42 +-
 backend/src/services/HashValidator.ts         |  14 +-
 backend/src/services/ImageUrlService.ts       |  14 +-
 backend/src/services/JobExecutionService.ts   |  20 +-
 backend/src/services/JobScheduler.ts          |   8 +-
 backend/src/services/MetadataSyncService.ts   | 114 ++--
 backend/src/services/MetadataUpdateService.ts |  36 +-
 backend/src/services/PerformanceMetrics.ts    |  22 +-
 backend/src/services/PermissionCache.ts       |  27 +-
 backend/src/services/PlayTrackingService.ts   |  56 +-
 backend/src/services/PlaylistService.ts       |  35 +-
 backend/src/services/PreferencesService.ts    |   8 +-
 backend/src/services/RoleService.ts           |  35 +-
 backend/src/services/RuffleService.ts         |  20 +-
 backend/src/services/StatisticsService.ts     |  11 +-
 backend/src/services/SyncStatusService.ts     |   6 +-
 backend/src/services/SystemSettingsService.ts |  21 +-
 backend/src/services/UpdateService.ts         |  56 +-
 backend/src/services/UserDatabaseService.ts   |  87 +--
 backend/src/services/UserPlaylistService.ts   |  58 +-
 backend/src/services/UserService.ts           |  67 ++-
 backend/src/telemetry/index.ts                |   7 +-
 backend/src/telemetry/otel.ts                 |  34 +-
 backend/src/utils/activityUtils.ts            |  15 +-
 backend/src/utils/benchmarkGameSearch.ts      |  14 +-
 backend/src/utils/jwt.ts                      |   2 +-
 backend/src/utils/logger.ts                   |  30 +-
 backend/src/utils/pagination.ts               |  11 +-
 backend/src/utils/queryParser.ts              |  10 +-
 backend/src/utils/queryPerformance.ts         |   6 +-
 docs/01-overview/project-overview.md          |  73 ++-
 docs/01-overview/technology-stack.md          | 139 +++--
 docs/02-architecture/README.md                |  46 +-
 docs/02-architecture/authentication-flow.md   |  61 ++-
 docs/02-architecture/data-flow-diagrams.md    |  39 +-
 docs/02-architecture/game-launch-flow.md      |  37 +-
 docs/02-architecture/play-tracking-flow.md    |  36 +-
 docs/02-architecture/service-communication.md |  84 +--
 docs/02-architecture/system-architecture.md   |  62 ++-
 docs/03-backend/README.md                     |  34 +-
 docs/03-backend/architecture.md               |  39 +-
 docs/03-backend/configuration.md              |  78 ++-
 docs/03-backend/database/schema.md            |  30 +-
 docs/03-backend/services/database-service.md  |  33 +-
 .../services/permission-cache-service.md      |  60 ++-
 .../services/user-database-service.md         |  74 ++-
 docs/03-backend/utilities.md                  |  90 ++--
 docs/04-frontend/README.md                    |  53 +-
 docs/04-frontend/api-client.md                |  24 +-
 docs/04-frontend/architecture.md              | 105 ++--
 .../04-frontend/components/auth-components.md |  14 +-
 .../components/component-overview.md          |  46 +-
 .../04-frontend/components/game-components.md |  14 +-
 .../components/layout-components.md           |  36 +-
 .../components/player-components.md           |  50 +-
 docs/04-frontend/components/ui-components.md  |  13 +-
 docs/04-frontend/custom-hooks.md              |  48 +-
 .../player-implementation/html5-player.md     |  24 +-
 .../player-implementation/ruffle-player.md    |  61 ++-
 .../state-management/react-query.md           |  28 +-
 .../04-frontend/state-management/url-state.md |  10 +-
 .../state-management/zustand-stores.md        | 149 ++++--
 docs/04-frontend/views-routing.md             |  21 +-
 docs/05-game-service/README.md                |  35 +-
 docs/05-game-service/architecture.md          | 115 +++-
 docs/05-game-service/configuration.md         | 101 ++--
 docs/05-game-service/gamezip-server.md        |  35 +-
 docs/05-game-service/html-polyfills.md        | 262 +++++----
 docs/05-game-service/legacy-server.md         |  48 +-
 docs/05-game-service/mime-types.md            |  29 +-
 docs/05-game-service/proxy-server.md          |  61 ++-
 docs/05-game-service/zip-manager.md           |  91 +++-
 docs/06-api-reference/README.md               |  25 +-
 docs/06-api-reference/activities-api.md       |  41 +-
 docs/06-api-reference/admin-api.md            |  40 +-
 docs/06-api-reference/authentication-api.md   |  20 +-
 docs/06-api-reference/domains-api.md          |  54 +-
 docs/06-api-reference/favorites-api.md        |  37 +-
 docs/06-api-reference/games-api.md            |  62 ++-
 docs/06-api-reference/platforms-tags-api.md   |  26 +-
 docs/06-api-reference/play-tracking-api.md    |  46 +-
 docs/06-api-reference/playlists-api.md        |  19 +-
 docs/06-api-reference/roles-api.md            |  35 +-
 docs/06-api-reference/settings-api.md         |  63 ++-
 docs/06-api-reference/shared-playlists-api.md |  30 +-
 docs/06-api-reference/users-api.md            |  13 +-
 docs/07-design-system/README.md               |  15 +-
 docs/07-design-system/color-palette.md        |  74 +--
 docs/07-design-system/components-library.md   | 146 ++++--
 docs/07-design-system/design-patterns.md      | 127 +++--
 docs/07-design-system/icons.md                |  41 +-
 docs/07-design-system/responsive-design.md    |  45 +-
 docs/07-design-system/spacing-layout.md       |  35 +-
 docs/07-design-system/theme-system.md         |  56 +-
 docs/07-design-system/typography.md           |  63 ++-
 docs/08-development/README.md                 |  15 +-
 docs/08-development/coding-standards.md       |  58 +-
 docs/08-development/commands.md               |  58 +-
 docs/08-development/common-pitfalls.md        |  72 ++-
 docs/08-development/database-migrations.md    |  65 ++-
 docs/08-development/debugging.md              |  25 +-
 docs/08-development/project-structure.md      |  11 +
 docs/08-development/setup-guide.md            |  56 +-
 docs/08-development/testing-guide.md          |  55 +-
 docs/09-deployment/README.md                  |  28 +-
 docs/09-deployment/docker-deployment.md       |  58 +-
 docs/09-deployment/environment-variables.md   | 102 ++--
 docs/09-deployment/health-checks.md           |  35 +-
 docs/09-deployment/security-considerations.md |  40 +-
 .../01-authentication-authorization.md        |  71 ++-
 .../10-features/02-game-browsing-filtering.md |  54 +-
 docs/10-features/03-game-playing.md           |  58 +-
 docs/10-features/04-play-session-tracking.md  |  42 +-
 docs/10-features/05-playlists-favorites.md    |  53 +-
 docs/10-features/06-user-management.md        |  45 +-
 docs/10-features/07-role-permissions.md       |  84 ++-
 docs/10-features/08-activity-logging.md       |  64 ++-
 docs/10-features/09-system-settings.md        |  82 ++-
 docs/10-features/10-date-time-formatting.md   |  85 ++-
 docs/10-features/README.md                    |  97 ++--
 docs/11-diagrams/README.md                    |  48 +-
 docs/12-reference/README.md                   | 123 +++--
 docs/12-reference/cors-security-decision.md   |  61 ++-
 docs/12-reference/database-indexes.md         |  46 +-
 .../12-reference/database-schema-reference.md | 477 +++++++++--------
 docs/12-reference/external-dependencies.md    | 168 +++---
 docs/12-reference/glossary.md                 | 202 ++++---
 docs/12-reference/security-measures.md        |  78 ++-
 docs/12-reference/type-definitions.md         |  26 +-
 .../directory-traversal-protection.md         |  43 +-
 docs/README.md                                | 109 ++--
 frontend/.eslintrc.json                       |  17 +-
 frontend/postcss.config.js                    |   2 +-
 frontend/scripts/check-bundle-size.js         | 212 --------
 frontend/src/App.tsx                          | 486 ++++++++++-------
 .../components/activities/ActivityTable.tsx   | 123 +++--
 .../src/components/activities/FilterInput.tsx |   8 +-
 .../dashboard/ActivityDashboard.tsx           |  22 +-
 .../activities/dashboard/ActivityStats.tsx    | 125 ++---
 .../dashboard/ActivityTrendChart.tsx          |  38 +-
 .../dashboard/ResourceDistributionChart.tsx   |   5 +-
 .../activities/dashboard/TopActionsChart.tsx  |  21 +-
 .../activities/dashboard/UserLeaderboard.tsx  |  24 +-
 frontend/src/components/auth/BrandPanel.tsx   |  18 +-
 .../components/auth/CelestialBackground.tsx   |  30 +-
 frontend/src/components/auth/LoginForm.tsx    | 336 ++++++------
 .../auth/ParticleNetworkBackground.tsx        |  63 ++-
 .../components/auth/PrismaticBackground.tsx   |   6 +-
 .../src/components/auth/ProtectedRoute.tsx    |  17 +-
 frontend/src/components/auth/RegisterForm.tsx | 381 +++++++-------
 .../src/components/common/Breadcrumbs.tsx     |  16 +-
 .../src/components/common/CardSizeControl.tsx |  41 +-
 .../src/components/common/ConfirmDialog.tsx   |   5 +-
 .../src/components/common/ErrorBoundary.tsx   |  20 +-
 .../src/components/common/FavoriteButton.tsx  |  60 +--
 frontend/src/components/common/LazyImage.tsx  |   6 +-
 .../components/common/MobileWarningDialog.tsx |   4 +-
 .../common/NetworkStatusIndicator.tsx         |   8 +-
 .../common/RemoveFavoriteButton.tsx           |  28 +-
 frontend/src/components/common/RoleGuard.tsx  |   2 +-
 .../components/dialogs/GamePlayerDialog.tsx   |   5 +-
 frontend/src/components/error/ErrorPage.tsx   |  19 +-
 .../src/components/error/ErrorReporter.ts     |  18 +-
 .../error/GameLibraryErrorBoundary.tsx        |  19 +-
 .../error/GamePlayerErrorBoundary.tsx         |  40 +-
 .../error/PlaylistErrorBoundary.tsx           |  27 +-
 frontend/src/components/jobs/JobCard.tsx      | 117 +----
 .../src/components/jobs/JobEditDialog.tsx     |  74 ++-
 .../components/jobs/JobExecutionLogTable.tsx  |  26 +-
 .../components/jobs/JobScheduleDisplay.tsx    |   4 +-
 frontend/src/components/layout/AppShell.tsx   |   8 +-
 .../src/components/layout/ErrorLayout.tsx     |   6 +-
 frontend/src/components/layout/Header.tsx     |  82 ++-
 frontend/src/components/layout/MainLayout.tsx |   4 +-
 frontend/src/components/layout/Sidebar.tsx    |  48 +-
 .../src/components/library/GameCard.test.tsx  |  42 +-
 frontend/src/components/library/GameCard.tsx  |   2 +-
 frontend/src/components/library/GameList.tsx  |  18 +-
 .../src/components/library/GameListItem.tsx   |  44 +-
 .../components/library/GameListSkeleton.tsx   |   2 +-
 frontend/src/components/player/GamePlayer.tsx |  25 +-
 frontend/src/components/player/README.md      |  43 +-
 .../src/components/player/RufflePlayer.tsx    | 136 ++---
 .../playlist/AddToPlaylistModal.tsx           |  16 +-
 .../BrowseCommunityPlaylistsModal.tsx         | 208 ++++----
 .../playlist/CreatePlaylistModal.tsx          | 168 +++---
 .../playlist/CreateUserPlaylistDialog.tsx     |  12 +-
 .../src/components/playlist/IconSelector.tsx  |  13 +-
 .../components/roles/PermissionSelector.tsx   |  51 +-
 frontend/src/components/roles/RoleForm.tsx    |  41 +-
 frontend/src/components/roles/RoleTable.tsx   |  34 +-
 .../src/components/search/FilterChips.tsx     |   2 +-
 .../src/components/search/FilterDropdown.tsx  |  28 +-
 .../src/components/search/FilterPanel.tsx     |  26 +-
 .../src/components/search/filterConfig.ts     |  17 +-
 .../components/settings/AppSettingsTab.tsx    | 115 ++--
 .../settings/FeaturesSettingsTab.tsx          |  59 +--
 .../settings/GeneralSettingsTab.tsx           |  70 ++-
 .../components/settings/UpdateSettingsTab.tsx | 440 +++++++---------
 .../stats/GamesDistributionChart.tsx          |  65 ++-
 .../src/components/stats/PlaytimeChart.tsx    | 107 ++--
 .../src/components/stats/TopGamesChart.tsx    |  71 +--
 .../src/components/stats/UserStatsPanel.tsx   |  32 +-
 frontend/src/components/theme/ThemePicker.tsx |   7 +-
 frontend/src/components/ui/alert-dialog.tsx   |  94 ++--
 frontend/src/components/ui/alert.tsx          |  60 +--
 frontend/src/components/ui/avatar.tsx         |  31 +-
 frontend/src/components/ui/badge.tsx          |  46 +-
 frontend/src/components/ui/button.tsx         |  59 +--
 frontend/src/components/ui/calendar.tsx       | 144 ++---
 frontend/src/components/ui/card.tsx           | 118 ++---
 frontend/src/components/ui/checkbox.tsx       |  20 +-
 frontend/src/components/ui/collapsible.tsx    |  10 +-
 frontend/src/components/ui/data-table.tsx     |  98 ++--
 frontend/src/components/ui/date-picker.tsx    |  28 +-
 frontend/src/components/ui/dialog.tsx         |  65 +--
 frontend/src/components/ui/dropdown-menu.tsx  | 103 ++--
 frontend/src/components/ui/form.tsx           | 132 +++--
 frontend/src/components/ui/input.tsx          |  16 +-
 frontend/src/components/ui/label.tsx          |  27 +-
 frontend/src/components/ui/pagination.tsx     |  17 +-
 frontend/src/components/ui/popover.tsx        |  20 +-
 frontend/src/components/ui/radio-group.tsx    |  30 +-
 frontend/src/components/ui/scroll-area.tsx    |  30 +-
 frontend/src/components/ui/select.tsx         |  79 ++-
 frontend/src/components/ui/separator.tsx      |  41 +-
 frontend/src/components/ui/sheet.tsx          | 100 ++--
 frontend/src/components/ui/sonner.tsx         |  50 +-
 frontend/src/components/ui/switch.tsx         |  16 +-
 frontend/src/components/ui/table.tsx          | 110 ++--
 frontend/src/components/ui/tabs.tsx           |  28 +-
 frontend/src/components/ui/textarea.tsx       |  37 +-
 frontend/src/components/ui/toast.tsx          |  73 ++-
 frontend/src/components/ui/toaster.tsx        |  16 +-
 frontend/src/components/ui/toggle-group.tsx   |  40 +-
 frontend/src/components/ui/toggle.tsx         |  36 +-
 frontend/src/components/ui/tooltip.tsx        |  20 +-
 .../components/users/ChangePasswordDialog.tsx |  62 +--
 frontend/src/components/users/UserForm.tsx    |  79 +--
 frontend/src/components/users/UserTable.tsx   |  22 +-
 frontend/src/contexts/AuthContext.tsx         |  91 ++--
 .../src/hooks/factories/createQueryHook.ts    |  22 +-
 frontend/src/hooks/use-toast.ts               | 153 +++---
 frontend/src/hooks/useActivities.ts           |  26 +-
 frontend/src/hooks/useActivityFilters.ts      |  20 +-
 frontend/src/hooks/useAuth.ts                 |   8 +-
 frontend/src/hooks/useCommunityPlaylists.ts   |   5 +-
 frontend/src/hooks/useDomains.ts              |   5 +-
 frontend/src/hooks/useDownload.ts             |  97 ++--
 frontend/src/hooks/useFavorites.ts            |  44 +-
 frontend/src/hooks/useFilterDropdowns.ts      |  11 +-
 frontend/src/hooks/useGames.test.tsx          |  45 +-
 frontend/src/hooks/useGames.ts                |   8 +-
 frontend/src/hooks/useLazyLoad.tsx            |   2 +-
 frontend/src/hooks/usePlayTracking.ts         |  35 +-
 frontend/src/hooks/usePlaylists.ts            |  30 +-
 frontend/src/hooks/useRecentGames.ts          |   6 +-
 frontend/src/hooks/useRoles.ts                |   3 +-
 frontend/src/hooks/useSharedAccessToken.ts    |  51 +-
 frontend/src/hooks/useStatistics.ts           |   2 +-
 frontend/src/hooks/useSwipeGesture.ts         |  16 +-
 frontend/src/hooks/useUserPlaylists.ts        |  31 +-
 frontend/src/hooks/useUsers.ts                |  12 +-
 frontend/src/index.css                        |   9 +-
 frontend/src/lib/api.ts                       | 214 +++++---
 frontend/src/lib/api/activities.ts            |  11 +-
 frontend/src/lib/api/client.ts                |   5 +-
 frontend/src/lib/api/jobs.ts                  |   5 +-
 frontend/src/lib/api/settings.ts              |   7 +-
 frontend/src/lib/api/sharedPlaylists.ts       |  28 +-
 frontend/src/lib/api/userPlaylists.ts         |  25 +-
 frontend/src/lib/cron-utils.ts                |  30 +-
 frontend/src/lib/date-utils.ts                |   4 +-
 frontend/src/lib/playlistIcons.ts             |  10 +-
 frontend/src/lib/utils.ts                     |   6 +-
 frontend/src/lib/validateIcons.ts             |   4 +-
 frontend/src/main.tsx                         |   6 +-
 frontend/src/store/auth.ts                    |  18 +-
 frontend/src/store/sharedAccess.ts            |   2 +-
 frontend/src/store/theme.ts                   |  55 +-
 frontend/src/store/ui.ts                      |   6 +-
 frontend/src/test/mocks/handlers.ts           |   9 +-
 frontend/src/test/test-utils.tsx              |  25 +-
 frontend/src/types/game.ts                    |  14 +-
 frontend/src/utils/activityUtils.ts           |   6 +-
 frontend/src/utils/errorUtils.ts              |   5 +-
 frontend/src/views/ActivitiesView.tsx         |   4 +-
 frontend/src/views/DashboardView.tsx          | 184 +++----
 frontend/src/views/FavoritesView.tsx          |  37 +-
 frontend/src/views/GameDetailView.tsx         | 377 ++++++-------
 frontend/src/views/GamePlayerView.tsx         |  46 +-
 frontend/src/views/HTML5GamesView.tsx         |   8 +-
 frontend/src/views/JobsView.tsx               |  38 +-
 frontend/src/views/MaintenancePage.tsx        |  29 +-
 frontend/src/views/PlaylistDetailView.tsx     |   9 +-
 frontend/src/views/PlaylistsView.tsx          | 211 ++++----
 frontend/src/views/RolesView.tsx              |  10 +-
 frontend/src/views/SettingsView.tsx           | 162 +++---
 frontend/src/views/SharedPlaylistView.tsx     |  17 +-
 frontend/src/views/UnauthorizedView.tsx       |  18 +-
 frontend/src/views/UserPlaylistDetailView.tsx |  27 +-
 frontend/src/views/UsersView.tsx              |  10 +-
 frontend/tailwind.config.js                   | 238 ++++-----
 frontend/vite.config.ts                       |  48 +-
 game-service/.eslintrc.json                   |  16 +-
 game-service/README.md                        |  27 +-
 game-service/src/config.ts                    |   2 +-
 game-service/src/gamezipserver.ts             |  29 +-
 game-service/src/http-proxy-server.ts         |  12 +-
 game-service/src/index.ts                     |  10 +-
 game-service/src/legacy-server.ts             |  14 +-
 game-service/src/mimeTypes.ts                 |   4 +-
 game-service/src/proxy-request-handler.ts     |   8 +-
 game-service/src/utils/htmlInjector.ts        |  21 +-
 game-service/src/utils/logger.ts              |  34 +-
 game-service/src/utils/pathSecurity.test.ts   |  11 +-
 game-service/src/utils/pathSecurity.ts        |   6 +-
 game-service/src/validation/schemas.ts        |  12 +-
 game-service/src/zip-manager.ts               |  12 +-
 game-service/vitest.config.ts                 |   7 +-
 396 files changed, 11050 insertions(+), 8820 deletions(-)
 delete mode 100644 frontend/scripts/check-bundle-size.js

diff --git a/CLAUDE.md b/CLAUDE.md
index 58a6c5d..99abada 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -361,8 +361,8 @@ LOG_LEVEL=info
 > stored in the `system_settings` table as `metadata.flashpoint_edition` and
 > `metadata.flashpoint_version`.
 
-See `backend/.env.example` for complete configuration options including
-rate limiting, SQLite optimization, and OpenTelemetry settings.
+See `backend/.env.example` for complete configuration options including rate
+limiting, SQLite optimization, and OpenTelemetry settings.
 
 ### Game Service (.env)
 
@@ -698,8 +698,8 @@ without extra API calls.
 **Change:** Replaced the `FLASHPOINT_EDITION` environment variable with
 automatic detection from `{FLASHPOINT_PATH}/version.txt`. Edition and version
 are held in the backend `config` object — **not** stored in the
-`system_settings` database table. Backend services read `config` directly.
-The frontend receives edition/version via `/api/settings/public` (injected from
+`system_settings` database table. Backend services read `config` directly. The
+frontend receives edition/version via `/api/settings/public` (injected from
 `config`).
 
 **How it works:**
@@ -712,7 +712,8 @@ The frontend receives edition/version via `/api/settings/public` (injected from
   import and read `config` directly
 - The `/api/settings/public` endpoint injects edition/version from `config` into
   the response (same pattern as `homeRecentHours`)
-- Frontend uses the `usePublicSettings()` hook (already cached, no extra request)
+- Frontend uses the `usePublicSettings()` hook (already cached, no extra
+  request)
 - Falls back to `'infinity'` if `version.txt` is missing or unparseable
 
 **Files changed:**
@@ -780,10 +781,14 @@ migrations with checksums and execution times.
 
 **After ANY code change, always:**
 
-1. Verify no build errors: `npm run typecheck` and `npm run build`
-2. Check if documentation needs updates
-3. Ask the user if relevant documentation should be updated
-4. Update the following docs as needed:
+1. **Run Prettier** on all new and modified files:
+   `npx prettier --write <file1> <file2> ...` When using sub-agents (Task tool),
+   instruct each agent to run Prettier on every file it creates or modifies
+   before finishing.
+2. Verify no build errors: `npm run typecheck` and `npm run build`
+3. Check if documentation needs updates
+4. Ask the user if relevant documentation should be updated
+5. Update the following docs as needed:
    - Architecture changes → `docs/02-architecture/`
    - New/modified API endpoints → `docs/06-api-reference/`
    - Database schema changes → `docs/12-reference/database-schema-reference.md`
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4cd43b0..256d80f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,7 @@
 # Contributing to Flashpoint Web
 
-Thank you for your interest in contributing to Flashpoint Web! This document provides guidelines and instructions for contributing to this project.
+Thank you for your interest in contributing to Flashpoint Web! This document
+provides guidelines and instructions for contributing to this project.
 
 ## Table of Contents
 
@@ -19,7 +20,8 @@ Thank you for your interest in contributing to Flashpoint Web! This document pro
 
 ### Our Pledge
 
-We are committed to providing a welcoming and inspiring community for all. By participating in this project, you agree to:
+We are committed to providing a welcoming and inspiring community for all. By
+participating in this project, you agree to:
 
 - Be respectful and inclusive
 - Accept constructive criticism gracefully
@@ -90,14 +92,17 @@ cd ../frontend && npm test
 cd ../game-service && npm test
 ```
 
-For detailed setup instructions, see [Setup Guide](docs/08-development/setup-guide.md).
+For detailed setup instructions, see
+[Setup Guide](docs/08-development/setup-guide.md).
 
 ## How to Contribute
 
 ### Reporting Bugs
 
 Before reporting a bug:
-1. Search [existing issues](https://github.com/OWNER/flashpoint-web/issues) to avoid duplicates
+
+1. Search [existing issues](https://github.com/OWNER/flashpoint-web/issues) to
+   avoid duplicates
 2. Use the [Bug Report template](.github/ISSUE_TEMPLATE/bug_report.md)
 3. Include:
    - Clear description of the issue
@@ -125,6 +130,7 @@ Before reporting a bug:
 ### First-Time Contributors
 
 Look for issues labeled:
+
 - `good first issue` - Simple issues for newcomers
 - `help wanted` - Issues where we need community help
 - `documentation` - Documentation improvements
@@ -134,12 +140,14 @@ Look for issues labeled:
 ### Before Submitting
 
 1. **Sync with upstream**:
+
    ```bash
    git fetch upstream
    git rebase upstream/master
    ```
 
 2. **Run all checks**:
+
    ```bash
    npm run typecheck
    npm run format:check
@@ -161,6 +169,7 @@ Look for issues labeled:
 ### Branch Naming
 
 Use descriptive branch names:
+
 ```
 feature/add-playlist-export
 fix/game-search-pagination
@@ -285,16 +294,16 @@ footer (optional)
 
 ### Types
 
-| Type | Description |
-|------|-------------|
-| `feat` | New feature |
-| `fix` | Bug fix |
-| `docs` | Documentation changes |
-| `style` | Code style changes (formatting, semicolons) |
-| `refactor` | Code refactoring |
-| `test` | Adding or updating tests |
-| `chore` | Maintenance tasks |
-| `perf` | Performance improvements |
+| Type       | Description                                 |
+| ---------- | ------------------------------------------- |
+| `feat`     | New feature                                 |
+| `fix`      | Bug fix                                     |
+| `docs`     | Documentation changes                       |
+| `style`    | Code style changes (formatting, semicolons) |
+| `refactor` | Code refactoring                            |
+| `test`     | Adding or updating tests                    |
+| `chore`    | Maintenance tasks                           |
+| `perf`     | Performance improvements                    |
 
 ### Examples
 
@@ -376,6 +385,7 @@ describe('GameService', () => {
 ### When to Update Docs
 
 Update documentation when you:
+
 - Add new features
 - Change API endpoints
 - Modify configuration options
@@ -453,6 +463,7 @@ flashpoint-web/
 ## Recognition
 
 Contributors are recognized in:
+
 - GitHub contributors list
 - Release notes for significant contributions
 - README acknowledgments section
@@ -461,16 +472,17 @@ Contributors are recognized in:
 
 ## Quick Reference
 
-| Task | Command |
-|------|---------|
-| Install dependencies | `npm run install:all` |
-| Start dev servers | `npm run dev` |
-| Type check | `npm run typecheck` |
-| Format code | `npm run format` |
-| Run backend tests | `cd backend && npm test` |
-| Run frontend tests | `cd frontend && npm test` |
-| Build all | `npm run build` |
+| Task                 | Command                   |
+| -------------------- | ------------------------- |
+| Install dependencies | `npm run install:all`     |
+| Start dev servers    | `npm run dev`             |
+| Type check           | `npm run typecheck`       |
+| Format code          | `npm run format`          |
+| Run backend tests    | `cd backend && npm test`  |
+| Run frontend tests   | `cd frontend && npm test` |
+| Build all            | `npm run build`           |
 
 ---
 
-Thank you for contributing to Flashpoint Web! Your efforts help preserve gaming history for future generations.
+Thank you for contributing to Flashpoint Web! Your efforts help preserve gaming
+history for future generations.
diff --git a/backend/.eslintrc.json b/backend/.eslintrc.json
index 7deb6b4..543997e 100644
--- a/backend/.eslintrc.json
+++ b/backend/.eslintrc.json
@@ -6,15 +6,15 @@
     "project": true
   },
   "plugins": ["@typescript-eslint"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
   "rules": {
-    "@typescript-eslint/no-unused-vars": ["error", {
-      "argsIgnorePattern": "^_",
-      "varsIgnorePattern": "^_"
-    }],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
diff --git a/backend/README.md b/backend/README.md
index 56dea66..fb02554 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -54,9 +54,11 @@ src/
 ## Database
 
 Uses sql.js (pure JavaScript SQLite) for direct read-only access to:
+
 - `D:\Flashpoint\Data\flashpoint.sqlite`
 
-**No native compilation required!** sql.js is a WebAssembly-based SQLite implementation that works without Visual Studio or build tools.
+**No native compilation required!** sql.js is a WebAssembly-based SQLite
+implementation that works without Visual Studio or build tools.
 
 Schema includes tables for games, platforms, tags, and more.
 
@@ -73,10 +75,12 @@ npm run lint       # ESLint
 ## Environment Variables
 
 Required:
+
 - `FLASHPOINT_PATH` - Path to Flashpoint installation
 - `FLASHPOINT_DB_PATH` - Path to SQLite database
 
 Optional:
+
 - `PORT` - Server port (default: 3100)
 - `NODE_ENV` - Environment (development/production)
 - `GAME_SERVER_URL` - Game Server URL (default: http://localhost:22500)
diff --git a/backend/scripts/fix-absolute-paths.ts b/backend/scripts/fix-absolute-paths.ts
index e991e7a..dc9ce0d 100644
--- a/backend/scripts/fix-absolute-paths.ts
+++ b/backend/scripts/fix-absolute-paths.ts
@@ -77,9 +77,7 @@ async function fixAbsolutePaths() {
     }
 
     // Filter entries with absolute paths
-    const absolutePathEntries = rows.filter(row =>
-      row.path && isAbsolutePath(row.path)
-    );
+    const absolutePathEntries = rows.filter((row) => row.path && isAbsolutePath(row.path));
 
     console.log(`Found ${absolutePathEntries.length} entries with absolute paths\n`);
 
@@ -155,7 +153,6 @@ async function fixAbsolutePaths() {
     console.log();
     console.log('✓ All paths have been converted to relative format');
     console.log('✓ Your games are now fully compatible with Flashpoint Launcher');
-
   } catch (error) {
     console.error('\n✗ Migration failed:', error);
     process.exit(1);
diff --git a/backend/scripts/kill-port.js b/backend/scripts/kill-port.js
index cd8fccb..c4112d8 100644
--- a/backend/scripts/kill-port.js
+++ b/backend/scripts/kill-port.js
@@ -56,7 +56,6 @@ try {
   }
 
   console.log(`\n✅ Port ${port} should now be free!`);
-
 } catch (error) {
   if (error.status === 1 && error.stderr === '') {
     // findstr returns exit code 1 when nothing is found
diff --git a/backend/src/config.ts b/backend/src/config.ts
index c06e1f0..dde5bcf 100644
--- a/backend/src/config.ts
+++ b/backend/src/config.ts
@@ -20,8 +20,8 @@ function getJwtSecret(): string {
   if (process.env.NODE_ENV === 'production') {
     throw new Error(
       'FATAL: JWT_SECRET environment variable is required in production.\n' +
-      'Generate a secure secret: openssl rand -base64 64\n' +
-      'Set it in your .env file or environment variables.'
+        'Generate a secure secret: openssl rand -base64 64\n' +
+        'Set it in your .env file or environment variables.'
     );
   }
 
@@ -106,7 +106,8 @@ export const config = {
   // In Docker: Use relative paths through nginx proxy (/game-proxy)
   // In local dev: Use direct localhost URLs (http://localhost:22500)
   // Can be overridden with GAME_SERVICE_EXTERNAL_URL env var
-  gameServiceExternalUrl: process.env.GAME_SERVICE_EXTERNAL_URL ||
+  gameServiceExternalUrl:
+    process.env.GAME_SERVICE_EXTERNAL_URL ||
     (process.env.NODE_ENV === 'production' ? '/game-proxy' : `http://localhost:22500`),
 
   // Frontend domain (used for CORS and share URL generation)
@@ -120,7 +121,9 @@ export const config = {
   // In Docker (production): defaults to /app/logs/backend.log
   // In local dev: no file logging unless LOG_FILE is explicitly set
   logLevel: process.env.LOG_LEVEL || 'info',
-  logFile: process.env.LOG_FILE || (process.env.NODE_ENV === 'production' ? '/app/logs/backend.log' : undefined),
+  logFile:
+    process.env.LOG_FILE ||
+    (process.env.NODE_ENV === 'production' ? '/app/logs/backend.log' : undefined),
 
   // User Database
   // In Docker (production): /app/data/user.db
@@ -141,7 +144,7 @@ export const config = {
   // When enabled, copies flashpoint.sqlite to local storage for faster access
   // Stored in /app/data alongside user.db
   enableLocalDbCopy: process.env.ENABLE_LOCAL_DB_COPY === 'true',
-  localDbPath: '/app/data/flashpoint.sqlite',  // Only used when enableLocalDbCopy is true
+  localDbPath: '/app/data/flashpoint.sqlite', // Only used when enableLocalDbCopy is true
 
   // SQLite Performance Tuning
   sqliteCacheSize: parseInt(process.env.SQLITE_CACHE_SIZE || '-64000', 10), // Negative = KB, -64000 = 64MB
@@ -156,7 +159,7 @@ export const config = {
   flashpointEdition: flashpointVersion.edition,
 
   // Full version string from version.txt (e.g., "Flashpoint 14.0.3 Infinity - Kingfisher")
-  flashpointVersionString: flashpointVersion.versionString
+  flashpointVersionString: flashpointVersion.versionString,
 };
 
 /**
diff --git a/backend/src/jobs/MetadataSyncJob.ts b/backend/src/jobs/MetadataSyncJob.ts
index dad4041..2747028 100644
--- a/backend/src/jobs/MetadataSyncJob.ts
+++ b/backend/src/jobs/MetadataSyncJob.ts
@@ -54,17 +54,16 @@ export class MetadataSyncJob {
 
         logger.info(
           `[MetadataSyncJob] Sync completed successfully - ` +
-          `Games: ${result.gamesUpdated}, ` +
-          `Tags: ${result.tagsUpdated}, ` +
-          `Platforms: ${result.platformsUpdated}, ` +
-          `Deleted: ${result.gamesDeleted}`
+            `Games: ${result.gamesUpdated}, ` +
+            `Tags: ${result.tagsUpdated}, ` +
+            `Platforms: ${result.platformsUpdated}, ` +
+            `Deleted: ${result.gamesDeleted}`
         );
         return message;
       } else {
         logger.error(`[MetadataSyncJob] Sync failed: ${result.error}`);
         throw new Error(result.error || 'Metadata sync failed');
       }
-
     } catch (error) {
       logger.error('[MetadataSyncJob] Error running metadata sync job:', error);
       throw error; // Re-throw so JobScheduler marks execution as failed
diff --git a/backend/src/jobs/RuffleUpdateJob.ts b/backend/src/jobs/RuffleUpdateJob.ts
index 8ae705c..c1ddab6 100644
--- a/backend/src/jobs/RuffleUpdateJob.ts
+++ b/backend/src/jobs/RuffleUpdateJob.ts
@@ -46,9 +46,7 @@ export class RuffleUpdateJob {
       const result = await this.ruffleService.updateRuffle();
 
       if (result.success) {
-        logger.info(
-          `[RuffleUpdateJob] Update completed successfully - Version: ${result.version}`
-        );
+        logger.info(`[RuffleUpdateJob] Update completed successfully - Version: ${result.version}`);
         return `Ruffle updated to ${result.version}`;
       } else {
         logger.error(`[RuffleUpdateJob] Update failed: ${result.message}`);
diff --git a/backend/src/middleware/MAINTENANCE_MODE.md b/backend/src/middleware/MAINTENANCE_MODE.md
index 13c3c6a..726bd6d 100644
--- a/backend/src/middleware/MAINTENANCE_MODE.md
+++ b/backend/src/middleware/MAINTENANCE_MODE.md
@@ -2,7 +2,9 @@
 
 ## Overview
 
-The maintenance mode middleware provides a way to temporarily restrict access to the application while allowing administrators to continue working. This is useful for:
+The maintenance mode middleware provides a way to temporarily restrict access to
+the application while allowing administrators to continue working. This is
+useful for:
 
 - Performing database migrations
 - Applying critical updates
@@ -11,25 +13,33 @@ The maintenance mode middleware provides a way to temporarily restrict access to
 
 ## How It Works
 
-The middleware uses a **simplified 4-step approach** to control access during maintenance:
+The middleware uses a **simplified 4-step approach** to control access during
+maintenance:
 
 ### Prerequisites
 
-**IMPORTANT:** The `softAuth` middleware MUST be applied globally **before** this middleware. `softAuth` populates `req.user` with user data if a valid token exists, without throwing errors. This allows the maintenance middleware to identify admin users.
+**IMPORTANT:** The `softAuth` middleware MUST be applied globally **before**
+this middleware. `softAuth` populates `req.user` with user data if a valid token
+exists, without throwing errors. This allows the maintenance middleware to
+identify admin users.
 
 **Middleware order in server.ts:**
+
 ```typescript
-app.use(softAuth);           // 1. Populate req.user
-app.use(maintenanceMode);    // 2. Check maintenance and admin status
+app.use(softAuth); // 1. Populate req.user
+app.use(maintenanceMode); // 2. Check maintenance and admin status
 ```
 
 ### Step 1: Allow Minimal Public Paths
 
-**What:** A minimal set of endpoints that must work for admin to LOGIN during maintenance.
+**What:** A minimal set of endpoints that must work for admin to LOGIN during
+maintenance.
 
-**Why:** Admin needs to be able to log in to access the system and disable maintenance mode.
+**Why:** Admin needs to be able to log in to access the system and disable
+maintenance mode.
 
 **Minimal public paths:**
+
 - `/health` - Health check endpoint (monitoring)
 - `/api/auth/login` - Admin needs to login
 - `/api/auth/refresh` - Token refresh
@@ -48,11 +58,14 @@ app.use(maintenanceMode);    // 2. Check maintenance and admin status
 **What:** Users with `settings.update` permission can access **ALL endpoints**.
 
 **How it works:**
-- `req.user` is populated by `softAuth` middleware (applied globally before this)
+
+- `req.user` is populated by `softAuth` middleware (applied globally before
+  this)
 - Check if `req.user.permissions` includes `'settings.update'`
 - If yes → **ALLOW EVERYTHING** (all features, all APIs)
 
 **Admin actions allowed during maintenance:**
+
 - ✅ Browse games, playlists, platforms
 - ✅ View and modify all settings
 - ✅ Manage users and roles
@@ -61,9 +74,11 @@ app.use(maintenanceMode);    // 2. Check maintenance and admin status
 
 ### Step 4: Block Everyone Else
 
-**What:** Non-admin users and guests are blocked from ALL endpoints (except public paths).
+**What:** Non-admin users and guests are blocked from ALL endpoints (except
+public paths).
 
 **Response:**
+
 ```json
 {
   "error": "Service Unavailable",
@@ -74,6 +89,7 @@ app.use(maintenanceMode);    // 2. Check maintenance and admin status
 ```
 
 **HTTP Headers:**
+
 - Status: `503 Service Unavailable`
 - `Retry-After: 3600` (retry after 1 hour)
 
@@ -82,23 +98,32 @@ app.use(maintenanceMode);    // 2. Check maintenance and admin status
 The middleware provides detailed logging to help troubleshoot issues:
 
 ### Info Logs (admin access):
-- `[Maintenance] Admin <username> accessing GET /api/games` - Admin accessing endpoint during maintenance
+
+- `[Maintenance] Admin <username> accessing GET /api/games` - Admin accessing
+  endpoint during maintenance
 
 ### Warning Logs (when requests are blocked):
-- `[Maintenance] Blocked GET /api/games from user john (IP: 127.0.0.1)` - Authenticated user blocked
-- `[Maintenance] Blocked GET /api/games from unauthenticated user (IP: 127.0.0.1)` - Guest blocked
+
+- `[Maintenance] Blocked GET /api/games from user john (IP: 127.0.0.1)` -
+  Authenticated user blocked
+- `[Maintenance] Blocked GET /api/games from unauthenticated user (IP: 127.0.0.1)` -
+  Guest blocked
 
 ### Error Logs (critical failures):
-- `[Maintenance] Critical error in maintenance middleware: <error>` - Middleware error (request blocked)
+
+- `[Maintenance] Critical error in maintenance middleware: <error>` - Middleware
+  error (request blocked)
 
 ## Enabling Maintenance Mode
 
 ### Via Settings UI (Admin only):
+
 1. Navigate to Settings → App Settings
 2. Toggle "Maintenance Mode" on
 3. Confirm the change
 
 ### Via API:
+
 ```bash
 curl -X PATCH http://localhost:3001/api/settings/app \
   -H "Authorization: Bearer <admin-token>" \
@@ -107,6 +132,7 @@ curl -X PATCH http://localhost:3001/api/settings/app \
 ```
 
 ### Via Database:
+
 ```sql
 UPDATE system_settings
 SET value = '1'
@@ -116,12 +142,14 @@ WHERE key = 'app.maintenance_mode';
 ## Testing Maintenance Mode
 
 ### Test as Admin:
+
 1. Enable maintenance mode
 2. Verify you can still access all pages
 3. Check logs - should see debug messages about admin access
 4. Disable maintenance mode
 
 ### Test as Regular User:
+
 1. Enable maintenance mode (as admin)
 2. Log in as regular user in a different browser/incognito
 3. Verify API requests are blocked with 503
@@ -129,6 +157,7 @@ WHERE key = 'app.maintenance_mode';
 5. Disable maintenance mode (as admin)
 
 ### Test as Guest:
+
 1. Enable maintenance mode (as admin)
 2. Open site in incognito/private window (not logged in)
 3. Verify API requests are blocked with 503
@@ -139,17 +168,21 @@ WHERE key = 'app.maintenance_mode';
 
 ### Issue: "Admin sees blocked requests in logs"
 
-**Cause:** Some browser requests (prefetch, favicon, extensions) may not include the Authorization header.
+**Cause:** Some browser requests (prefetch, favicon, extensions) may not include
+the Authorization header.
 
-**Solution:** This is normal. Only API requests to non-whitelisted endpoints need admin auth.
+**Solution:** This is normal. Only API requests to non-whitelisted endpoints
+need admin auth.
 
 ### Issue: "Can't disable maintenance mode"
 
 **Cause:** Admin token may have expired or `/api/settings` is being blocked.
 
 **Solution:**
+
 1. Log out and log back in to get fresh token
 2. Or update database directly:
+
 ```sql
 UPDATE system_settings SET value = '0' WHERE key = 'app.maintenance_mode';
 ```
@@ -164,21 +197,26 @@ UPDATE system_settings SET value = '0' WHERE key = 'app.maintenance_mode';
 
 ### Fail-Closed Strategy (Secure by Default)
 
-**IMPORTANT:** If the middleware encounters an error (e.g., database connection fails), it **blocks the request** rather than allowing it through.
+**IMPORTANT:** If the middleware encounters an error (e.g., database connection
+fails), it **blocks the request** rather than allowing it through.
 
 **Why fail-closed:**
+
 - Maintenance mode is a security-critical feature
 - Errors during maintenance could indicate database issues
 - Safer to block requests than expose potentially broken systems
 - Admin can still disable maintenance via database if needed
 
 **Impact:**
+
 - If settings service fails → all requests blocked (except public paths)
 - Better to be overly cautious during maintenance
 
 ### Token Validation
 
-The middleware relies on `softAuth` middleware (applied globally before it) which:
+The middleware relies on `softAuth` middleware (applied globally before it)
+which:
+
 - Extracts JWT from Authorization header
 - Verifies token signature and expiration
 - Populates `req.user` with user data
@@ -188,16 +226,20 @@ The middleware relies on `softAuth` middleware (applied globally before it) whic
 
 ### Admin Detection
 
-Only users with the `settings.update` permission can bypass maintenance mode. This is typically only the "admin" role.
+Only users with the `settings.update` permission can bypass maintenance mode.
+This is typically only the "admin" role.
 
 **Permission check:**
+
 ```typescript
 const isAdmin = req.user?.permissions?.includes('settings.update');
 ```
 
 ### Singleton Service Instance
 
-The middleware uses a **shared singleton** instance of `CachedSystemSettingsService`:
+The middleware uses a **shared singleton** instance of
+`CachedSystemSettingsService`:
+
 - Prevents per-request service instantiation
 - Shares cache across all requests
 - Better performance and memory usage
@@ -207,7 +249,8 @@ The middleware uses a **shared singleton** instance of `CachedSystemSettingsServ
 ### Optimizations
 
 - **Cache TTL:** 60 seconds (settings cached in singleton service)
-- **Single token verification:** Token verified once by `softAuth`, result reused
+- **Single token verification:** Token verified once by `softAuth`, result
+  reused
 - **Early returns:** Requests exit as soon as they're allowed
 - **Singleton service:** Shared instance prevents per-request instantiation
 - **Minimal processing:** Simple permission checks, no heavy computations
@@ -223,9 +266,11 @@ The middleware uses a **shared singleton** instance of `CachedSystemSettingsServ
 
 ### What Changed
 
-The maintenance mode middleware was recently **completely revamped** to fix critical issues:
+The maintenance mode middleware was recently **completely revamped** to fix
+critical issues:
 
 **Old architecture issues:**
+
 - ❌ Duplicate token verification (performance cost)
 - ❌ Per-request service instantiation
 - ❌ Fail-open security flaw
@@ -233,6 +278,7 @@ The maintenance mode middleware was recently **completely revamped** to fix crit
 - ❌ Admin users getting blocked
 
 **New architecture benefits:**
+
 - ✅ Single token verification (via `softAuth` middleware)
 - ✅ Singleton service instance (shared cache)
 - ✅ Fail-closed security (secure by default)
@@ -251,6 +297,7 @@ If you're upgrading from the old version:
 ## Future Enhancements
 
 Potential improvements:
+
 - Configurable maintenance message (via system settings)
 - Scheduled maintenance windows
 - Read-only mode (allow reads, block writes)
diff --git a/backend/src/middleware/activityLogger.ts b/backend/src/middleware/activityLogger.ts
index d02a583..558d4aa 100644
--- a/backend/src/middleware/activityLogger.ts
+++ b/backend/src/middleware/activityLogger.ts
@@ -39,7 +39,7 @@ export const logActivity = (
             resourceId,
             details,
             ipAddress: req.ip,
-            userAgent: req.headers['user-agent']
+            userAgent: req.headers['user-agent'],
           });
         } catch (error) {
           // Log error but don't fail request
diff --git a/backend/src/middleware/asyncHandler.ts b/backend/src/middleware/asyncHandler.ts
index f139c8e..a33f9dd 100644
--- a/backend/src/middleware/asyncHandler.ts
+++ b/backend/src/middleware/asyncHandler.ts
@@ -50,8 +50,4 @@ export const asyncHandler = (
  * router.get('/games', asyncHandler(getGames));
  * ```
  */
-export type AsyncRouteHandler = (
-  req: Request,
-  res: Response,
-  next: NextFunction
-) => Promise<any>;
+export type AsyncRouteHandler = (req: Request, res: Response, next: NextFunction) => Promise<any>;
diff --git a/backend/src/middleware/auth.ts b/backend/src/middleware/auth.ts
index efa6afe..e4bb8d8 100644
--- a/backend/src/middleware/auth.ts
+++ b/backend/src/middleware/auth.ts
@@ -68,7 +68,7 @@ export const optionalAuth = async (req: Request, res: Response, next: NextFuncti
         username: 'guest',
         email: '',
         role: 'guest',
-        permissions: ['games.read', 'playlists.read']
+        permissions: ['games.read', 'playlists.read'],
       };
     }
 
@@ -131,7 +131,12 @@ export const sharedAccessAuth = asyncHandler(
           // Validate the shareToken is still valid
           const playlist = playlistService.getPlaylistByShareToken(payload.shareToken);
           if (!playlist) {
-            throw new AppError(401, 'Shared access token invalid or expired', true, 'SHARED_ACCESS_INVALID');
+            throw new AppError(
+              401,
+              'Shared access token invalid or expired',
+              true,
+              'SHARED_ACCESS_INVALID'
+            );
           }
 
           req.sharedAccess = payload;
@@ -162,7 +167,7 @@ export const sharedAccessAuth = asyncHandler(
       username: 'guest',
       email: '',
       role: 'guest',
-      permissions: ['games.read', 'playlists.read', 'games.play']
+      permissions: ['games.read', 'playlists.read', 'games.play'],
     };
 
     next();
@@ -193,7 +198,12 @@ export const validateSharedGameAccess = (gameIdParam: string = 'id') => {
       );
 
       if (!isInPlaylist) {
-        throw new AppError(403, 'Game not accessible via this shared playlist', true, 'GAME_NOT_IN_SHARED_PLAYLIST');
+        throw new AppError(
+          403,
+          'Game not accessible via this shared playlist',
+          true,
+          'GAME_NOT_IN_SHARED_PLAYLIST'
+        );
       }
 
       return next();
diff --git a/backend/src/middleware/dateValidation.ts b/backend/src/middleware/dateValidation.ts
index 2e81cbf..81c4fd2 100644
--- a/backend/src/middleware/dateValidation.ts
+++ b/backend/src/middleware/dateValidation.ts
@@ -43,14 +43,14 @@ export function validateDateRange(
       if (isNaN(startDateObj.getTime()) || isNaN(endDateObj.getTime())) {
         return res.status(400).json({
           success: false,
-          error: 'Invalid date format'
+          error: 'Invalid date format',
         });
       }
 
       if (endDateObj < startDateObj) {
         return res.status(400).json({
           success: false,
-          error: 'End date must be after or equal to start date'
+          error: 'End date must be after or equal to start date',
         });
       }
     }
diff --git a/backend/src/middleware/errorHandler.ts b/backend/src/middleware/errorHandler.ts
index 35131e6..82019d9 100644
--- a/backend/src/middleware/errorHandler.ts
+++ b/backend/src/middleware/errorHandler.ts
@@ -30,10 +30,10 @@ function sanitizeBody(body: any): any {
     'refreshToken',
     'secret',
     'apiKey',
-    'accessToken'
+    'accessToken',
   ];
 
-  sensitiveFields.forEach(field => {
+  sensitiveFields.forEach((field) => {
     if (sanitized[field]) {
       sanitized[field] = '[REDACTED]';
     }
@@ -53,15 +53,15 @@ export function errorHandler(
       statusCode: err.statusCode,
       path: req.path,
       method: req.method,
-      stack: err.stack
+      stack: err.stack,
     });
 
     return res.status(err.statusCode).json({
       error: {
         message: err.message,
         statusCode: err.statusCode,
-        ...(err.code && { code: err.code })
-      }
+        ...(err.code && { code: err.code }),
+      },
     });
   }
 
@@ -74,14 +74,14 @@ export function errorHandler(
     method: req.method,
     body: sanitizeBody(req.body),
     query: req.query,
-    params: req.params
+    params: req.params,
   });
 
   // Return generic error message to client (prevent information leakage)
   res.status(500).json({
     error: {
       message: 'Internal server error',
-      statusCode: 500
-    }
+      statusCode: 500,
+    },
   });
 }
diff --git a/backend/src/middleware/featureFlags.ts b/backend/src/middleware/featureFlags.ts
index 7577695..9cb54bc 100644
--- a/backend/src/middleware/featureFlags.ts
+++ b/backend/src/middleware/featureFlags.ts
@@ -29,7 +29,10 @@ export function requireFeature(featureKey: string) {
         logger.warn(
           `[FeatureFlag] Feature '${featureKey}' is disabled, blocked ${req.method} ${req.path} from ${req.user?.username || 'guest'} (IP: ${req.ip})`
         );
-        throw new AppError(403, `This feature is currently disabled. Please contact your administrator.`);
+        throw new AppError(
+          403,
+          `This feature is currently disabled. Please contact your administrator.`
+        );
       }
 
       next();
diff --git a/backend/src/middleware/maintenanceMode.ts b/backend/src/middleware/maintenanceMode.ts
index af64ce7..d16813e 100644
--- a/backend/src/middleware/maintenanceMode.ts
+++ b/backend/src/middleware/maintenanceMode.ts
@@ -8,14 +8,14 @@ const systemSettings = new CachedSystemSettingsService();
 // MINIMAL whitelist - only endpoints needed for admin to LOGIN
 // Everything else requires admin authentication
 const MINIMAL_PUBLIC_PATHS = [
-  '/health',                    // Health checks for monitoring
-  '/api/auth/login',            // Admin needs to login
-  '/api/auth/register',         // Initial admin setup (first user)
-  '/api/auth/setup-status',     // Check if system needs initial setup
-  '/api/auth/refresh',          // Token refresh
-  '/api/settings/public',       // UI needs public settings
-  '/proxy',                     // Game images, logos, screenshots, and game files
-  '/api/playlists/shared',      // Anonymous shared playlist access (bypasses guest access settings)
+  '/health', // Health checks for monitoring
+  '/api/auth/login', // Admin needs to login
+  '/api/auth/register', // Initial admin setup (first user)
+  '/api/auth/setup-status', // Check if system needs initial setup
+  '/api/auth/refresh', // Token refresh
+  '/api/settings/public', // UI needs public settings
+  '/proxy', // Game images, logos, screenshots, and game files
+  '/api/playlists/shared', // Anonymous shared playlist access (bypasses guest access settings)
 ];
 
 /**
@@ -36,12 +36,16 @@ const MINIMAL_PUBLIC_PATHS = [
  * 3. If enabled: only allow admins through, block everyone else
  * 4. If disabled: allow everyone (normal operation)
  */
-export async function maintenanceMode(req: Request, res: Response, next: NextFunction): Promise<void | Response> {
+export async function maintenanceMode(
+  req: Request,
+  res: Response,
+  next: NextFunction
+): Promise<void | Response> {
   try {
     // Step 1: Check if path is in minimal public whitelist
     // These paths must work for admin to LOGIN during maintenance
-    const isPublicPath = MINIMAL_PUBLIC_PATHS.some(path =>
-      req.path === path || req.path.startsWith(path + '/')
+    const isPublicPath = MINIMAL_PUBLIC_PATHS.some(
+      (path) => req.path === path || req.path.startsWith(path + '/')
     );
 
     if (isPublicPath) {
@@ -73,27 +77,20 @@ export async function maintenanceMode(req: Request, res: Response, next: NextFun
     if (isAdmin) {
       // Admin user - ALLOW EVERYTHING (all endpoints, all features)
       // user is guaranteed to exist if isAdmin is true
-      logger.info(
-        `[Maintenance] Admin ${user!.username} accessing ${req.method} ${req.path}`
-      );
+      logger.info(`[Maintenance] Admin ${user!.username} accessing ${req.method} ${req.path}`);
       return next();
     }
 
     // Step 4: Non-admin user or guest - BLOCK EVERYTHING
     const userInfo = user ? `user ${user.username}` : 'unauthenticated user';
-    logger.warn(
-      `[Maintenance] Blocked ${req.method} ${req.path} from ${userInfo} (IP: ${req.ip})`
-    );
-
-    return res.status(503)
-      .set('Retry-After', '3600')
-      .json({
-        error: 'Service Unavailable',
-        message: 'The application is currently undergoing maintenance. Please try again later.',
-        maintenanceMode: true,
-        retryAfter: 3600,
-      });
+    logger.warn(`[Maintenance] Blocked ${req.method} ${req.path} from ${userInfo} (IP: ${req.ip})`);
 
+    return res.status(503).set('Retry-After', '3600').json({
+      error: 'Service Unavailable',
+      message: 'The application is currently undergoing maintenance. Please try again later.',
+      maintenanceMode: true,
+      retryAfter: 3600,
+    });
   } catch (error) {
     logger.error('[Maintenance] Critical error in maintenance middleware:', error);
 
diff --git a/backend/src/middleware/performanceTracking.ts b/backend/src/middleware/performanceTracking.ts
index 0e65c03..e186d31 100644
--- a/backend/src/middleware/performanceTracking.ts
+++ b/backend/src/middleware/performanceTracking.ts
@@ -34,11 +34,13 @@ export function performanceTracking(req: Request, res: Response, next: NextFunct
  * - /api/users/789 → /api/users/:id
  */
 function normalizePath(path: string): string {
-  return path
-    // Replace UUIDs
-    .replace(/\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/gi, '/:id')
-    // Replace numeric IDs
-    .replace(/\/\d+/g, '/:id')
-    // Replace alphanumeric IDs (game IDs, share tokens)
-    .replace(/\/[a-zA-Z0-9_-]{8,}/g, '/:id');
+  return (
+    path
+      // Replace UUIDs
+      .replace(/\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/gi, '/:id')
+      // Replace numeric IDs
+      .replace(/\/\d+/g, '/:id')
+      // Replace alphanumeric IDs (game IDs, share tokens)
+      .replace(/\/[a-zA-Z0-9_-]{8,}/g, '/:id')
+  );
 }
diff --git a/backend/src/middleware/rbac.ts b/backend/src/middleware/rbac.ts
index c9a8743..649fd64 100644
--- a/backend/src/middleware/rbac.ts
+++ b/backend/src/middleware/rbac.ts
@@ -14,9 +14,7 @@ export const requirePermission = (...permissions: string[]) => {
     const userPermissions = req.user.permissions || [];
 
     // Check if user has any of the required permissions
-    const hasPermission = permissions.some(permission =>
-      userPermissions.includes(permission)
-    );
+    const hasPermission = permissions.some((permission) => userPermissions.includes(permission));
 
     if (!hasPermission) {
       return next(new AppError(403, 'Insufficient permissions'));
diff --git a/backend/src/middleware/requestTimeout.ts b/backend/src/middleware/requestTimeout.ts
index 72f7795..28f855e 100644
--- a/backend/src/middleware/requestTimeout.ts
+++ b/backend/src/middleware/requestTimeout.ts
@@ -50,7 +50,7 @@ export function requestTimeout(timeoutMs: number = DEFAULT_TIMEOUT_MS) {
           timeout: `${timeoutMs}ms`,
           elapsed: `${elapsed}ms`,
           ip: req.ip,
-          userAgent: req.get('user-agent')
+          userAgent: req.get('user-agent'),
         });
 
         res.status(408).json({
@@ -58,8 +58,8 @@ export function requestTimeout(timeoutMs: number = DEFAULT_TIMEOUT_MS) {
             message: 'Request timeout',
             statusCode: 408,
             timeout: timeoutMs,
-            details: 'The server took too long to respond. Please try again.'
-          }
+            details: 'The server took too long to respond. Please try again.',
+          },
         });
 
         hasResponded = true;
@@ -71,17 +71,17 @@ export function requestTimeout(timeoutMs: number = DEFAULT_TIMEOUT_MS) {
     const originalJson = res.json.bind(res);
     const originalEnd = res.end.bind(res);
 
-    res.send = function(body?: any) {
+    res.send = function (body?: any) {
       clearTimeoutAndLog();
       return originalSend(body);
     };
 
-    res.json = function(body?: any) {
+    res.json = function (body?: any) {
       clearTimeoutAndLog();
       return originalJson(body);
     };
 
-    res.end = function(chunk?: any, encoding?: any, callback?: any) {
+    res.end = function (chunk?: any, encoding?: any, callback?: any) {
       clearTimeoutAndLog();
       return originalEnd(chunk, encoding, callback);
     };
@@ -100,7 +100,7 @@ export function requestTimeout(timeoutMs: number = DEFAULT_TIMEOUT_MS) {
             url: req.url,
             elapsed: `${elapsed}ms`,
             timeout: `${timeoutMs}ms`,
-            percentage: `${Math.round((elapsed / timeoutMs) * 100)}%`
+            percentage: `${Math.round((elapsed / timeoutMs) * 100)}%`,
           });
         }
       }
@@ -115,7 +115,7 @@ export function requestTimeout(timeoutMs: number = DEFAULT_TIMEOUT_MS) {
         if (isTimedOut) {
           logger.info('[Request Aborted] Client closed connection after timeout', {
             method: req.method,
-            url: req.url
+            url: req.url,
           });
         }
       }
@@ -142,5 +142,5 @@ export const TimeoutConfig = {
   LONG: 120000,
 
   /** Extended timeout for batch operations (300s / 5 minutes) */
-  EXTENDED: 300000
+  EXTENDED: 300000,
 };
diff --git a/backend/src/middleware/validation.ts b/backend/src/middleware/validation.ts
index ce1a497..d9ec6df 100644
--- a/backend/src/middleware/validation.ts
+++ b/backend/src/middleware/validation.ts
@@ -52,9 +52,7 @@ export function validateRequest<T extends z.ZodType>(
       if (error instanceof z.ZodError) {
         // Extract first validation error message
         const firstError = error.errors[0];
-        const message = firstError
-          ? `Validation error: ${firstError.message}`
-          : 'Validation error';
+        const message = firstError ? `Validation error: ${firstError.message}` : 'Validation error';
 
         return next(new AppError(400, message));
       }
@@ -104,9 +102,7 @@ export function validateMultiple(schemas: Partial<Record<RequestProperty, z.ZodT
     } catch (error) {
       if (error instanceof z.ZodError) {
         const firstError = error.errors[0];
-        const message = firstError
-          ? `Validation error: ${firstError.message}`
-          : 'Validation error';
+        const message = firstError ? `Validation error: ${firstError.message}` : 'Validation error';
 
         return next(new AppError(400, message));
       }
diff --git a/backend/src/migrations/README.md b/backend/src/migrations/README.md
index 11c5de3..3933531 100644
--- a/backend/src/migrations/README.md
+++ b/backend/src/migrations/README.md
@@ -4,54 +4,64 @@ This directory contains SQL migration scripts for the user database (`user.db`).
 
 ## Current Migration Strategy (Simplified)
 
-**Date:** 2026-01-30
-**Status:** Consolidated into single migration file
+**Date:** 2026-01-30 **Status:** Consolidated into single migration file
 
-All previous migrations have been consolidated into a single comprehensive migration file:
+All previous migrations have been consolidated into a single comprehensive
+migration file:
 
-- **`001_complete_schema.sql`** - Complete database schema with all tables, indexes, triggers, seed data
+- **`001_complete_schema.sql`** - Complete database schema with all tables,
+  indexes, triggers, seed data
 
 This migration is **idempotent** and safe to run multiple times.
 
 ### What's Included:
 
 ✅ **All Tables** (15 total):
-- Users & Authentication (users, roles, permissions, role_permissions, refresh_tokens)
+
+- Users & Authentication (users, roles, permissions, role_permissions,
+  refresh_tokens)
 - Activity Tracking (activity_logs, login_attempts)
 - Game Play Tracking (user_game_plays, user_game_stats, user_stats)
 - User Data (user_settings, user_playlists, user_playlist_games, user_favorites)
 - System (system_settings, job_execution_logs)
 
 ✅ **All Indexes** (50+ optimized indexes):
+
 - Basic indexes for foreign keys and lookups
 - Composite indexes for complex queries
 - Partial indexes for conditional queries
 - Performance indexes for frequently-accessed patterns
 
 ✅ **All Triggers**:
+
 - Auto-update playlist game_count
 
 ✅ **All Seed Data**:
+
 - Default roles (admin, user, guest)
 - Default permissions (18 permissions)
 - Role-permission mappings
 - System settings (35+ default settings)
 
 ✅ **Playlist Sharing Features**:
+
 - share_token, share_expires_at, show_owner columns
 - Unique indexes for secure sharing
 
 ## Migration Execution
 
-Migrations are automatically executed on server startup by `UserDatabaseService.ts`:
+Migrations are automatically executed on server startup by
+`UserDatabaseService.ts`:
 
 1. **Bootstrap** - Creates migration registry table (`migrations_applied`)
-2. **Schema Creation** - Runs `001_complete_schema.sql` if database doesn't exist
+2. **Schema Creation** - Runs `001_complete_schema.sql` if database doesn't
+   exist
 3. **Idempotent** - Safe to run multiple times (uses `IF NOT EXISTS` everywhere)
 
 ### Migration Registry (`bootstrap.sql`)
 
-The migration system tracks applied migrations in the `migrations_applied` table:
+The migration system tracks applied migrations in the `migrations_applied`
+table:
 
 ```sql
 CREATE TABLE IF NOT EXISTS migrations_applied (
@@ -65,6 +75,7 @@ CREATE TABLE IF NOT EXISTS migrations_applied (
 ```
 
 This allows:
+
 - Detecting which migrations have been applied
 - Preventing duplicate execution
 - Verifying migration integrity with checksums
@@ -72,7 +83,8 @@ This allows:
 
 ## Archived Migrations
 
-Previous migration files (001-014) have been moved to `archived/` directory for reference:
+Previous migration files (001-014) have been moved to `archived/` directory for
+reference:
 
 - `001_initialize_schema_OLD.sql` - Original schema definition
 - `002_seed_default_data.sql` - Original seed data
@@ -91,6 +103,7 @@ When you need to modify the database schema after deployment:
 For new columns, indexes, or seed data:
 
 1. **Create a new migration file** with the next version number:
+
    ```bash
    cd backend/src/migrations
    touch 002_your_migration_name.sql
@@ -99,6 +112,7 @@ For new columns, indexes, or seed data:
    Current version: **001** (next available: **002**)
 
 2. **Write idempotent SQL** using defensive checks:
+
    ```sql
    -- Migration 002: Description of changes
    -- Created: 2026-MM-DD
@@ -114,6 +128,7 @@ For new columns, indexes, or seed data:
    ```
 
 3. **Update `UserDatabaseService.ts`** to run the new migration:
+
    ```typescript
    // In runMigrations() method, after the 001 migration:
 
@@ -258,6 +273,7 @@ COMMIT;
 ### Migration checksum mismatch
 
 If you see checksum warnings:
+
 - Migration file was modified after being applied
 - This is usually safe if changes are additive
 - Check `migrations_applied` table for recorded checksum
@@ -315,6 +331,7 @@ VALUES
 ### Consolidation (2026-01-30)
 
 Previous migration strategy used 14+ separate files:
+
 - `001_initialize_schema.sql` - Base tables
 - `002_seed_default_data.sql` - Seed data
 - `003-013` - Incremental changes
@@ -323,6 +340,7 @@ Previous migration strategy used 14+ separate files:
 **Consolidated into:** Single `001_complete_schema.sql` file
 
 **Benefits:**
+
 - ✅ Simpler deployment (one file vs many)
 - ✅ Guaranteed consistency (all-or-nothing)
 - ✅ Easier testing (single execution)
diff --git a/backend/src/migrations/archived/README.md b/backend/src/migrations/archived/README.md
index f122d29..11ed423 100644
--- a/backend/src/migrations/archived/README.md
+++ b/backend/src/migrations/archived/README.md
@@ -1,42 +1,46 @@
 # Archived Migrations
 
-This directory contains historical migration files that have been consolidated into the current migration system.
+This directory contains historical migration files that have been consolidated
+into the current migration system.
 
 ## Migration Consolidation (2026-01-28)
 
 The original 16 migration files (001-016) have been consolidated into:
+
 - `001_initialize_schema.sql` - Complete database schema with all tables
 - `002_seed_default_data.sql` - All default roles, permissions, and settings
 
-These archived files are kept for reference and historical documentation purposes only. **They are no longer executed** by the migration system.
+These archived files are kept for reference and historical documentation
+purposes only. **They are no longer executed** by the migration system.
 
 ## Historical Migrations
 
-| Migration | Description | Consolidated Into |
-|-----------|-------------|-------------------|
-| 001_user-schema.sql | Base schema with users, roles, permissions, etc. | 001_initialize_schema.sql |
-| 002_create-user-settings.sql | User settings table (key-value) | 001_initialize_schema.sql |
-| 003_create-system-settings.sql | System settings table + seed data | 001/002_initialize |
-| 004_add-validation-schemas.sql | JSON schema validation for settings | 002_seed_default_data.sql |
-| 005_user-playlists-and-favorites.sql | User playlists and favorites tables | 001_initialize_schema.sql |
-| 006_create-jobs-settings.sql | Background job settings | 002_seed_default_data.sql |
-| 007_create-job-execution-logs.sql | Job execution logs table | 001_initialize_schema.sql |
-| 008_convert-interval-to-cron.sql | Convert interval to cron expressions | 002_seed_default_data.sql |
-| 009_update-public-settings.sql | Update is_public flags | 002_seed_default_data.sql |
-| 010_make-features-public.sql | Make feature flags public | 002_seed_default_data.sql |
-| 011_make-game-settings-public.sql | Make game settings public | (Obsolete - see 012) |
-| 012_remove-game-settings.sql | Remove game settings | Not included |
-| 013_add-datetime-format-settings.sql | Add date/time format settings | 002_seed_default_data.sql |
-| 014_add-user-datetime-format-settings.sql | User date/time format settings | (Handled in app code) |
-| 015_standardize-datetime-to-iso8601.sql | Convert to ISO 8601 UTC format | 001_initialize_schema.sql |
-| 016_add-ruffle-update-job-settings.sql | Ruffle update job settings | 002_seed_default_data.sql |
+| Migration                                 | Description                                      | Consolidated Into         |
+| ----------------------------------------- | ------------------------------------------------ | ------------------------- |
+| 001_user-schema.sql                       | Base schema with users, roles, permissions, etc. | 001_initialize_schema.sql |
+| 002_create-user-settings.sql              | User settings table (key-value)                  | 001_initialize_schema.sql |
+| 003_create-system-settings.sql            | System settings table + seed data                | 001/002_initialize        |
+| 004_add-validation-schemas.sql            | JSON schema validation for settings              | 002_seed_default_data.sql |
+| 005_user-playlists-and-favorites.sql      | User playlists and favorites tables              | 001_initialize_schema.sql |
+| 006_create-jobs-settings.sql              | Background job settings                          | 002_seed_default_data.sql |
+| 007_create-job-execution-logs.sql         | Job execution logs table                         | 001_initialize_schema.sql |
+| 008_convert-interval-to-cron.sql          | Convert interval to cron expressions             | 002_seed_default_data.sql |
+| 009_update-public-settings.sql            | Update is_public flags                           | 002_seed_default_data.sql |
+| 010_make-features-public.sql              | Make feature flags public                        | 002_seed_default_data.sql |
+| 011_make-game-settings-public.sql         | Make game settings public                        | (Obsolete - see 012)      |
+| 012_remove-game-settings.sql              | Remove game settings                             | Not included              |
+| 013_add-datetime-format-settings.sql      | Add date/time format settings                    | 002_seed_default_data.sql |
+| 014_add-user-datetime-format-settings.sql | User date/time format settings                   | (Handled in app code)     |
+| 015_standardize-datetime-to-iso8601.sql   | Convert to ISO 8601 UTC format                   | 001_initialize_schema.sql |
+| 016_add-ruffle-update-job-settings.sql    | Ruffle update job settings                       | 002_seed_default_data.sql |
 
 ## New Migration System
 
 The new system uses a **migration registry** approach:
 
 1. **migrations table** tracks applied migrations by name with checksums
-2. **Backward compatibility** - Existing databases are detected and marked as migrated
+2. **Backward compatibility** - Existing databases are detected and marked as
+   migrated
 3. **Fresh installs** use consolidated schema for faster setup
 4. **Future migrations** can be added as new numbered files (003, 004, etc.)
 
diff --git a/backend/src/proxy/config.ts b/backend/src/proxy/config.ts
index e58e32e..23b9bd4 100644
--- a/backend/src/proxy/config.ts
+++ b/backend/src/proxy/config.ts
@@ -99,7 +99,7 @@ export class ConfigManager {
         infinityServerURL: 'https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs/',
         externalFilePaths: [
           'https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs',
-          'https://infinity.unstable.life/Flashpoint/Legacy/htdocs/'
+          'https://infinity.unstable.life/Flashpoint/Legacy/htdocs/',
         ],
         mad4fpEnabled: false,
         mad4fpPaths: [],
diff --git a/backend/src/proxy/gamezipserver.ts b/backend/src/proxy/gamezipserver.ts
index 39fb7e9..96758fc 100644
--- a/backend/src/proxy/gamezipserver.ts
+++ b/backend/src/proxy/gamezipserver.ts
@@ -187,7 +187,10 @@ export class GameZipServer {
    * Handle GET /* - Serve file from mounted ZIPs
    * Supports proxy-style requests: GET http://domain.com/path HTTP/1.1
    */
-  private async handleFileRequest(req: http.IncomingMessage, res: http.ServerResponse): Promise<void> {
+  private async handleFileRequest(
+    req: http.IncomingMessage,
+    res: http.ServerResponse
+  ): Promise<void> {
     if (!req.url) {
       this.sendError(res, 400, 'Bad Request: No URL');
       return;
@@ -233,7 +236,9 @@ export class GameZipServer {
     const contentType = mimeLookup(ext) || 'application/octet-stream';
 
     // Send file
-    logger.info(`[GameZipServer] ✓ Serving from ZIP ${result.mountId}: ${relPath} (${result.data.length} bytes)`);
+    logger.info(
+      `[GameZipServer] ✓ Serving from ZIP ${result.mountId}: ${relPath} (${result.data.length} bytes)`
+    );
 
     // CORS headers
     if (this.settings.allowCrossDomain) {
@@ -258,7 +263,7 @@ export class GameZipServer {
   private readBody(req: http.IncomingMessage): Promise<string> {
     return new Promise((resolve, reject) => {
       let body = '';
-      req.on('data', chunk => {
+      req.on('data', (chunk) => {
         body += chunk.toString();
       });
       req.on('end', () => {
diff --git a/backend/src/proxy/legacy-server.ts b/backend/src/proxy/legacy-server.ts
index 11ca26f..b3e9107 100644
--- a/backend/src/proxy/legacy-server.ts
+++ b/backend/src/proxy/legacy-server.ts
@@ -68,13 +68,16 @@ export class LegacyServer {
    * Build all path candidates in priority order
    * Replicates the path resolution algorithm from Go's ServeLegacy()
    */
-  private buildPathCandidates(relPath: string, urlPath: string): Array<{ path: string; type: string }> {
+  private buildPathCandidates(
+    relPath: string,
+    urlPath: string
+  ): Array<{ path: string; type: string }> {
     const candidates: Array<{ path: string; type: string }> = [];
 
     // 1. Exact file paths (with and without query string)
     candidates.push({
       path: path.join(this.settings.legacyHTDOCSPath, relPath),
-      type: 'exact'
+      type: 'exact',
     });
 
     // If URL has query string, try without it
@@ -82,7 +85,7 @@ export class LegacyServer {
     if (pathWithoutQuery !== relPath) {
       candidates.push({
         path: path.join(this.settings.legacyHTDOCSPath, pathWithoutQuery),
-        type: 'exact-no-query'
+        type: 'exact-no-query',
       });
     }
 
@@ -90,13 +93,13 @@ export class LegacyServer {
     for (const override of this.settings.legacyOverridePaths) {
       candidates.push({
         path: path.join(this.settings.legacyHTDOCSPath, override, relPath),
-        type: `override:${override}`
+        type: `override:${override}`,
       });
 
       if (pathWithoutQuery !== relPath) {
         candidates.push({
           path: path.join(this.settings.legacyHTDOCSPath, override, pathWithoutQuery),
-          type: `override:${override}-no-query`
+          type: `override:${override}-no-query`,
         });
       }
     }
@@ -105,13 +108,13 @@ export class LegacyServer {
     if (this.isScriptUrl(urlPath)) {
       candidates.push({
         path: path.join(this.settings.legacyCGIBINPath, relPath),
-        type: 'cgi-bin'
+        type: 'cgi-bin',
       });
 
       if (pathWithoutQuery !== relPath) {
         candidates.push({
           path: path.join(this.settings.legacyCGIBINPath, pathWithoutQuery),
-          type: 'cgi-bin-no-query'
+          type: 'cgi-bin-no-query',
         });
       }
     }
@@ -120,14 +123,14 @@ export class LegacyServer {
     for (const ext of INDEX_EXTENSIONS) {
       candidates.push({
         path: path.join(this.settings.legacyHTDOCSPath, relPath, `index.${ext}`),
-        type: `index:${ext}`
+        type: `index:${ext}`,
       });
 
       // Index files in override paths
       for (const override of this.settings.legacyOverridePaths) {
         candidates.push({
           path: path.join(this.settings.legacyHTDOCSPath, override, relPath, `index.${ext}`),
-          type: `index-override:${override}:${ext}`
+          type: `index-override:${override}:${ext}`,
         });
       }
     }
@@ -170,7 +173,7 @@ export class LegacyServer {
     return {
       data,
       contentType,
-      source: 'local-htdocs'
+      source: 'local-htdocs',
     };
   }
 
diff --git a/backend/src/proxy/mimeTypes.ts b/backend/src/proxy/mimeTypes.ts
index 194306c..2193c87 100644
--- a/backend/src/proxy/mimeTypes.ts
+++ b/backend/src/proxy/mimeTypes.ts
@@ -175,7 +175,7 @@ export const CUSTOM_MIME_TYPES: { [key: string]: string } = {
   wrl: 'model/vrml',
   wvr: 'x-world/x-wvr',
   x3db: 'model/x3d+binary',
-  xvr: 'x-world/x-xvr'
+  xvr: 'x-world/x-xvr',
 };
 
 // Standard MIME types for common web files
@@ -230,7 +230,7 @@ const STANDARD_MIME_TYPES: { [key: string]: string } = {
   // Binary
   bin: 'application/octet-stream',
   exe: 'application/octet-stream',
-  dll: 'application/octet-stream'
+  dll: 'application/octet-stream',
 };
 
 /**
diff --git a/backend/src/proxy/proxy-request-handler.ts b/backend/src/proxy/proxy-request-handler.ts
index 351b19d..a0663a3 100644
--- a/backend/src/proxy/proxy-request-handler.ts
+++ b/backend/src/proxy/proxy-request-handler.ts
@@ -72,7 +72,6 @@ export class ProxyRequestHandler {
 
       logger.info(`[ProxyHandler] ✓ Served from ${legacyResult.source}`);
       this.sendResponse(res, legacyResult.data, legacyResult.contentType, legacyResult.source);
-
     } catch (error) {
       logger.error('[ProxyHandler] Error handling request:', error);
 
@@ -119,7 +118,12 @@ export class ProxyRequestHandler {
   /**
    * Send successful response
    */
-  private sendResponse(res: ServerResponse, data: Buffer, contentType: string, source: string): void {
+  private sendResponse(
+    res: ServerResponse,
+    data: Buffer,
+    contentType: string,
+    source: string
+  ): void {
     // CORS headers
     if (this.settings.allowCrossDomain) {
       res.setHeader('Access-Control-Allow-Origin', '*');
diff --git a/backend/src/proxy/server.ts b/backend/src/proxy/server.ts
index 47d3a39..256d83b 100644
--- a/backend/src/proxy/server.ts
+++ b/backend/src/proxy/server.ts
@@ -23,7 +23,7 @@ export class GameProxyServer {
     this.app = express();
     this.config = {
       ...proxyConfig,
-      chunkSize: proxyConfig.chunkSize || 8192 // 8KB default chunk size
+      chunkSize: proxyConfig.chunkSize || 8192, // 8KB default chunk size
     };
     this.setupMiddleware();
     this.setupRoutes();
@@ -35,7 +35,10 @@ export class GameProxyServer {
       this.app.use((req, res, next) => {
         res.header('Access-Control-Allow-Origin', '*');
         res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
-        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+        res.header(
+          'Access-Control-Allow-Headers',
+          'Origin, X-Requested-With, Content-Type, Accept'
+        );
 
         if (req.method === 'OPTIONS') {
           res.sendStatus(200);
@@ -68,8 +71,8 @@ export class GameProxyServer {
       res.status(500).json({
         error: {
           message: 'Proxy server error',
-          statusCode: 500
-        }
+          statusCode: 500,
+        },
       });
     });
   }
@@ -113,8 +116,8 @@ export class GameProxyServer {
       error: {
         message: 'File not found',
         path: requestPath,
-        statusCode: 404
-      }
+        statusCode: 404,
+      },
     });
   }
 
@@ -159,7 +162,7 @@ export class GameProxyServer {
 
     const pathsToTry = [
       path.join(this.config.legacyHTDOCSPath, requestPath),
-      path.join(this.config.gameDataPath, requestPath)
+      path.join(this.config.gameDataPath, requestPath),
     ];
 
     for (const filePath of pathsToTry) {
@@ -201,7 +204,9 @@ export class GameProxyServer {
       const result = await zipManager.findFile(requestPath);
 
       if (result) {
-        logger.info(`[Proxy] ✓ Found in ZIP ${result.mountId}: ${requestPath} (${result.data.length} bytes)`);
+        logger.info(
+          `[Proxy] ✓ Found in ZIP ${result.mountId}: ${requestPath} (${result.data.length} bytes)`
+        );
         return result.data;
       }
 
@@ -231,7 +236,7 @@ export class GameProxyServer {
 
       // Find all .zip files in Data/Games
       const files = fs.readdirSync(gamesPath);
-      const zipFiles = files.filter(f => f.toLowerCase().endsWith('.zip'));
+      const zipFiles = files.filter((f) => f.toLowerCase().endsWith('.zip'));
 
       if (zipFiles.length === 0) {
         logger.info(`[Proxy] No ZIP files found in ${gamesPath}`);
@@ -274,7 +279,11 @@ export class GameProxyServer {
   /**
    * Serve content from ZIP file
    */
-  private async serveZipContent(content: Buffer, requestPath: string, res: Response): Promise<void> {
+  private async serveZipContent(
+    content: Buffer,
+    requestPath: string,
+    res: Response
+  ): Promise<void> {
     try {
       // Determine MIME type from file extension
       const ext = path.extname(requestPath).substring(1).toLowerCase();
@@ -287,7 +296,9 @@ export class GameProxyServer {
 
       res.send(content);
 
-      logger.debug(`[Proxy] Served from ZIP: ${requestPath} (${mimeType}, ${content.length} bytes)`);
+      logger.debug(
+        `[Proxy] Served from ZIP: ${requestPath} (${mimeType}, ${content.length} bytes)`
+      );
     } catch (error) {
       logger.error('[Proxy] Error serving ZIP content:', error);
       throw error;
@@ -307,7 +318,7 @@ export class GameProxyServer {
       // Encode each path segment individually
       // This prevents double-encoding while ensuring special characters are handled
       const pathSegments = urlObj.pathname.split('/');
-      const encodedSegments = pathSegments.map(segment => {
+      const encodedSegments = pathSegments.map((segment) => {
         if (!segment) return segment; // Preserve empty segments (leading/trailing slashes)
 
         try {
@@ -333,7 +344,9 @@ export class GameProxyServer {
       return urlObj.toString();
     } catch (error) {
       // If URL parsing fails, return original URL
-      logger.warn(`[Proxy] Failed to encode URL for CDN: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      logger.warn(
+        `[Proxy] Failed to encode URL for CDN: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
       return url;
     }
   }
@@ -354,8 +367,8 @@ export class GameProxyServer {
           maxRedirects: 5,
           headers: {
             // Match PHP router's Accept-Encoding header
-            'Accept-Encoding': 'identity'
-          }
+            'Accept-Encoding': 'identity',
+          },
           // Note: Removed validateStatus to allow axios to follow redirects automatically
         });
 
@@ -368,7 +381,9 @@ export class GameProxyServer {
             continue;
           }
 
-          logger.info(`[Proxy] ✓ Successfully fetched from external: ${encodedUrl} (${buffer.length} bytes)`);
+          logger.info(
+            `[Proxy] ✓ Successfully fetched from external: ${encodedUrl} (${buffer.length} bytes)`
+          );
 
           // Cache the downloaded file locally for future use
           await this.cacheDownloadedFile(requestPath, buffer);
@@ -426,7 +441,7 @@ export class GameProxyServer {
 
       // Stream file with chunking for large files
       const readStream = fs.createReadStream(filePath, {
-        highWaterMark: this.config.chunkSize
+        highWaterMark: this.config.chunkSize,
       });
 
       readStream.on('error', (error) => {
@@ -435,8 +450,8 @@ export class GameProxyServer {
           res.status(500).json({
             error: {
               message: 'Error streaming file',
-              statusCode: 500
-            }
+              statusCode: 500,
+            },
           });
         }
       });
@@ -477,8 +492,13 @@ export class GameProxyServer {
       server.on('error', (error: NodeJS.ErrnoException) => {
         if (error.code === 'EADDRINUSE') {
           logger.error(`[Proxy] Port ${this.config.proxyPort} is already in use.`);
-          logger.error('[Proxy] Please check if another instance is running or change PROXY_PORT in .env');
-          logger.error('[Proxy] You can find the process using: netstat -ano | findstr :' + this.config.proxyPort);
+          logger.error(
+            '[Proxy] Please check if another instance is running or change PROXY_PORT in .env'
+          );
+          logger.error(
+            '[Proxy] You can find the process using: netstat -ano | findstr :' +
+              this.config.proxyPort
+          );
         } else {
           logger.error('[Proxy] Failed to start proxy server:', error);
         }
diff --git a/backend/src/proxy/zip-manager.ts b/backend/src/proxy/zip-manager.ts
index f43d0bd..0ca6044 100644
--- a/backend/src/proxy/zip-manager.ts
+++ b/backend/src/proxy/zip-manager.ts
@@ -110,9 +110,9 @@ export class ZipManager {
   async findFile(relPath: string): Promise<{ data: Buffer; mountId: string } | null> {
     // Try with different prefixes (different ZIP structures)
     const pathsToTry = [
-      `content/${relPath}`,       // Most common: content/domain/path
-      `htdocs/${relPath}`,        // Standard: htdocs/domain/path
-      relPath,                     // No prefix: domain/path
+      `content/${relPath}`, // Most common: content/domain/path
+      `htdocs/${relPath}`, // Standard: htdocs/domain/path
+      relPath, // No prefix: domain/path
       `Legacy/htdocs/${relPath}`, // Full path: Legacy/htdocs/domain/path
     ];
 
@@ -176,7 +176,7 @@ export class ZipManager {
 
       if (pattern) {
         const regex = new RegExp(pattern, 'i');
-        files = files.filter(f => regex.test(f));
+        files = files.filter((f) => regex.test(f));
       }
 
       return files;
@@ -199,7 +199,7 @@ export class ZipManager {
   async unmountAll(): Promise<void> {
     logger.info(`[ZipManager] Unmounting all ZIPs (${this.mountedZips.size})...`);
 
-    const promises = Array.from(this.mountedZips.keys()).map(id => this.unmount(id));
+    const promises = Array.from(this.mountedZips.keys()).map((id) => this.unmount(id));
     await Promise.all(promises);
 
     logger.info(`[ZipManager] ✓ All ZIPs unmounted`);
diff --git a/backend/src/routes/activities.ts b/backend/src/routes/activities.ts
index d6f6794..7ba85f4 100644
--- a/backend/src/routes/activities.ts
+++ b/backend/src/routes/activities.ts
@@ -31,7 +31,7 @@ const activityQuerySchema = z.object({
   startDate: z.string().optional(),
   endDate: z.string().optional(),
   sortBy: z.enum(['createdAt', 'username', 'action', 'resource', 'ipAddress']).default('createdAt'),
-  sortOrder: z.enum(['asc', 'desc']).default('desc')
+  sortOrder: z.enum(['asc', 'desc']).default('desc'),
 });
 
 // Apply feature flag check to all routes in this router
@@ -54,11 +54,22 @@ router.get(
       return res.status(400).json({
         success: false,
         error: 'Invalid query parameters',
-        details: queryResult.error.errors
+        details: queryResult.error.errors,
       });
     }
 
-    const { page, limit, userId, username, action, resource, startDate, endDate, sortBy, sortOrder } = queryResult.data;
+    const {
+      page,
+      limit,
+      userId,
+      username,
+      action,
+      resource,
+      startDate,
+      endDate,
+      sortBy,
+      sortOrder,
+    } = queryResult.data;
 
     // Build filters object
     const filters: any = {};
@@ -85,12 +96,13 @@ router.get(
   requirePermission('activities.read'),
   asyncHandler(async (req, res) => {
     const timeRange = (req.query.timeRange as '24h' | '7d' | '30d') || DEFAULT_TIME_RANGE;
-    const customRange = req.query.startDate && req.query.endDate
-      ? {
-          startDate: req.query.startDate as string,
-          endDate: req.query.endDate as string
-        }
-      : undefined;
+    const customRange =
+      req.query.startDate && req.query.endDate
+        ? {
+            startDate: req.query.startDate as string,
+            endDate: req.query.endDate as string,
+          }
+        : undefined;
 
     const stats = await activityService.getStats(timeRange, customRange);
 
@@ -99,8 +111,8 @@ router.get(
       data: stats,
       meta: {
         calculatedAt: new Date().toISOString(),
-        timeRange
-      }
+        timeRange,
+      },
     });
   })
 );
@@ -120,7 +132,7 @@ router.get(
 
     res.json({
       success: true,
-      ...result
+      ...result,
     });
   })
 );
@@ -141,7 +153,7 @@ router.get(
 
     res.json({
       success: true,
-      ...result
+      ...result,
     });
   })
 );
@@ -163,7 +175,7 @@ router.get(
     if (!['resource', 'user', 'ip'].includes(groupBy)) {
       return res.status(400).json({
         success: false,
-        error: 'Invalid groupBy parameter. Must be one of: resource, user, ip'
+        error: 'Invalid groupBy parameter. Must be one of: resource, user, ip',
       });
     }
 
@@ -171,7 +183,7 @@ router.get(
 
     res.json({
       success: true,
-      ...result
+      ...result,
     });
   })
 );
diff --git a/backend/src/routes/auth-settings.ts b/backend/src/routes/auth-settings.ts
index ea3df04..b769936 100644
--- a/backend/src/routes/auth-settings.ts
+++ b/backend/src/routes/auth-settings.ts
@@ -17,17 +17,20 @@ const updateSettingsSchema = z.object({
   requireEmailVerification: z.boolean().optional(),
   sessionTimeoutMinutes: z.number().int().positive().optional(),
   maxLoginAttempts: z.number().int().positive().optional(),
-  lockoutDurationMinutes: z.number().int().positive().optional()
+  lockoutDurationMinutes: z.number().int().positive().optional(),
 });
 
 /**
  * GET /api/settings/auth
  * Get current auth settings (public endpoint)
  */
-router.get('/', asyncHandler(async (req, res) => {
-  const settings = authSettingsService.getSettings();
-  res.json(settings);
-}));
+router.get(
+  '/',
+  asyncHandler(async (req, res) => {
+    const settings = authSettingsService.getSettings();
+    res.json(settings);
+  })
+);
 
 /**
  * PATCH /api/settings/auth
diff --git a/backend/src/routes/auth.ts b/backend/src/routes/auth.ts
index e2b4f3e..2a86eeb 100644
--- a/backend/src/routes/auth.ts
+++ b/backend/src/routes/auth.ts
@@ -21,8 +21,8 @@ const loginLimiter = rateLimit({
   message: {
     error: {
       message: 'Too many login attempts from this IP, please try again after 15 minutes',
-      statusCode: 429
-    }
+      statusCode: 429,
+    },
   },
   standardHeaders: true,
   legacyHeaders: false,
@@ -32,10 +32,10 @@ const loginLimiter = rateLimit({
     res.status(429).json({
       error: {
         message: 'Too many login attempts from this IP, please try again after 15 minutes',
-        statusCode: 429
-      }
+        statusCode: 429,
+      },
     });
-  }
+  },
 });
 
 // Moderate limits on registration
@@ -45,8 +45,8 @@ const registerLimiter = rateLimit({
   message: {
     error: {
       message: 'Too many registration attempts from this IP, please try again after an hour',
-      statusCode: 429
-    }
+      statusCode: 429,
+    },
   },
   standardHeaders: true,
   legacyHeaders: false,
@@ -55,26 +55,26 @@ const registerLimiter = rateLimit({
     res.status(429).json({
       error: {
         message: 'Too many registration attempts from this IP, please try again after an hour',
-        statusCode: 429
-      }
+        statusCode: 429,
+      },
     });
-  }
+  },
 });
 
 // Validation schemas
 const loginSchema = z.object({
   username: z.string().min(3).max(50),
-  password: z.string().min(6)
+  password: z.string().min(6),
 });
 
 const registerSchema = z.object({
   username: z.string().min(3).max(50),
   email: z.string().email(),
-  password: z.string().min(6)
+  password: z.string().min(6),
 });
 
 const refreshTokenSchema = z.object({
-  refreshToken: z.string()
+  refreshToken: z.string(),
 });
 
 /**
@@ -88,7 +88,7 @@ router.get('/setup-status', (req, res) => {
     needsSetup,
     message: needsSetup
       ? 'No users found. Please create an administrator account.'
-      : 'System is configured'
+      : 'System is configured',
   });
 });
 
@@ -96,66 +96,71 @@ router.get('/setup-status', (req, res) => {
  * POST /api/auth/login
  * Login with username and password
  */
-router.post('/login', loginLimiter, asyncHandler(async (req, res) => {
-  try {
-    const credentials = loginSchema.parse(req.body);
-    const ipAddress = req.ip || '';
-
-    logger.info(`[Auth] Login attempt for user: ${credentials.username} from ${ipAddress}`);
-
-    const result = await authService.login(credentials, ipAddress);
-
-    // Log activity
-    await activityService.log({
-      userId: result.user.id,
-      username: result.user.username,
-      action: 'login',
-      resource: 'auth',
-      ipAddress,
-      userAgent: req.headers['user-agent']
-    });
-
-    logger.info(`[Auth] Login successful for user: ${credentials.username}`);
-    res.json(result);
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      logger.warn(`[Auth] Validation error during login: ${error.errors[0].message}`);
-      throw new AppError(400, `Validation error: ${error.errors[0].message}`);
-    }
-
-    // Log failed login attempt
-    const ipAddress = req.ip || '';
-    const username = req.body.username || 'unknown';
-
+router.post(
+  '/login',
+  loginLimiter,
+  asyncHandler(async (req, res) => {
     try {
+      const credentials = loginSchema.parse(req.body);
+      const ipAddress = req.ip || '';
+
+      logger.info(`[Auth] Login attempt for user: ${credentials.username} from ${ipAddress}`);
+
+      const result = await authService.login(credentials, ipAddress);
+
+      // Log activity
       await activityService.log({
-        userId: undefined,
-        username,
-        action: 'auth.login.failed',
+        userId: result.user.id,
+        username: result.user.username,
+        action: 'login',
         resource: 'auth',
-        details: {
-          reason: error instanceof Error && error.message.includes('Invalid')
-            ? 'invalid_credentials'
-            : 'other',
-          errorMessage: error instanceof Error ? error.message : 'Unknown error'
-        },
         ipAddress,
-        userAgent: req.headers['user-agent']
+        userAgent: req.headers['user-agent'],
       });
-    } catch (logError) {
-      // Don't fail request if logging fails
-      logger.error('[Auth] Failed to log failed login attempt:', logError);
+
+      logger.info(`[Auth] Login successful for user: ${credentials.username}`);
+      res.json(result);
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        logger.warn(`[Auth] Validation error during login: ${error.errors[0].message}`);
+        throw new AppError(400, `Validation error: ${error.errors[0].message}`);
+      }
+
+      // Log failed login attempt
+      const ipAddress = req.ip || '';
+      const username = req.body.username || 'unknown';
+
+      try {
+        await activityService.log({
+          userId: undefined,
+          username,
+          action: 'auth.login.failed',
+          resource: 'auth',
+          details: {
+            reason:
+              error instanceof Error && error.message.includes('Invalid')
+                ? 'invalid_credentials'
+                : 'other',
+            errorMessage: error instanceof Error ? error.message : 'Unknown error',
+          },
+          ipAddress,
+          userAgent: req.headers['user-agent'],
+        });
+      } catch (logError) {
+        // Don't fail request if logging fails
+        logger.error('[Auth] Failed to log failed login attempt:', logError);
+      }
+
+      // Log the error with full details before passing to error handler
+      logger.error(`[Auth] Login failed for user: ${username}`, {
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+
+      throw error;
     }
-
-    // Log the error with full details before passing to error handler
-    logger.error(`[Auth] Login failed for user: ${username}`, {
-      error: error instanceof Error ? error.message : String(error),
-      stack: error instanceof Error ? error.stack : undefined
-    });
-
-    throw error;
-  }
-}));
+  })
+);
 
 /**
  * POST /api/auth/register
@@ -167,40 +172,44 @@ router.post('/login', loginLimiter, asyncHandler(async (req, res) => {
  *
  * The AuthService.register() method automatically detects which scenario applies
  */
-router.post('/register', registerLimiter, asyncHandler(async (req, res) => {
-  try {
-    const data = registerSchema.parse(req.body);
+router.post(
+  '/register',
+  registerLimiter,
+  asyncHandler(async (req, res) => {
+    try {
+      const data = registerSchema.parse(req.body);
 
-    logger.info(`[Auth] Registration attempt for user: ${data.username}`);
+      logger.info(`[Auth] Registration attempt for user: ${data.username}`);
 
-    const result = await authService.register(data);
+      const result = await authService.register(data);
 
-    // Log activity
-    await activityService.log({
-      userId: result.user.id,
-      username: result.user.username,
-      action: 'register',
-      resource: 'auth',
-      ipAddress: req.ip,
-      userAgent: req.headers['user-agent']
-    });
+      // Log activity
+      await activityService.log({
+        userId: result.user.id,
+        username: result.user.username,
+        action: 'register',
+        resource: 'auth',
+        ipAddress: req.ip,
+        userAgent: req.headers['user-agent'],
+      });
 
-    logger.info(`[Auth] Registration successful for user: ${data.username}`);
-    res.status(201).json(result);
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      logger.warn(`[Auth] Validation error during registration: ${error.errors[0].message}`);
-      throw new AppError(400, `Validation error: ${error.errors[0].message}`);
+      logger.info(`[Auth] Registration successful for user: ${data.username}`);
+      res.status(201).json(result);
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        logger.warn(`[Auth] Validation error during registration: ${error.errors[0].message}`);
+        throw new AppError(400, `Validation error: ${error.errors[0].message}`);
+      }
+
+      logger.error(`[Auth] Registration failed for user: ${req.body.username}`, {
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+
+      throw error;
     }
-
-    logger.error(`[Auth] Registration failed for user: ${req.body.username}`, {
-      error: error instanceof Error ? error.message : String(error),
-      stack: error instanceof Error ? error.stack : undefined
-    });
-
-    throw error;
-  }
-}));
+  })
+);
 
 /**
  * POST /api/auth/logout
@@ -222,28 +231,34 @@ router.post(
  * POST /api/auth/refresh
  * Refresh access token using refresh token
  */
-router.post('/refresh', asyncHandler(async (req, res) => {
-  const { refreshToken } = refreshTokenSchema.parse(req.body);
+router.post(
+  '/refresh',
+  asyncHandler(async (req, res) => {
+    const { refreshToken } = refreshTokenSchema.parse(req.body);
 
-  const tokens = await authService.refreshToken(refreshToken);
+    const tokens = await authService.refreshToken(refreshToken);
 
-  res.json(tokens);
-}));
+    res.json(tokens);
+  })
+);
 
 /**
  * GET /api/auth/me
  * Get current authenticated user
  */
-router.get('/me', asyncHandler(async (req, res) => {
-  const authHeader = req.headers.authorization;
-  if (!authHeader || !authHeader.startsWith('Bearer ')) {
-    throw new AppError(401, 'No token provided');
-  }
+router.get(
+  '/me',
+  asyncHandler(async (req, res) => {
+    const authHeader = req.headers.authorization;
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      throw new AppError(401, 'No token provided');
+    }
 
-  const token = authHeader.substring(7);
-  const user = await authService.verifyAccessToken(token);
+    const token = authHeader.substring(7);
+    const user = await authService.verifyAccessToken(token);
 
-  res.json(user);
-}));
+    res.json(user);
+  })
+);
 
 export default router;
diff --git a/backend/src/routes/cache.ts b/backend/src/routes/cache.ts
index bcaa16c..2cf8910 100644
--- a/backend/src/routes/cache.ts
+++ b/backend/src/routes/cache.ts
@@ -24,13 +24,13 @@ router.get(
         size: gameSearchStats.primary.size,
         max: gameSearchStats.primary.max,
         ttl: gameSearchStats.primary.ttl,
-        hitRate: gameSearchStats.primary.size > 0 ? 'active' : 'idle'
+        hitRate: gameSearchStats.primary.size > 0 ? 'active' : 'idle',
       },
       permissions: {
         enabled: true,
         ttl: '5 minutes',
-        note: 'Permission cache size not exposed'
-      }
+        note: 'Permission cache size not exposed',
+      },
     });
   })
 );
@@ -68,7 +68,7 @@ router.post(
 
     res.json({
       message: 'Cache cleared successfully',
-      cleared: results
+      cleared: results,
     });
   })
 );
diff --git a/backend/src/routes/community-playlists.ts b/backend/src/routes/community-playlists.ts
index 751d4d6..991f897 100644
--- a/backend/src/routes/community-playlists.ts
+++ b/backend/src/routes/community-playlists.ts
@@ -13,7 +13,7 @@ router.get(
   '/',
   optionalAuth,
   logActivity('playlists.community.browse', 'community_playlists', (req, res) => ({
-    playlistCount: res.locals.playlistCount || 0
+    playlistCount: res.locals.playlistCount || 0,
   })),
   asyncHandler(async (req, res) => {
     const playlists = await communityPlaylistService.fetchCommunityPlaylists();
@@ -36,7 +36,7 @@ router.post(
     downloadUrl: req.body.downloadUrl,
     playlistTitle: res.locals.playlistTitle || null,
     playlistId: res.locals.playlistId || null,
-    gameCount: res.locals.gameCount || 0
+    gameCount: res.locals.gameCount || 0,
   })),
   asyncHandler(async (req, res) => {
     const { downloadUrl } = req.body;
diff --git a/backend/src/routes/database.ts b/backend/src/routes/database.ts
index 7872c3e..53db96c 100644
--- a/backend/src/routes/database.ts
+++ b/backend/src/routes/database.ts
@@ -29,22 +29,22 @@ router.post(
   requirePermission('settings.update'),
   logActivity('database.reload', 'database'),
   async (req: Request, res: Response) => {
-  try {
-    logger.info('Manual database reload requested');
+    try {
+      logger.info('Manual database reload requested');
 
-    await DatabaseService.reload();
+      await DatabaseService.reload();
 
-    res.json({
-      success: true,
-      message: 'Database reloaded successfully from disk'
-    });
-  } catch (error) {
-    logger.error('Manual database reload failed:', error);
-    res.status(500).json({
-      success: false,
-      error: error instanceof Error ? error.message : 'Unknown error'
-    });
-  }
+      res.json({
+        success: true,
+        message: 'Database reloaded successfully from disk',
+      });
+    } catch (error) {
+      logger.error('Manual database reload failed:', error);
+      res.status(500).json({
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
   }
 );
 
@@ -69,28 +69,28 @@ router.get(
   requirePermission('settings.update'),
   logActivity('database.status', 'database'),
   async (req: Request, res: Response) => {
-  try {
-    const fs = require('fs');
-    const { config } = require('../config');
+    try {
+      const fs = require('fs');
+      const { config } = require('../config');
 
-    const isConnected = DatabaseService.isConnected();
-    const stats = fs.statSync(config.flashpointDbPath);
+      const isConnected = DatabaseService.isConnected();
+      const stats = fs.statSync(config.flashpointDbPath);
 
-    res.json({
-      success: true,
-      connected: isConnected,
-      dbPath: config.flashpointDbPath,
-      fileSizeBytes: stats.size,
-      fileSizeMB: (stats.size / (1024 * 1024)).toFixed(2),
-      lastModified: stats.mtime.toISOString()
-    });
-  } catch (error) {
-    logger.error('Error getting database status:', error);
-    res.status(500).json({
-      success: false,
-      error: error instanceof Error ? error.message : 'Unknown error'
-    });
-  }
+      res.json({
+        success: true,
+        connected: isConnected,
+        dbPath: config.flashpointDbPath,
+        fileSizeBytes: stats.size,
+        fileSizeMB: (stats.size / (1024 * 1024)).toFixed(2),
+        lastModified: stats.mtime.toISOString(),
+      });
+    } catch (error) {
+      logger.error('Error getting database status:', error);
+      res.status(500).json({
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
   }
 );
 
diff --git a/backend/src/routes/domains.ts b/backend/src/routes/domains.ts
index d758a7e..3af6a05 100644
--- a/backend/src/routes/domains.ts
+++ b/backend/src/routes/domains.ts
@@ -57,7 +57,13 @@ router.post(
       const domain = domainService.addDomain(validation.data.hostname, req.user!.id);
       res.status(201).json(domain);
     } catch (error) {
-      if (error instanceof Error && (error.message.includes('already exists') || error.message.includes('must not') || error.message.includes('Invalid') || error.message.includes('cannot be empty'))) {
+      if (
+        error instanceof Error &&
+        (error.message.includes('already exists') ||
+          error.message.includes('must not') ||
+          error.message.includes('Invalid') ||
+          error.message.includes('cannot be empty'))
+      ) {
         return res.status(400).json({
           error: { message: error.message },
         });
diff --git a/backend/src/routes/downloads.ts b/backend/src/routes/downloads.ts
index 9bb477f..fb42f32 100644
--- a/backend/src/routes/downloads.ts
+++ b/backend/src/routes/downloads.ts
@@ -38,131 +38,132 @@ router.post(
     gameId: req.params.id,
     gameDataId: req.body.gameDataId || res.locals.gameDataId,
     gameTitle: res.locals.gameTitle,
-    sources: res.locals.sources
+    sources: res.locals.sources,
   })),
   async (req: Request, res: Response) => {
-  try {
-    const gameId = req.params.id;
-    const { gameDataId: requestedGameDataId } = req.body;
+    try {
+      const gameId = req.params.id;
+      const { gameDataId: requestedGameDataId } = req.body;
 
-    logger.info('Download request received', { gameId, requestedGameDataId });
+      logger.info('Download request received', { gameId, requestedGameDataId });
 
-    // Get game from database
-    const game = await gameService.getGameById(gameId);
-    if (!game) {
-      return res.status(404).json({
-        success: false,
-        error: 'Game not found'
-      });
-    }
-
-    // Determine which game data to download
-    let gameDataId = requestedGameDataId;
-    if (!gameDataId) {
-      // Query game_data table to find the game data entry for this game
-      const foundGameDataId = await gameService.getGameDataId(gameId);
-      if (!foundGameDataId) {
+      // Get game from database
+      const game = await gameService.getGameById(gameId);
+      if (!game) {
         return res.status(404).json({
           success: false,
-          error: 'Game has no game data to download'
+          error: 'Game not found',
         });
       }
-      gameDataId = foundGameDataId;
-    }
 
-    // Check if already downloaded
-    const isDownloaded = await GameDatabaseUpdater.isDownloaded(gameDataId);
-    if (isDownloaded) {
-      return res.status(409).json({
-        success: false,
-        error: 'Game data already downloaded'
-      });
-    }
+      // Determine which game data to download
+      let gameDataId = requestedGameDataId;
+      if (!gameDataId) {
+        // Query game_data table to find the game data entry for this game
+        const foundGameDataId = await gameService.getGameDataId(gameId);
+        if (!foundGameDataId) {
+          return res.status(404).json({
+            success: false,
+            error: 'Game has no game data to download',
+          });
+        }
+        gameDataId = foundGameDataId;
+      }
 
-    // Get game data info
-    const gameData = await GameDatabaseUpdater.getGameData(gameDataId);
-    if (!gameData) {
-      return res.status(404).json({
-        success: false,
-        error: 'Game data not found'
-      });
-    }
+      // Check if already downloaded
+      const isDownloaded = await GameDatabaseUpdater.isDownloaded(gameDataId);
+      if (isDownloaded) {
+        return res.status(409).json({
+          success: false,
+          error: 'Game data already downloaded',
+        });
+      }
 
-    // Get data sources from preferences
-    const sources = await PreferencesService.getGameDataSources();
-    if (sources.length === 0) {
-      return res.status(500).json({
-        success: false,
-        error: 'No game data sources configured. Please configure gameDataSources in preferences.json'
-      });
-    }
+      // Get game data info
+      const gameData = await GameDatabaseUpdater.getGameData(gameDataId);
+      if (!gameData) {
+        return res.status(404).json({
+          success: false,
+          error: 'Game data not found',
+        });
+      }
 
-    // Store metadata for activity logging
-    res.locals.gameDataId = gameDataId;
-    res.locals.gameTitle = game.title;
-    res.locals.sources = sources.map(s => s.name);
+      // Get data sources from preferences
+      const sources = await PreferencesService.getGameDataSources();
+      if (sources.length === 0) {
+        return res.status(500).json({
+          success: false,
+          error:
+            'No game data sources configured. Please configure gameDataSources in preferences.json',
+        });
+      }
 
-    // Capture metadata for background error logging
-    const downloadMetadata = {
-      gameId,
-      gameDataId,
-      gameTitle: game.title,
-      sha256: gameData.sha256,
-      sources: sources.map(s => s.name),
-      userId: req.user?.id,
-      username: req.user?.username,
-      ipAddress: req.ip
-    };
+      // Store metadata for activity logging
+      res.locals.gameDataId = gameDataId;
+      res.locals.gameTitle = game.title;
+      res.locals.sources = sources.map((s) => s.name);
 
-    // Start download (non-blocking)
-    // We don't wait for it to complete - client uses SSE endpoint for progress
-    DownloadManager.downloadGameData(
-      gameDataId,
-      sources,
-      undefined, // Progress callback handled by SSE endpoint
-      undefined, // Details callback handled by SSE endpoint
-      undefined  // No abort signal for now
-    ).catch(async error => {
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-      logger.error('Background download failed', {
+      // Capture metadata for background error logging
+      const downloadMetadata = {
         gameId,
         gameDataId,
-        error: errorMessage
+        gameTitle: game.title,
+        sha256: gameData.sha256,
+        sources: sources.map((s) => s.name),
+        userId: req.user?.id,
+        username: req.user?.username,
+        ipAddress: req.ip,
+      };
+
+      // Start download (non-blocking)
+      // We don't wait for it to complete - client uses SSE endpoint for progress
+      DownloadManager.downloadGameData(
+        gameDataId,
+        sources,
+        undefined, // Progress callback handled by SSE endpoint
+        undefined, // Details callback handled by SSE endpoint
+        undefined // No abort signal for now
+      ).catch(async (error) => {
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        logger.error('Background download failed', {
+          gameId,
+          gameDataId,
+          error: errorMessage,
+        });
+
+        // Log download failure activity
+        await activityService.log({
+          userId: downloadMetadata.userId,
+          username: downloadMetadata.username,
+          action: 'games.download.failed',
+          resource: 'games',
+          resourceId: downloadMetadata.gameId,
+          details: {
+            gameDataId: downloadMetadata.gameDataId,
+            gameTitle: downloadMetadata.gameTitle,
+            sha256: downloadMetadata.sha256,
+            sources: downloadMetadata.sources,
+            error: errorMessage,
+          },
+          ipAddress: downloadMetadata.ipAddress,
+          userAgent: req.get('user-agent'),
+        });
       });
 
-      // Log download failure activity
-      await activityService.log({
-        userId: downloadMetadata.userId,
-        username: downloadMetadata.username,
-        action: 'games.download.failed',
-        resource: 'games',
-        resourceId: downloadMetadata.gameId,
-        details: {
-          gameDataId: downloadMetadata.gameDataId,
-          gameTitle: downloadMetadata.gameTitle,
-          sha256: downloadMetadata.sha256,
-          sources: downloadMetadata.sources,
-          error: errorMessage
-        },
-        ipAddress: downloadMetadata.ipAddress,
-        userAgent: req.get('user-agent')
+      // Return success immediately
+      res.json({
+        success: true,
+        message: 'Download started',
+        gameDataId,
+        sha256: gameData.sha256,
       });
-    });
-
-    // Return success immediately
-    res.json({
-      success: true,
-      message: 'Download started',
-      gameDataId,
-      sha256: gameData.sha256
-    });
-  } catch (error) {
-    logger.error('Download endpoint error:', error);
-    res.status(500).json({
-      success: false,
-      error: error instanceof Error ? error.message : 'Unknown error'
-    });
-  }
+    } catch (error) {
+      logger.error('Download endpoint error:', error);
+      res.status(500).json({
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
   }
 );
 
@@ -188,118 +189,130 @@ router.get(
   authenticate,
   requirePermission('games.download'),
   async (req: Request, res: Response) => {
-  try {
-    const gameId = req.params.id;
+    try {
+      const gameId = req.params.id;
 
-    // Set SSE headers
-    res.setHeader('Content-Type', 'text/event-stream');
-    res.setHeader('Cache-Control', 'no-cache');
-    res.setHeader('Connection', 'keep-alive');
-    res.setHeader('X-Accel-Buffering', 'no'); // Disable nginx buffering
+      // Set SSE headers
+      res.setHeader('Content-Type', 'text/event-stream');
+      res.setHeader('Cache-Control', 'no-cache');
+      res.setHeader('Connection', 'keep-alive');
+      res.setHeader('X-Accel-Buffering', 'no'); // Disable nginx buffering
 
-    logger.info('SSE connection established', { gameId });
+      logger.info('SSE connection established', { gameId });
 
-    // Get game to find gameDataId
-    const game = await gameService.getGameById(gameId);
-    if (!game) {
-      res.write(`data: ${JSON.stringify({
-        status: 'error',
-        error: 'Game not found'
-      })}\n\n`);
-      res.end();
-      return;
-    }
+      // Get game to find gameDataId
+      const game = await gameService.getGameById(gameId);
+      if (!game) {
+        res.write(
+          `data: ${JSON.stringify({
+            status: 'error',
+            error: 'Game not found',
+          })}\n\n`
+        );
+        res.end();
+        return;
+      }
 
-    const gameDataId = await gameService.getGameDataId(gameId);
-    if (!gameDataId) {
-      res.write(`data: ${JSON.stringify({
-        status: 'error',
-        error: 'Game has no game data'
-      })}\n\n`);
-      res.end();
-      return;
-    }
+      const gameDataId = await gameService.getGameDataId(gameId);
+      if (!gameDataId) {
+        res.write(
+          `data: ${JSON.stringify({
+            status: 'error',
+            error: 'Game has no game data',
+          })}\n\n`
+        );
+        res.end();
+        return;
+      }
 
-    // Send initial status
-    res.write(`data: ${JSON.stringify({
-      percent: 0,
-      status: 'waiting',
-      details: 'Preparing download...'
-    })}\n\n`);
+      // Send initial status
+      res.write(
+        `data: ${JSON.stringify({
+          percent: 0,
+          status: 'waiting',
+          details: 'Preparing download...',
+        })}\n\n`
+      );
 
-    // Poll for download progress
-    // Note: This is a simplified implementation. In production, you'd want
-    // a proper event emitter system to push updates rather than polling.
-    const pollInterval = setInterval(async () => {
-      try {
-        // Check if download is still active
-        const isActive = DownloadManager.isDownloadActive(gameDataId);
+      // Poll for download progress
+      // Note: This is a simplified implementation. In production, you'd want
+      // a proper event emitter system to push updates rather than polling.
+      const pollInterval = setInterval(async () => {
+        try {
+          // Check if download is still active
+          const isActive = DownloadManager.isDownloadActive(gameDataId);
 
-        if (!isActive) {
-          // Check if download completed successfully
-          const isDownloaded = await GameDatabaseUpdater.isDownloaded(gameDataId);
+          if (!isActive) {
+            // Check if download completed successfully
+            const isDownloaded = await GameDatabaseUpdater.isDownloaded(gameDataId);
 
-          if (isDownloaded) {
-            res.write(`data: ${JSON.stringify({
-              percent: 100,
-              status: 'complete',
-              details: 'Download completed successfully'
-            })}\n\n`);
+            if (isDownloaded) {
+              res.write(
+                `data: ${JSON.stringify({
+                  percent: 100,
+                  status: 'complete',
+                  details: 'Download completed successfully',
+                })}\n\n`
+              );
 
-            // Log download completion activity
-            const gameData = await GameDatabaseUpdater.getGameData(gameDataId);
-            await activityService.log({
-              userId: req.user?.id,
-              username: req.user?.username,
-              action: 'games.download.complete',
-              resource: 'games',
-              resourceId: gameId,
-              details: {
-                gameDataId,
-                gameTitle: game.title,
-                sha256: gameData?.sha256
-              },
-              ipAddress: req.ip,
-              userAgent: req.get('user-agent')
-            });
+              // Log download completion activity
+              const gameData = await GameDatabaseUpdater.getGameData(gameDataId);
+              await activityService.log({
+                userId: req.user?.id,
+                username: req.user?.username,
+                action: 'games.download.complete',
+                resource: 'games',
+                resourceId: gameId,
+                details: {
+                  gameDataId,
+                  gameTitle: game.title,
+                  sha256: gameData?.sha256,
+                },
+                ipAddress: req.ip,
+                userAgent: req.get('user-agent'),
+              });
+            } else {
+              res.write(
+                `data: ${JSON.stringify({
+                  percent: 0,
+                  status: 'error',
+                  details: 'Download not active',
+                })}\n\n`
+              );
+            }
+
+            clearInterval(pollInterval);
+            res.end();
           } else {
-            res.write(`data: ${JSON.stringify({
-              percent: 0,
-              status: 'error',
-              details: 'Download not active'
-            })}\n\n`);
+            // Send heartbeat
+            res.write(
+              `data: ${JSON.stringify({
+                percent: 0,
+                status: 'downloading',
+                details: 'Download in progress...',
+              })}\n\n`
+            );
           }
-
+        } catch (error) {
+          logger.error('Error in SSE poll', { error });
           clearInterval(pollInterval);
           res.end();
-        } else {
-          // Send heartbeat
-          res.write(`data: ${JSON.stringify({
-            percent: 0,
-            status: 'downloading',
-            details: 'Download in progress...'
-          })}\n\n`);
         }
-      } catch (error) {
-        logger.error('Error in SSE poll', { error });
+      }, 1000); // Poll every second
+
+      // Clean up on client disconnect
+      req.on('close', () => {
+        logger.info('SSE connection closed', { gameId });
         clearInterval(pollInterval);
         res.end();
-      }
-    }, 1000); // Poll every second
-
-    // Clean up on client disconnect
-    req.on('close', () => {
-      logger.info('SSE connection closed', { gameId });
-      clearInterval(pollInterval);
-      res.end();
-    });
-  } catch (error) {
-    logger.error('SSE endpoint error:', error);
-    res.status(500).json({
-      success: false,
-      error: error instanceof Error ? error.message : 'Unknown error'
-    });
-  }
+      });
+    } catch (error) {
+      logger.error('SSE endpoint error:', error);
+      res.status(500).json({
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
   }
 );
 
@@ -322,50 +335,50 @@ router.delete(
   requirePermission('games.download'),
   logActivity('games.download_cancel', 'games'),
   async (req: Request, res: Response) => {
-  try {
-    const gameId = req.params.id;
+    try {
+      const gameId = req.params.id;
 
-    logger.info('Download cancel request', { gameId });
+      logger.info('Download cancel request', { gameId });
 
-    // Get game to find gameDataId
-    const game = await gameService.getGameById(gameId);
-    if (!game) {
-      return res.status(404).json({
+      // Get game to find gameDataId
+      const game = await gameService.getGameById(gameId);
+      if (!game) {
+        return res.status(404).json({
+          success: false,
+          error: 'Game not found',
+        });
+      }
+
+      const gameDataId = await gameService.getGameDataId(gameId);
+      if (!gameDataId) {
+        return res.status(404).json({
+          success: false,
+          error: 'Game has no game data',
+        });
+      }
+
+      // Attempt to cancel download
+      const cancelled = DownloadManager.cancelDownload(gameDataId);
+
+      if (!cancelled) {
+        return res.status(404).json({
+          success: false,
+          error: 'No active download found for this game',
+        });
+      }
+
+      res.json({
+        success: true,
+        cancelled: true,
+        message: 'Download cancelled successfully',
+      });
+    } catch (error) {
+      logger.error('Cancel download error:', error);
+      res.status(500).json({
         success: false,
-        error: 'Game not found'
+        error: error instanceof Error ? error.message : 'Unknown error',
       });
     }
-
-    const gameDataId = await gameService.getGameDataId(gameId);
-    if (!gameDataId) {
-      return res.status(404).json({
-        success: false,
-        error: 'Game has no game data'
-      });
-    }
-
-    // Attempt to cancel download
-    const cancelled = DownloadManager.cancelDownload(gameDataId);
-
-    if (!cancelled) {
-      return res.status(404).json({
-        success: false,
-        error: 'No active download found for this game'
-      });
-    }
-
-    res.json({
-      success: true,
-      cancelled: true,
-      message: 'Download cancelled successfully'
-    });
-  } catch (error) {
-    logger.error('Cancel download error:', error);
-    res.status(500).json({
-      success: false,
-      error: error instanceof Error ? error.message : 'Unknown error'
-    });
-  }
   }
 );
 
diff --git a/backend/src/routes/errors.ts b/backend/src/routes/errors.ts
index db7cad6..bd7d5b6 100644
--- a/backend/src/routes/errors.ts
+++ b/backend/src/routes/errors.ts
@@ -24,10 +24,10 @@ if (!fsSync.existsSync(LOG_DIR)) {
  */
 function getSeverityNumber(type: string): number {
   const severityMap: Record<string, number> = {
-    client_error: 17,   // ERROR
-    api_error: 17,      // ERROR
-    network_error: 13,  // WARN (may be transient)
-    route_error: 13,    // WARN
+    client_error: 17, // ERROR
+    api_error: 17, // ERROR
+    network_error: 13, // WARN (may be transient)
+    route_error: 13, // WARN
   };
   return severityMap[type] || 17;
 }
@@ -55,9 +55,9 @@ const clientErrorLogger = winston.createLogger({
       filename: ERROR_LOG_FILE,
       maxsize: 10485760, // 10MB
       maxFiles: 5,
-      tailable: true
-    })
-  ]
+      tailable: true,
+    }),
+  ],
 });
 
 logger.info(`[ClientErrors] Log file: ${ERROR_LOG_FILE}`);
@@ -98,7 +98,7 @@ async function logError(report: ErrorReport): Promise<void> {
       userAgent: report.userAgent,
       userId: report.userId,
       stack: report.stack,
-      context: report.context
+      context: report.context,
     });
   } catch (error) {
     logger.error('Failed to log client error:', error);
@@ -132,7 +132,7 @@ async function getRecentErrors(limit: number = 100): Promise<ErrorReport[]> {
               timestamp: logEntry.clientTimestamp || logEntry.timestamp,
               userAgent: logEntry.userAgent,
               userId: logEntry.userId,
-              context: logEntry.context
+              context: logEntry.context,
             });
           } catch (parseError) {
             logger.warn('Failed to parse error log line:', parseError);
@@ -143,7 +143,12 @@ async function getRecentErrors(limit: number = 100): Promise<ErrorReport[]> {
       return errors;
     } catch (readError) {
       // File doesn't exist yet - handle ENOENT error
-      if (readError && typeof readError === 'object' && 'code' in readError && readError.code === 'ENOENT') {
+      if (
+        readError &&
+        typeof readError === 'object' &&
+        'code' in readError &&
+        readError.code === 'ENOENT'
+      ) {
         return [];
       }
       throw readError;
@@ -169,8 +174,8 @@ router.post('/report', async (req: Request, res: Response) => {
         success: false,
         error: {
           code: 'VALIDATION_ERROR',
-          message: 'Missing required fields: type, message, url'
-        }
+          message: 'Missing required fields: type, message, url',
+        },
       });
     }
 
@@ -202,8 +207,8 @@ router.post('/report', async (req: Request, res: Response) => {
       success: false,
       error: {
         code: 'INTERNAL_ERROR',
-        message: 'Failed to log error report'
-      }
+        message: 'Failed to log error report',
+      },
     });
   }
 });
@@ -227,8 +232,8 @@ router.get(
         data: {
           errors,
           count: errors.length,
-          limit
-        }
+          limit,
+        },
       });
     } catch (error) {
       logger.error('Error in /errors/recent:', error);
@@ -236,8 +241,8 @@ router.get(
         success: false,
         error: {
           code: 'INTERNAL_ERROR',
-          message: 'Failed to retrieve error reports'
-        }
+          message: 'Failed to retrieve error reports',
+        },
       });
     }
   }
@@ -263,11 +268,11 @@ router.get(
 
       const stats = {
         total: errors.length,
-        last24h: errors.filter(e => new Date(e.timestamp) >= last24h).length,
-        last7d: errors.filter(e => new Date(e.timestamp) >= last7d).length,
+        last24h: errors.filter((e) => new Date(e.timestamp) >= last24h).length,
+        last7d: errors.filter((e) => new Date(e.timestamp) >= last7d).length,
         byType: {} as Record<string, number>,
         topUrls: {} as Record<string, number>,
-        topMessages: {} as Record<string, number>
+        topMessages: {} as Record<string, number>,
       };
 
       // Group by type
@@ -293,7 +298,7 @@ router.get(
 
       res.json({
         success: true,
-        data: stats
+        data: stats,
       });
     } catch (error) {
       logger.error('Error in /errors/stats:', error);
@@ -301,8 +306,8 @@ router.get(
         success: false,
         error: {
           code: 'INTERNAL_ERROR',
-          message: 'Failed to retrieve error statistics'
-        }
+          message: 'Failed to retrieve error statistics',
+        },
       });
     }
   }
diff --git a/backend/src/routes/favorites.ts b/backend/src/routes/favorites.ts
index 2b5fdbf..f59baa1 100644
--- a/backend/src/routes/favorites.ts
+++ b/backend/src/routes/favorites.ts
@@ -20,15 +20,15 @@ router.use(requireFeature('enableFavorites'));
 
 // Validation schemas
 const toggleFavoriteSchema = z.object({
-  gameId: z.string()
+  gameId: z.string(),
 });
 
 const batchAddSchema = z.object({
-  gameIds: z.array(z.string()).min(1)
+  gameIds: z.array(z.string()).min(1),
 });
 
 const batchRemoveSchema = z.object({
-  gameIds: z.array(z.string()).min(1)
+  gameIds: z.array(z.string()).min(1),
 });
 
 /**
@@ -88,7 +88,13 @@ router.get(
     const sortBy = (req.query.sortBy as 'title' | 'dateAdded') || 'dateAdded';
     const sortOrder = (req.query.sortOrder as 'asc' | 'desc') || 'desc';
 
-    const games = await favoritesService.getUserFavoriteGames(req.user.id, limit, offset, sortBy, sortOrder);
+    const games = await favoritesService.getUserFavoriteGames(
+      req.user.id,
+      limit,
+      offset,
+      sortBy,
+      sortOrder
+    );
     res.json(games);
   })
 );
diff --git a/backend/src/routes/game-files.ts b/backend/src/routes/game-files.ts
index 8c4e8d5..0a9eea9 100644
--- a/backend/src/routes/game-files.ts
+++ b/backend/src/routes/game-files.ts
@@ -14,39 +14,42 @@ const gameFileService = new GameFileService();
  * - /game-files/www.example.com/path/file.swf
  * - /game-files/cdn.games.com/assets/game.swf
  */
-router.get('/*', asyncHandler(async (req: Request, res: Response) => {
-  try {
-    // Extract path after /game-files/
-    const urlPath = req.path.substring(1); // Remove leading slash
+router.get(
+  '/*',
+  asyncHandler(async (req: Request, res: Response) => {
+    try {
+      // Extract path after /game-files/
+      const urlPath = req.path.substring(1); // Remove leading slash
 
-    if (!urlPath) {
-      throw new AppError(400, 'File path is required');
+      if (!urlPath) {
+        throw new AppError(400, 'File path is required');
+      }
+
+      logger.info(`[GameFilesRoute] Request: ${urlPath}`);
+
+      // Get the file (tries Game Server first, then external sources)
+      const result = await gameFileService.getGameFile(urlPath);
+
+      logger.info(`[GameFilesRoute] Serving from ${result.source}: ${result.data.length} bytes`);
+
+      // Set headers
+      res.setHeader('Content-Type', result.contentType);
+      res.setHeader('Content-Length', result.data.length);
+      res.setHeader('Cache-Control', 'public, max-age=86400'); // Cache for 24 hours
+      res.setHeader('Access-Control-Allow-Origin', '*');
+      res.setHeader('X-Source', result.source); // Debug header
+
+      // Send file
+      res.send(result.data);
+    } catch (error) {
+      if (error instanceof Error && error.message.includes('not found')) {
+        throw new AppError(404, 'Game file not found in any source');
+      } else {
+        logger.error('[GameFilesRoute] Error:', error);
+        throw error;
+      }
     }
-
-    logger.info(`[GameFilesRoute] Request: ${urlPath}`);
-
-    // Get the file (tries Game Server first, then external sources)
-    const result = await gameFileService.getGameFile(urlPath);
-
-    logger.info(`[GameFilesRoute] Serving from ${result.source}: ${result.data.length} bytes`);
-
-    // Set headers
-    res.setHeader('Content-Type', result.contentType);
-    res.setHeader('Content-Length', result.data.length);
-    res.setHeader('Cache-Control', 'public, max-age=86400'); // Cache for 24 hours
-    res.setHeader('Access-Control-Allow-Origin', '*');
-    res.setHeader('X-Source', result.source); // Debug header
-
-    // Send file
-    res.send(result.data);
-  } catch (error) {
-    if (error instanceof Error && error.message.includes('not found')) {
-      throw new AppError(404, 'Game file not found in any source');
-    } else {
-      logger.error('[GameFilesRoute] Error:', error);
-      throw error;
-    }
-  }
-}));
+  })
+);
 
 export default router;
diff --git a/backend/src/routes/games.ts b/backend/src/routes/games.ts
index eb537b5..2d79044 100644
--- a/backend/src/routes/games.ts
+++ b/backend/src/routes/games.ts
@@ -41,12 +41,14 @@ const searchQuerySchema = z.object({
   yearTo: z.coerce.number().int().min(1970).max(2100).optional(),
   dateAddedSince: z.string().datetime().optional(),
   dateModifiedSince: z.string().datetime().optional(),
-  sortBy: z.enum(['title', 'releaseDate', 'dateAdded', 'dateModified', 'developer']).default('title'),
+  sortBy: z
+    .enum(['title', 'releaseDate', 'dateAdded', 'dateModified', 'developer'])
+    .default('title'),
   sortOrder: z.enum(['asc', 'desc']).default('asc'),
   page: z.coerce.number().int().min(1).default(1),
   limit: z.coerce.number().int().min(1).max(100).default(50),
   showBroken: booleanSchema.default(false),
-  showExtreme: booleanSchema.default(false)
+  showExtreme: booleanSchema.default(false),
 });
 
 // GET /api/games - List games with pagination and filters
@@ -54,14 +56,25 @@ router.get(
   '/',
   logActivity('games.search', 'games', (req, res) => {
     // Count active filters
-    const filters = ['platform', 'series', 'developers', 'publishers', 'playModes', 'languages', 'library', 'tags', 'yearFrom', 'yearTo'];
-    const activeFilters = filters.filter(f => req.query[f]).length;
+    const filters = [
+      'platform',
+      'series',
+      'developers',
+      'publishers',
+      'playModes',
+      'languages',
+      'library',
+      'tags',
+      'yearFrom',
+      'yearTo',
+    ];
+    const activeFilters = filters.filter((f) => req.query[f]).length;
 
     return {
       query: req.query.search || null,
       filterCount: activeFilters,
       resultCount: res.locals.resultCount || 0,
-      hasSearch: !!req.query.search
+      hasSearch: !!req.query.search,
     };
   }),
   asyncHandler(async (req, res) => {
@@ -87,7 +100,7 @@ router.get(
       page: query.page,
       limit: query.limit,
       showBroken: query.showBroken,
-      showExtreme: query.showExtreme
+      showExtreme: query.showExtreme,
     });
 
     // Store result count for activity logging
@@ -98,22 +111,28 @@ router.get(
 );
 
 // GET /api/games/filter-options - Get all filter options for dropdowns
-router.get('/filter-options', asyncHandler(async (req, res) => {
-  const filterOptions = await gameService.getFilterOptions();
-  res.json(filterOptions);
-}));
+router.get(
+  '/filter-options',
+  asyncHandler(async (req, res) => {
+    const filterOptions = await gameService.getFilterOptions();
+    res.json(filterOptions);
+  })
+);
 
 // GET /api/games/most-played - Get most played games globally
-router.get('/most-played', asyncHandler(async (req, res) => {
-  const limit = Math.min(parseInt(req.query.limit as string) || 20, 50);
-  const games = await gameService.getMostPlayedGames(limit);
+router.get(
+  '/most-played',
+  asyncHandler(async (req, res) => {
+    const limit = Math.min(parseInt(req.query.limit as string) || 20, 50);
+    const games = await gameService.getMostPlayedGames(limit);
 
-  res.json({
-    success: true,
-    data: games,
-    total: games.length
-  });
-}));
+    res.json({
+      success: true,
+      data: games,
+      total: games.length,
+    });
+  })
+);
 
 // GET /api/games/:id - Get single game by ID
 router.get(
@@ -123,7 +142,7 @@ router.get(
     platform: res.locals.game?.platformName,
     library: res.locals.game?.library,
     broken: res.locals.game?.broken,
-    extreme: res.locals.game?.extreme
+    extreme: res.locals.game?.extreme,
   })),
   asyncHandler(async (req, res) => {
     const game = await gameService.getGameById(req.params.id);
@@ -140,24 +159,31 @@ router.get(
 );
 
 // GET /api/games/:id/related - Get related games
-router.get('/:id/related', validateSharedGameAccess('id'), asyncHandler(async (req, res) => {
-  const limit = Math.min(parseInt(req.query.limit as string) || 10, 50);
-  const relatedGames = await gameService.getRelatedGames(req.params.id, limit);
+router.get(
+  '/:id/related',
+  validateSharedGameAccess('id'),
+  asyncHandler(async (req, res) => {
+    const limit = Math.min(parseInt(req.query.limit as string) || 10, 50);
+    const relatedGames = await gameService.getRelatedGames(req.params.id, limit);
 
-  res.json(relatedGames);
-}));
+    res.json(relatedGames);
+  })
+);
 
 // GET /api/games/random - Get random game
-router.get('/random', asyncHandler(async (req, res) => {
-  const library = req.query.library as string | undefined;
-  const game = await gameService.getRandomGame(library);
+router.get(
+  '/random',
+  asyncHandler(async (req, res) => {
+    const library = req.query.library as string | undefined;
+    const game = await gameService.getRandomGame(library);
 
-  if (!game) {
-    throw new AppError(404, 'No games found');
-  }
+    if (!game) {
+      throw new AppError(404, 'No games found');
+    }
 
-  res.json(game);
-}));
+    res.json(game);
+  })
+);
 
 // GET /api/games/:id/launch - Get game launch data
 router.get(
@@ -166,7 +192,7 @@ router.get(
   logActivity('games.launch.request', 'games', (req, res) => ({
     platform: res.locals.platform,
     canPlayInBrowser: res.locals.canPlayInBrowser,
-    launchCommand: res.locals.launchCommand
+    launchCommand: res.locals.launchCommand,
   })),
   asyncHandler(async (req, res) => {
     const game = await gameService.getGameById(req.params.id);
@@ -253,7 +279,7 @@ router.get(
       contentUrl,
       applicationPath: game.applicationPath,
       playMode: game.playMode,
-      canPlayInBrowser
+      canPlayInBrowser,
     });
   })
 );
diff --git a/backend/src/routes/github.ts b/backend/src/routes/github.ts
index 26bfcaa..6293b86 100644
--- a/backend/src/routes/github.ts
+++ b/backend/src/routes/github.ts
@@ -14,30 +14,30 @@ router.get('/stars', async (_req: Request, res: Response) => {
 
     const response = await fetch(repoUrl, {
       headers: {
-        'Accept': 'application/vnd.github.v3+json',
-        'User-Agent': 'Flashpoint-Web-App'
-      }
+        Accept: 'application/vnd.github.v3+json',
+        'User-Agent': 'Flashpoint-Web-App',
+      },
     });
 
     if (!response.ok) {
       throw new Error(`GitHub API error: ${response.status}`);
     }
 
-    const data = await response.json() as { stargazers_count: number };
+    const data = (await response.json()) as { stargazers_count: number };
 
     res.json({
       success: true,
       data: {
-        stars: data.stargazers_count
-      }
+        stars: data.stargazers_count,
+      },
     });
   } catch (error) {
     logger.error('Failed to fetch GitHub stars:', error);
     res.status(500).json({
       success: false,
       error: {
-        message: 'Failed to fetch GitHub star count'
-      }
+        message: 'Failed to fetch GitHub star count',
+      },
     });
   }
 });
diff --git a/backend/src/routes/health.ts b/backend/src/routes/health.ts
index a193d2b..96967e7 100644
--- a/backend/src/routes/health.ts
+++ b/backend/src/routes/health.ts
@@ -19,7 +19,7 @@ router.get('/', (req, res) => {
 
   res.status(isHealthy ? 200 : 503).json({
     status: isHealthy ? 'healthy' : 'unhealthy',
-    timestamp: new Date().toISOString()
+    timestamp: new Date().toISOString(),
   });
 });
 
@@ -43,7 +43,9 @@ router.get(
     try {
       if (DatabaseService.isConnected()) {
         // Test query to verify database is accessible
-        const result = DatabaseService.get('SELECT COUNT(*) as count FROM game', []) as { count: number } | null;
+        const result = DatabaseService.get('SELECT COUNT(*) as count FROM game', []) as {
+          count: number;
+        } | null;
         flashpointDbRecordCount = result?.count || 0;
         flashpointDbStatus = 'connected';
       }
@@ -60,7 +62,9 @@ router.get(
     try {
       if (UserDatabaseService.isConnected()) {
         // Test query to verify database is accessible
-        const result = UserDatabaseService.get('SELECT COUNT(*) as count FROM users', []) as { count: number } | null;
+        const result = UserDatabaseService.get('SELECT COUNT(*) as count FROM users', []) as {
+          count: number;
+        } | null;
         userCount = result?.count || 0;
         userDbStatus = 'connected';
       }
@@ -88,7 +92,7 @@ router.get(
       rss: formatBytes(memoryUsage.rss),
       heapUsed: formatBytes(memoryUsage.heapUsed),
       heapTotal: formatBytes(memoryUsage.heapTotal),
-      external: formatBytes(memoryUsage.external)
+      external: formatBytes(memoryUsage.external),
     };
 
     const healthCheckTime = Math.round(performance.now() - startTime);
@@ -101,20 +105,20 @@ router.get(
       timestamp: new Date().toISOString(),
       uptime: {
         seconds: uptimeSeconds,
-        formatted: uptimeFormatted
+        formatted: uptimeFormatted,
       },
       databases: {
         flashpoint: {
           status: flashpointDbStatus,
           path: config.flashpointDbPath,
           gameCount: flashpointDbRecordCount,
-          error: flashpointDbError
+          error: flashpointDbError,
         },
         user: {
           status: userDbStatus,
           userCount,
-          error: userDbError
-        }
+          error: userDbError,
+        },
       },
       caches: {
         permissions: permissionCacheStats,
@@ -122,23 +126,23 @@ router.get(
           size: gameSearchCacheStats.primary.size,
           max: gameSearchCacheStats.primary.max,
           ttl: '5 minutes',
-          hitRate: gameSearchCacheStats.primary.size > 0 ? 'active' : 'idle'
-        }
+          hitRate: gameSearchCacheStats.primary.size > 0 ? 'active' : 'idle',
+        },
       },
       memory: memoryFormatted,
       environment: {
         nodeEnv: config.nodeEnv,
         nodeVersion: process.version,
         platform: process.platform,
-        arch: process.arch
+        arch: process.arch,
       },
       services: {
         gameService: {
           proxyUrl: config.gameServerUrl || 'http://localhost:22500',
-          gameZipPort: config.gameServerHttpPort || 22501
-        }
+          gameZipPort: config.gameServerHttpPort || 22501,
+        },
       },
-      healthCheckDuration: `${healthCheckTime}ms`
+      healthCheckDuration: `${healthCheckTime}ms`,
     });
   })
 );
diff --git a/backend/src/routes/index.ts b/backend/src/routes/index.ts
index 7aac2ca..e63a8b7 100644
--- a/backend/src/routes/index.ts
+++ b/backend/src/routes/index.ts
@@ -95,8 +95,8 @@ export function setupRoutes(app: Express): void {
     res.status(404).json({
       error: {
         message: 'Route not found',
-        statusCode: 404
-      }
+        statusCode: 404,
+      },
     });
   });
 }
diff --git a/backend/src/routes/jobs.ts b/backend/src/routes/jobs.ts
index 6d7b7d5..ac2cb60 100644
--- a/backend/src/routes/jobs.ts
+++ b/backend/src/routes/jobs.ts
@@ -69,7 +69,7 @@ router.patch(
       // Validate request body
       if (typeof enabled !== 'boolean') {
         return res.status(400).json({
-          error: { message: 'Invalid request: enabled must be a boolean' }
+          error: { message: 'Invalid request: enabled must be a boolean' },
         });
       }
 
@@ -100,7 +100,7 @@ router.patch(
     } catch (error) {
       logger.error(`Failed to update job ${req.params.jobId}:`, error);
       res.status(500).json({
-        error: { message: error instanceof Error ? error.message : 'Failed to update job' }
+        error: { message: error instanceof Error ? error.message : 'Failed to update job' },
       });
     }
   }
@@ -123,7 +123,7 @@ router.post(
       logger.error(`Failed to start job ${req.params.jobId}:`, error);
       res.status(500).json({
         success: false,
-        message: error instanceof Error ? error.message : 'Failed to start job'
+        message: error instanceof Error ? error.message : 'Failed to start job',
       });
     }
   }
@@ -146,7 +146,7 @@ router.post(
       logger.error(`Failed to stop job ${req.params.jobId}:`, error);
       res.status(500).json({
         success: false,
-        message: error instanceof Error ? error.message : 'Failed to stop job'
+        message: error instanceof Error ? error.message : 'Failed to stop job',
       });
     }
   }
@@ -168,7 +168,7 @@ router.post(
       await JobScheduler.triggerJob(jobId, userId);
       res.json({
         success: true,
-        message: 'Job triggered successfully'
+        message: 'Job triggered successfully',
       });
     } catch (error) {
       const message = error instanceof Error ? error.message : 'Failed to trigger job';
diff --git a/backend/src/routes/metrics.ts b/backend/src/routes/metrics.ts
index 9f2d4c1..98ea846 100644
--- a/backend/src/routes/metrics.ts
+++ b/backend/src/routes/metrics.ts
@@ -20,7 +20,7 @@ router.get(
 
     res.json({
       success: true,
-      data: summary
+      data: summary,
     });
   })
 );
@@ -39,7 +39,7 @@ router.get(
 
     res.json({
       success: true,
-      data: stats
+      data: stats,
     });
   })
 );
@@ -59,7 +59,7 @@ router.get(
 
     res.json({
       success: true,
-      data: slowest
+      data: slowest,
     });
   })
 );
@@ -78,7 +78,7 @@ router.get(
 
     res.json({
       success: true,
-      data: cacheStats
+      data: cacheStats,
     });
   })
 );
@@ -97,7 +97,7 @@ router.get(
 
     res.json({
       success: true,
-      data: queryStats
+      data: queryStats,
     });
   })
 );
@@ -116,7 +116,7 @@ router.post(
 
     res.json({
       success: true,
-      message: 'Performance metrics reset successfully'
+      message: 'Performance metrics reset successfully',
     });
   })
 );
diff --git a/backend/src/routes/platforms.ts b/backend/src/routes/platforms.ts
index 40bb0c9..fa8c7ee 100644
--- a/backend/src/routes/platforms.ts
+++ b/backend/src/routes/platforms.ts
@@ -13,8 +13,10 @@ router.use(rateLimitStandard);
 router.use(optionalAuth);
 
 // GET /api/platforms - List all platforms
-router.get('/', asyncHandler(async (req, res) => {
-  const sql = `
+router.get(
+  '/',
+  asyncHandler(async (req, res) => {
+    const sql = `
     SELECT DISTINCT platformName as platform, COUNT(*) as count
     FROM game
     WHERE platformName IS NOT NULL AND platformName != ''
@@ -22,9 +24,10 @@ router.get('/', asyncHandler(async (req, res) => {
     ORDER BY platformName ASC
   `;
 
-  const platforms = DatabaseService.all(sql, []) as Array<{ platform: string; count: number }>;
+    const platforms = DatabaseService.all(sql, []) as Array<{ platform: string; count: number }>;
 
-  res.json(platforms);
-}));
+    res.json(platforms);
+  })
+);
 
 export default router;
diff --git a/backend/src/routes/play-tracking.ts b/backend/src/routes/play-tracking.ts
index e6a945a..88ac3ee 100644
--- a/backend/src/routes/play-tracking.ts
+++ b/backend/src/routes/play-tracking.ts
@@ -26,7 +26,7 @@ router.post(
   logActivity('play.start', 'games', (req, res) => ({
     sessionId: res.locals.sessionId,
     gameTitle: req.body.gameTitle,
-    gameId: req.body.gameId
+    gameId: req.body.gameId,
   })),
   asyncHandler(async (req: Request, res: Response) => {
     const { gameId, gameTitle } = req.body;
@@ -39,18 +39,14 @@ router.post(
       throw new AppError(401, 'Authentication required');
     }
 
-    const sessionId = await playTrackingService.startPlaySession(
-      req.user.id,
-      gameId,
-      gameTitle
-    );
+    const sessionId = await playTrackingService.startPlaySession(req.user.id, gameId, gameTitle);
 
     // Store sessionId for activity logging
     res.locals.sessionId = sessionId;
 
     res.json({
       success: true,
-      sessionId
+      sessionId,
     });
   })
 );
@@ -73,7 +69,7 @@ router.post(
 
     res.json({
       success: true,
-      message: 'Play session ended successfully'
+      message: 'Play session ended successfully',
     });
   })
 );
@@ -82,104 +78,122 @@ router.post(
  * GET /api/play/stats
  * Get current user's overall stats
  */
-router.get('/stats', asyncHandler(async (req: Request, res: Response) => {
-  if (!req.user) {
-    throw new AppError(401, 'Authentication required');
-  }
+router.get(
+  '/stats',
+  asyncHandler(async (req: Request, res: Response) => {
+    if (!req.user) {
+      throw new AppError(401, 'Authentication required');
+    }
 
-  const stats = await playTrackingService.getUserStats(req.user.id);
+    const stats = await playTrackingService.getUserStats(req.user.id);
 
-  res.json(stats);
-}));
+    res.json(stats);
+  })
+);
 
 /**
  * GET /api/play/game-stats
  * Get current user's game-specific stats
  */
-router.get('/game-stats', asyncHandler(async (req: Request, res: Response) => {
-  if (!req.user) {
-    throw new AppError(401, 'Authentication required');
-  }
+router.get(
+  '/game-stats',
+  asyncHandler(async (req: Request, res: Response) => {
+    if (!req.user) {
+      throw new AppError(401, 'Authentication required');
+    }
 
-  const limit = Math.min(parseInt(req.query.limit as string) || 50, 100);
-  const offset = parseInt(req.query.offset as string) || 0;
+    const limit = Math.min(parseInt(req.query.limit as string) || 50, 100);
+    const offset = parseInt(req.query.offset as string) || 0;
 
-  const stats = await playTrackingService.getUserGameStats(req.user.id, limit, offset);
+    const stats = await playTrackingService.getUserGameStats(req.user.id, limit, offset);
 
-  res.json({
-    data: stats,
-    limit,
-    offset
-  });
-}));
+    res.json({
+      data: stats,
+      limit,
+      offset,
+    });
+  })
+);
 
 /**
  * GET /api/play/history
  * Get current user's play history
  */
-router.get('/history', asyncHandler(async (req: Request, res: Response) => {
-  if (!req.user) {
-    throw new AppError(401, 'Authentication required');
-  }
+router.get(
+  '/history',
+  asyncHandler(async (req: Request, res: Response) => {
+    if (!req.user) {
+      throw new AppError(401, 'Authentication required');
+    }
 
-  const limit = Math.min(parseInt(req.query.limit as string) || 50, 100);
-  const offset = parseInt(req.query.offset as string) || 0;
+    const limit = Math.min(parseInt(req.query.limit as string) || 50, 100);
+    const offset = parseInt(req.query.offset as string) || 0;
 
-  const history = await playTrackingService.getUserPlayHistory(req.user.id, limit, offset);
+    const history = await playTrackingService.getUserPlayHistory(req.user.id, limit, offset);
 
-  res.json({
-    data: history,
-    limit,
-    offset
-  });
-}));
+    res.json({
+      data: history,
+      limit,
+      offset,
+    });
+  })
+);
 
 /**
  * GET /api/play/top-games
  * Get current user's top played games
  */
-router.get('/top-games', asyncHandler(async (req: Request, res: Response) => {
-  if (!req.user) {
-    throw new AppError(401, 'Authentication required');
-  }
+router.get(
+  '/top-games',
+  asyncHandler(async (req: Request, res: Response) => {
+    if (!req.user) {
+      throw new AppError(401, 'Authentication required');
+    }
 
-  const limit = Math.min(parseInt(req.query.limit as string) || 10, 50);
+    const limit = Math.min(parseInt(req.query.limit as string) || 10, 50);
 
-  const topGames = await playTrackingService.getTopGames(req.user.id, limit);
+    const topGames = await playTrackingService.getTopGames(req.user.id, limit);
 
-  res.json(topGames);
-}));
+    res.json(topGames);
+  })
+);
 
 /**
  * GET /api/play/activity-over-time
  * Get play activity over time (daily aggregation)
  */
-router.get('/activity-over-time', asyncHandler(async (req: Request, res: Response) => {
-  if (!req.user) {
-    throw new AppError(401, 'Authentication required');
-  }
+router.get(
+  '/activity-over-time',
+  asyncHandler(async (req: Request, res: Response) => {
+    if (!req.user) {
+      throw new AppError(401, 'Authentication required');
+    }
 
-  const days = Math.min(parseInt(req.query.days as string) || 30, 365);
+    const days = Math.min(parseInt(req.query.days as string) || 30, 365);
 
-  const activity = await playTrackingService.getPlayActivityOverTime(req.user.id, days);
+    const activity = await playTrackingService.getPlayActivityOverTime(req.user.id, days);
 
-  res.json(activity);
-}));
+    res.json(activity);
+  })
+);
 
 /**
  * GET /api/play/games-distribution
  * Get games distribution by playtime
  */
-router.get('/games-distribution', asyncHandler(async (req: Request, res: Response) => {
-  if (!req.user) {
-    throw new AppError(401, 'Authentication required');
-  }
+router.get(
+  '/games-distribution',
+  asyncHandler(async (req: Request, res: Response) => {
+    if (!req.user) {
+      throw new AppError(401, 'Authentication required');
+    }
 
-  const limit = Math.min(parseInt(req.query.limit as string) || 10, 20);
+    const limit = Math.min(parseInt(req.query.limit as string) || 10, 20);
 
-  const distribution = await playTrackingService.getGamesDistribution(req.user.id, limit);
+    const distribution = await playTrackingService.getGamesDistribution(req.user.id, limit);
 
-  res.json(distribution);
-}));
+    res.json(distribution);
+  })
+);
 
 export default router;
diff --git a/backend/src/routes/playlists.ts b/backend/src/routes/playlists.ts
index 79ee81c..e603f6f 100644
--- a/backend/src/routes/playlists.ts
+++ b/backend/src/routes/playlists.ts
@@ -1,5 +1,9 @@
 import { Router } from 'express';
-import { PlaylistService, CreatePlaylistDto, AddGamesToPlaylistDto } from '../services/PlaylistService';
+import {
+  PlaylistService,
+  CreatePlaylistDto,
+  AddGamesToPlaylistDto,
+} from '../services/PlaylistService';
 import { AppError } from '../middleware/errorHandler';
 import { asyncHandler } from '../middleware/asyncHandler';
 import { authenticate } from '../middleware/auth';
@@ -19,22 +23,28 @@ router.use(requireFeature('enablePlaylists'));
 
 // GET /api/playlists - List all playlists
 // No additional auth needed - softAuth already runs at router level
-router.get('/', asyncHandler(async (req, res) => {
-  const playlists = await playlistService.getAllPlaylists();
-  res.json(playlists);
-}));
+router.get(
+  '/',
+  asyncHandler(async (req, res) => {
+    const playlists = await playlistService.getAllPlaylists();
+    res.json(playlists);
+  })
+);
 
 // GET /api/playlists/:id - Get playlist by ID with games
 // No additional auth needed - softAuth already runs at router level
-router.get('/:id', asyncHandler(async (req, res) => {
-  const playlist = await playlistService.getPlaylistById(req.params.id);
+router.get(
+  '/:id',
+  asyncHandler(async (req, res) => {
+    const playlist = await playlistService.getPlaylistById(req.params.id);
 
-  if (!playlist) {
-    throw new AppError(404, 'Playlist not found');
-  }
+    if (!playlist) {
+      throw new AppError(404, 'Playlist not found');
+    }
 
-  res.json(playlist);
-}));
+    res.json(playlist);
+  })
+);
 
 // POST /api/playlists - Create new playlist
 router.post(
diff --git a/backend/src/routes/proxy.ts b/backend/src/routes/proxy.ts
index 758c539..1528ce8 100644
--- a/backend/src/routes/proxy.ts
+++ b/backend/src/routes/proxy.ts
@@ -69,7 +69,7 @@ async function serveFileWithFallback(
         const response = await axios.get(externalUrl, {
           responseType: 'arraybuffer',
           timeout: 10000, // 10 second timeout
-          validateStatus: (status) => status === 200
+          validateStatus: (status) => status === 200,
         });
 
         if (response.status === 200 && response.data) {
@@ -89,7 +89,9 @@ async function serveFileWithFallback(
               logger.info(`[Proxy] Cached image locally: ${localPath}`);
             } catch (cacheError) {
               // Log cache errors but don't fail the request
-              logger.warn(`[Proxy] Failed to cache image locally: ${cacheError instanceof Error ? cacheError.message : 'Unknown error'}`);
+              logger.warn(
+                `[Proxy] Failed to cache image locally: ${cacheError instanceof Error ? cacheError.message : 'Unknown error'}`
+              );
             }
           })();
 
@@ -101,7 +103,9 @@ async function serveFileWithFallback(
           return res.send(imageBuffer);
         }
       } catch (err) {
-        logger.debug(`[Proxy] Failed to fetch from ${baseUrl}: ${err instanceof Error ? err.message : 'Unknown error'}`);
+        logger.debug(
+          `[Proxy] Failed to fetch from ${baseUrl}: ${err instanceof Error ? err.message : 'Unknown error'}`
+        );
         // Continue to next URL
       }
     }
@@ -111,8 +115,8 @@ async function serveFileWithFallback(
     res.status(404).json({
       error: {
         message: 'Image not found',
-        statusCode: 404
-      }
+        statusCode: 404,
+      },
     });
   } catch (error) {
     next(error);
@@ -120,114 +124,108 @@ async function serveFileWithFallback(
 }
 
 // Proxy to Flashpoint Game Server for game content
-router.use('/game', createProxyMiddleware({
-  target: config.gameServerUrl,
-  changeOrigin: true,
-  pathRewrite: {
-    '^/proxy/game': '' // Remove /proxy/game prefix
-  },
-  onProxyReq: (proxyReq, req, _res) => {
-    // Add headers if needed
-    if (req.ip) {
-      proxyReq.setHeader('X-Forwarded-For', req.ip);
-    }
-  },
-  onError: (err, req, res) => {
-    logger.error('Proxy error:', err);
-    res.status(500).json({
-      error: {
-        message: 'Failed to proxy request to game server',
-        statusCode: 500
+router.use(
+  '/game',
+  createProxyMiddleware({
+    target: config.gameServerUrl,
+    changeOrigin: true,
+    pathRewrite: {
+      '^/proxy/game': '', // Remove /proxy/game prefix
+    },
+    onProxyReq: (proxyReq, req, _res) => {
+      // Add headers if needed
+      if (req.ip) {
+        proxyReq.setHeader('X-Forwarded-For', req.ip);
       }
-    });
-  }
-}));
+    },
+    onError: (err, req, res) => {
+      logger.error('Proxy error:', err);
+      res.status(500).json({
+        error: {
+          message: 'Failed to proxy request to game server',
+          statusCode: 500,
+        },
+      });
+    },
+  })
+);
 
 // Serve images with CDN fallback
-router.get('/images/:path(*)', asyncHandler(async (req, res, next) => {
-  const relativePath = req.params.path;
+router.get(
+  '/images/:path(*)',
+  asyncHandler(async (req, res, next) => {
+    const relativePath = req.params.path;
 
-  // Validate path to prevent directory traversal
-  const localPath = validatePath(relativePath, config.flashpointImagesPath);
+    // Validate path to prevent directory traversal
+    const localPath = validatePath(relativePath, config.flashpointImagesPath);
 
-  if (!localPath) {
-    return res.status(403).json({
-      error: {
-        message: 'Access denied',
-        statusCode: 403
-      }
-    });
-  }
+    if (!localPath) {
+      return res.status(403).json({
+        error: {
+          message: 'Access denied',
+          statusCode: 403,
+        },
+      });
+    }
 
-  // Get external image URLs dynamically from preferences
-  const externalImageUrls = await getExternalImageUrls();
+    // Get external image URLs dynamically from preferences
+    const externalImageUrls = await getExternalImageUrls();
 
-  await serveFileWithFallback(
-    localPath,
-    relativePath,
-    externalImageUrls,
-    res,
-    next
-  );
-}));
+    await serveFileWithFallback(localPath, relativePath, externalImageUrls, res, next);
+  })
+);
 
 // Serve logos with CDN fallback
-router.get('/logos/:path(*)', asyncHandler(async (req, res, next) => {
-  const relativePath = req.params.path;
+router.get(
+  '/logos/:path(*)',
+  asyncHandler(async (req, res, next) => {
+    const relativePath = req.params.path;
 
-  // Validate path to prevent directory traversal
-  const localPath = validatePath(relativePath, config.flashpointLogosPath);
+    // Validate path to prevent directory traversal
+    const localPath = validatePath(relativePath, config.flashpointLogosPath);
 
-  if (!localPath) {
-    return res.status(403).json({
-      error: {
-        message: 'Access denied',
-        statusCode: 403
-      }
-    });
-  }
+    if (!localPath) {
+      return res.status(403).json({
+        error: {
+          message: 'Access denied',
+          statusCode: 403,
+        },
+      });
+    }
 
-  // Get external image URLs dynamically from preferences
-  const externalImageUrls = await getExternalImageUrls();
+    // Get external image URLs dynamically from preferences
+    const externalImageUrls = await getExternalImageUrls();
 
-  // For logos, the external path should include 'Logos' subdirectory
-  const externalUrls = externalImageUrls.map(url => `${url}/../Logos`);
+    // For logos, the external path should include 'Logos' subdirectory
+    const externalUrls = externalImageUrls.map((url) => `${url}/../Logos`);
 
-  await serveFileWithFallback(
-    localPath,
-    relativePath,
-    externalUrls,
-    res,
-    next
-  );
-}));
+    await serveFileWithFallback(localPath, relativePath, externalUrls, res, next);
+  })
+);
 
 // Serve screenshots with CDN fallback
-router.get('/screenshots/:path(*)', asyncHandler(async (req, res, next) => {
-  const relativePath = `Screenshots/${req.params.path}`;
+router.get(
+  '/screenshots/:path(*)',
+  asyncHandler(async (req, res, next) => {
+    const relativePath = `Screenshots/${req.params.path}`;
 
-  // Validate path to prevent directory traversal
-  const localPath = validatePath(relativePath, config.flashpointImagesPath);
+    // Validate path to prevent directory traversal
+    const localPath = validatePath(relativePath, config.flashpointImagesPath);
 
-  if (!localPath) {
-    return res.status(403).json({
-      error: {
-        message: 'Access denied',
-        statusCode: 403
-      }
-    });
-  }
+    if (!localPath) {
+      return res.status(403).json({
+        error: {
+          message: 'Access denied',
+          statusCode: 403,
+        },
+      });
+    }
 
-  // Get external image URLs dynamically from preferences
-  const externalImageUrls = await getExternalImageUrls();
+    // Get external image URLs dynamically from preferences
+    const externalImageUrls = await getExternalImageUrls();
 
-  await serveFileWithFallback(
-    localPath,
-    relativePath,
-    externalImageUrls,
-    res,
-    next
-  );
-}));
+    await serveFileWithFallback(localPath, relativePath, externalImageUrls, res, next);
+  })
+);
 
 export default router;
diff --git a/backend/src/routes/roles.ts b/backend/src/routes/roles.ts
index 5e62b8e..bc58d31 100644
--- a/backend/src/routes/roles.ts
+++ b/backend/src/routes/roles.ts
@@ -15,17 +15,17 @@ const createRoleSchema = z.object({
   name: z.string().min(3).max(50),
   description: z.string().optional(),
   priority: z.number().int().default(0),
-  permissionIds: z.array(z.number().int().positive()).optional()
+  permissionIds: z.array(z.number().int().positive()).optional(),
 });
 
 const updateRoleSchema = z.object({
   name: z.string().min(3).max(50).optional(),
   description: z.string().optional(),
-  priority: z.number().int().optional()
+  priority: z.number().int().optional(),
 });
 
 const updatePermissionsSchema = z.object({
-  permissionIds: z.array(z.number().int().positive())
+  permissionIds: z.array(z.number().int().positive()),
 });
 
 /**
@@ -114,12 +114,7 @@ router.patch(
     const id = parseInt(req.params.id);
     const data = updateRoleSchema.parse(req.body);
 
-    const role = await roleService.updateRole(
-      id,
-      data.name,
-      data.description,
-      data.priority
-    );
+    const role = await roleService.updateRole(id, data.name, data.description, data.priority);
 
     res.json(role);
   })
diff --git a/backend/src/routes/ruffle.ts b/backend/src/routes/ruffle.ts
index bb3021c..b55e5ca 100644
--- a/backend/src/routes/ruffle.ts
+++ b/backend/src/routes/ruffle.ts
@@ -18,7 +18,7 @@ router.get('/version', (req, res, next) => {
 
     res.json({
       currentVersion,
-      isInstalled
+      isInstalled,
     });
   } catch (error) {
     next(error);
@@ -29,18 +29,28 @@ router.get('/version', (req, res, next) => {
  * GET /api/ruffle/check-update
  * Check for Ruffle updates (admin only)
  */
-router.get('/check-update', authenticate, requirePermission('settings.update'), asyncHandler(async (req, res) => {
-  const updateInfo = await ruffleService.checkForUpdate();
-  res.json(updateInfo);
-}));
+router.get(
+  '/check-update',
+  authenticate,
+  requirePermission('settings.update'),
+  asyncHandler(async (req, res) => {
+    const updateInfo = await ruffleService.checkForUpdate();
+    res.json(updateInfo);
+  })
+);
 
 /**
  * POST /api/ruffle/update
  * Update Ruffle to latest version (admin only)
  */
-router.post('/update', authenticate, requirePermission('settings.update'), asyncHandler(async (req, res) => {
-  const result = await ruffleService.updateRuffle();
-  res.json(result);
-}));
+router.post(
+  '/update',
+  authenticate,
+  requirePermission('settings.update'),
+  asyncHandler(async (req, res) => {
+    const result = await ruffleService.updateRuffle();
+    res.json(result);
+  })
+);
 
 export default router;
diff --git a/backend/src/routes/shared-playlists.ts b/backend/src/routes/shared-playlists.ts
index 126eba7..9996e73 100644
--- a/backend/src/routes/shared-playlists.ts
+++ b/backend/src/routes/shared-playlists.ts
@@ -62,11 +62,11 @@ router.get(
   rateLimitStrict,
   validateSharedPlaylist,
   asyncHandler(async (req, res) => {
-    const games = await playlistService.getSharedPlaylistGames(
-      req.params.shareToken
-    );
+    const games = await playlistService.getSharedPlaylistGames(req.params.shareToken);
 
-    logger.debug(`Shared playlist ${req.sharedPlaylist!.id} games accessed (${games.length} games)`);
+    logger.debug(
+      `Shared playlist ${req.sharedPlaylist!.id} games accessed (${games.length} games)`
+    );
 
     res.json(games);
   })
@@ -119,7 +119,7 @@ router.post(
 
     const accessToken = generateSharedAccessToken({
       shareToken: req.params.shareToken,
-      playlistId: playlist.id
+      playlistId: playlist.id,
     });
 
     logger.debug(`Generated shared access token for playlist ${playlist.id}`);
@@ -127,7 +127,7 @@ router.post(
     res.json({
       accessToken,
       expiresIn: 3600, // 60 minutes in seconds
-      playlistId: playlist.id
+      playlistId: playlist.id,
     });
   })
 );
@@ -156,7 +156,9 @@ router.post(
       throw new AppError(400, 'Unable to clone playlist');
     }
 
-    logger.info(`User ${req.user!.id} cloned shared playlist ${req.sharedPlaylist!.id} as "${clonedPlaylist.title}"`);
+    logger.info(
+      `User ${req.user!.id} cloned shared playlist ${req.sharedPlaylist!.id} as "${clonedPlaylist.title}"`
+    );
 
     res.status(201).json(clonedPlaylist);
   })
diff --git a/backend/src/routes/statistics.ts b/backend/src/routes/statistics.ts
index bb27054..55387f7 100644
--- a/backend/src/routes/statistics.ts
+++ b/backend/src/routes/statistics.ts
@@ -17,9 +17,12 @@ router.use(requireFeature('enableStatistics'));
  * GET /api/statistics
  * Get overall Flashpoint archive statistics
  */
-router.get('/', asyncHandler(async (req, res) => {
-  const statistics = await statisticsService.getStatistics();
-  res.json(statistics);
-}));
+router.get(
+  '/',
+  asyncHandler(async (req, res) => {
+    const statistics = await statisticsService.getStatistics();
+    res.json(statistics);
+  })
+);
 
 export default router;
diff --git a/backend/src/routes/system-settings.ts b/backend/src/routes/system-settings.ts
index 3d49290..cd2f9fc 100644
--- a/backend/src/routes/system-settings.ts
+++ b/backend/src/routes/system-settings.ts
@@ -19,11 +19,12 @@ function updateJobScheduler(category: string, settings: Record<string, any>): vo
     if ('metadataSyncEnabled' in settings || 'metadataSyncSchedule' in settings) {
       const currentSettings = systemSettings.getCategory('jobs');
       const enabled = settings.metadataSyncEnabled ?? currentSettings.metadataSyncEnabled ?? false;
-      const cronSchedule = settings.metadataSyncSchedule ?? currentSettings.metadataSyncSchedule ?? '0 * * * *';
+      const cronSchedule =
+        settings.metadataSyncSchedule ?? currentSettings.metadataSyncSchedule ?? '0 * * * *';
 
       JobScheduler.updateJob('metadata-sync', {
         enabled,
-        cronSchedule
+        cronSchedule,
       });
     }
   }
@@ -44,7 +45,7 @@ router.get(
     } catch (error) {
       logger.error('Failed to get all settings:', error);
       res.status(500).json({
-        error: { message: 'Failed to retrieve settings' }
+        error: { message: 'Failed to retrieve settings' },
       });
     }
   }
@@ -85,7 +86,7 @@ router.get('/public', async (req: Request, res: Response) => {
   } catch (error) {
     logger.error('Failed to get public settings:', error);
     res.status(500).json({
-      error: { message: 'Failed to retrieve public settings' }
+      error: { message: 'Failed to retrieve public settings' },
     });
   }
 });
@@ -107,7 +108,7 @@ router.get(
     } catch (error) {
       logger.error(`Failed to get ${req.params.category} settings:`, error);
       res.status(500).json({
-        error: { message: 'Failed to retrieve settings' }
+        error: { message: 'Failed to retrieve settings' },
       });
     }
   }
@@ -132,8 +133,8 @@ router.patch(
         return res.status(400).json({
           error: {
             message: 'Invalid request body',
-            details: validation.error.errors
-          }
+            details: validation.error.errors,
+          },
         });
       }
 
@@ -155,12 +156,12 @@ router.patch(
       // Check if it's a validation error
       if (error instanceof Error && error.message.includes('must be')) {
         return res.status(400).json({
-          error: { message: error.message }
+          error: { message: error.message },
         });
       }
 
       res.status(500).json({
-        error: { message: 'Failed to update settings' }
+        error: { message: 'Failed to update settings' },
       });
     }
   }
@@ -181,7 +182,7 @@ router.get(
 
       if (value === null) {
         return res.status(404).json({
-          error: { message: `Setting '${fullKey}' not found` }
+          error: { message: `Setting '${fullKey}' not found` },
         });
       }
 
@@ -189,7 +190,7 @@ router.get(
     } catch (error) {
       logger.error(`Failed to get setting ${req.params.category}.${req.params.key}:`, error);
       res.status(500).json({
-        error: { message: 'Failed to retrieve setting' }
+        error: { message: 'Failed to retrieve setting' },
       });
     }
   }
@@ -199,7 +200,7 @@ router.get(
 // UPDATE SINGLE SETTING (Admin Only)
 // ===================================
 const updateSettingSchema = z.object({
-  value: z.any()
+  value: z.any(),
 });
 
 router.patch(
@@ -217,8 +218,8 @@ router.patch(
         return res.status(400).json({
           error: {
             message: 'Invalid request body',
-            details: validation.error.errors
-          }
+            details: validation.error.errors,
+          },
         });
       }
 
@@ -237,12 +238,12 @@ router.patch(
       // Check if it's a validation error
       if (error instanceof Error && error.message.includes('must be')) {
         return res.status(400).json({
-          error: { message: error.message }
+          error: { message: error.message },
         });
       }
 
       res.status(500).json({
-        error: { message: 'Failed to update setting' }
+        error: { message: 'Failed to update setting' },
       });
     }
   }
@@ -262,7 +263,7 @@ router.get(
     } catch (error) {
       logger.error('Failed to get cache stats:', error);
       res.status(500).json({
-        error: { message: 'Failed to retrieve cache statistics' }
+        error: { message: 'Failed to retrieve cache statistics' },
       });
     }
   }
@@ -290,7 +291,7 @@ router.post(
     } catch (error) {
       logger.error('Failed to clear cache:', error);
       res.status(500).json({
-        error: { message: 'Failed to clear cache' }
+        error: { message: 'Failed to clear cache' },
       });
     }
   }
@@ -314,14 +315,14 @@ router.get(
           totalSize: 'Total cached entries',
           ttl: {
             userPermissions: '5 minutes',
-            rolePermissions: '10 minutes'
-          }
-        }
+            rolePermissions: '10 minutes',
+          },
+        },
       });
     } catch (error) {
       logger.error('Failed to get permission cache stats:', error);
       res.status(500).json({
-        error: { message: 'Failed to retrieve permission cache statistics' }
+        error: { message: 'Failed to retrieve permission cache statistics' },
       });
     }
   }
@@ -357,14 +358,15 @@ router.post(
       } else {
         res.status(400).json({
           error: {
-            message: 'Invalid request. Specify type: "user", "role", "users", "roles", or "all". For "user" or "role", provide an id.'
-          }
+            message:
+              'Invalid request. Specify type: "user", "role", "users", "roles", or "all". For "user" or "role", provide an id.',
+          },
         });
       }
     } catch (error) {
       logger.error('Failed to clear permission cache:', error);
       res.status(500).json({
-        error: { message: 'Failed to clear permission cache' }
+        error: { message: 'Failed to clear permission cache' },
       });
     }
   }
diff --git a/backend/src/routes/tags.ts b/backend/src/routes/tags.ts
index 07d7eaf..4c33774 100644
--- a/backend/src/routes/tags.ts
+++ b/backend/src/routes/tags.ts
@@ -13,27 +13,33 @@ router.use(rateLimitStandard);
 router.use(optionalAuth);
 
 // GET /api/tags - List all unique tags
-router.get('/', asyncHandler(async (req, res) => {
-  // Get all games with tags
-  const sql = `SELECT DISTINCT tagsStr FROM game WHERE tagsStr IS NOT NULL AND tagsStr != ''`;
-  const results = DatabaseService.all(sql, []) as Array<{ tagsStr: string }>;
+router.get(
+  '/',
+  asyncHandler(async (req, res) => {
+    // Get all games with tags
+    const sql = `SELECT DISTINCT tagsStr FROM game WHERE tagsStr IS NOT NULL AND tagsStr != ''`;
+    const results = DatabaseService.all(sql, []) as Array<{ tagsStr: string }>;
 
-  // Parse tags (semicolon-separated) and count occurrences
-  const tagCounts = new Map<string, number>();
+    // Parse tags (semicolon-separated) and count occurrences
+    const tagCounts = new Map<string, number>();
 
-  results.forEach(row => {
-    const tags = row.tagsStr.split(';').map(t => t.trim()).filter(Boolean);
-    tags.forEach(tag => {
-      tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1);
+    results.forEach((row) => {
+      const tags = row.tagsStr
+        .split(';')
+        .map((t) => t.trim())
+        .filter(Boolean);
+      tags.forEach((tag) => {
+        tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1);
+      });
     });
-  });
 
-  // Convert to array and sort by count
-  const tags = Array.from(tagCounts.entries())
-    .map(([name, count]) => ({ name, count }))
-    .sort((a, b) => b.count - a.count);
+    // Convert to array and sort by count
+    const tags = Array.from(tagCounts.entries())
+      .map(([name, count]) => ({ name, count }))
+      .sort((a, b) => b.count - a.count);
 
-  res.json(tags);
-}));
+    res.json(tags);
+  })
+);
 
 export default router;
diff --git a/backend/src/routes/updates.ts b/backend/src/routes/updates.ts
index ff43649..39cfd63 100644
--- a/backend/src/routes/updates.ts
+++ b/backend/src/routes/updates.ts
@@ -17,11 +17,14 @@ const metadataSyncService = new MetadataSyncService();
  * GET /api/updates/check
  * Check for available updates
  */
-router.get('/check', asyncHandler(async (req, res) => {
-  logger.info('[Updates API] Checking for updates...');
-  const updateInfo = await updateService.checkForUpdates();
-  res.json(updateInfo);
-}));
+router.get(
+  '/check',
+  asyncHandler(async (req, res) => {
+    logger.info('[Updates API] Checking for updates...');
+    const updateInfo = await updateService.checkForUpdates();
+    res.json(updateInfo);
+  })
+);
 
 /**
  * POST /api/updates/install
@@ -64,12 +67,15 @@ router.get(
  * Returns info about game database updates from FPFSS
  * Includes edition info so frontend knows whether sync is available
  */
-router.get('/metadata', asyncHandler(async (req, res) => {
-  const edition = metadataUpdateService.getEdition();
-  logger.info(`[Updates API] Checking for metadata updates... (edition: ${edition})`);
-  const metadataInfo = await metadataUpdateService.getMetadataUpdateInfo();
-  res.json({ ...metadataInfo, edition });
-}));
+router.get(
+  '/metadata',
+  asyncHandler(async (req, res) => {
+    const edition = metadataUpdateService.getEdition();
+    logger.info(`[Updates API] Checking for metadata updates... (edition: ${edition})`);
+    const metadataInfo = await metadataUpdateService.getMetadataUpdateInfo();
+    res.json({ ...metadataInfo, edition });
+  })
+);
 
 /**
  * POST /api/updates/metadata/sync
@@ -92,23 +98,24 @@ router.post(
       return res.status(409).json({
         success: false,
         error: 'Sync already in progress',
-        status: syncStatus.getStatus()
+        status: syncStatus.getStatus(),
       });
     }
 
-    logger.info(`[Updates API] Starting metadata sync in background (requested by ${req.user?.username})...`);
+    logger.info(
+      `[Updates API] Starting metadata sync in background (requested by ${req.user?.username})...`
+    );
 
     // Start sync in background (don't await - let it run async)
-    metadataSyncService.syncMetadata()
-      .catch((error) => {
-        logger.error('[Updates API] Background sync error:', error);
-      });
+    metadataSyncService.syncMetadata().catch((error) => {
+      logger.error('[Updates API] Background sync error:', error);
+    });
 
     // Return immediately
     res.json({
       success: true,
       message: 'Sync started',
-      status: syncStatus.getStatus()
+      status: syncStatus.getStatus(),
     });
   })
 );
@@ -129,7 +136,7 @@ router.get('/metadata/sync/status', (req, res) => {
       stage: 'error',
       progress: 0,
       message: 'Error getting sync status',
-      error: error instanceof Error ? error.message : 'Unknown error'
+      error: error instanceof Error ? error.message : 'Unknown error',
     });
   }
 });
diff --git a/backend/src/routes/user-playlists.ts b/backend/src/routes/user-playlists.ts
index a3dcd10..50b5fc4 100644
--- a/backend/src/routes/user-playlists.ts
+++ b/backend/src/routes/user-playlists.ts
@@ -26,30 +26,30 @@ router.use(requireFeature('enablePlaylists'));
 const createPlaylistSchema = z.object({
   title: z.string().min(1).max(255),
   description: z.string().optional(),
-  icon: z.string().optional()
+  icon: z.string().optional(),
 });
 
 const updatePlaylistSchema = z.object({
   title: z.string().min(1).max(255).optional(),
   description: z.string().optional(),
-  icon: z.string().optional()
+  icon: z.string().optional(),
 });
 
 const addGamesSchema = z.object({
-  gameIds: z.array(z.string()).min(1)
+  gameIds: z.array(z.string()).min(1),
 });
 
 const removeGamesSchema = z.object({
-  gameIds: z.array(z.string()).min(1)
+  gameIds: z.array(z.string()).min(1),
 });
 
 const reorderGamesSchema = z.object({
-  gameIdOrder: z.array(z.string()).min(1)
+  gameIdOrder: z.array(z.string()).min(1),
 });
 
 const copyFlashpointPlaylistSchema = z.object({
   flashpointPlaylistId: z.string(),
-  newTitle: z.string().optional()
+  newTitle: z.string().optional(),
 });
 
 /**
@@ -61,7 +61,7 @@ router.get(
   authenticate,
   requirePermission('playlists.read'),
   logActivity('playlists.view.list', 'user_playlists', (req, res) => ({
-    playlistCount: res.locals.playlistCount || 0
+    playlistCount: res.locals.playlistCount || 0,
   })),
   asyncHandler(async (req, res) => {
     if (!req.user) {
@@ -106,7 +106,7 @@ router.get(
   logActivity('playlists.view.detail', 'user_playlists', (req, res) => ({
     playlistId: req.params.id,
     playlistTitle: res.locals.playlistTitle || null,
-    gameCount: res.locals.gameCount || 0
+    gameCount: res.locals.gameCount || 0,
   })),
   asyncHandler(async (req, res) => {
     if (!req.user) {
@@ -185,7 +185,7 @@ router.patch(
   requirePermission('playlists.update'),
   logActivity('playlists.update.metadata', 'user_playlists', (req, _res) => ({
     playlistId: req.params.id,
-    fieldsUpdated: Object.keys(req.body)
+    fieldsUpdated: Object.keys(req.body),
   })),
   asyncHandler(async (req, res) => {
     if (!req.user) {
@@ -248,7 +248,7 @@ router.post(
   requirePermission('playlists.update'),
   logActivity('playlists.games.add', 'user_playlist_games', (req) => ({
     playlistId: req.params.id,
-    gamesAdded: req.body.gameIds?.length || 0
+    gamesAdded: req.body.gameIds?.length || 0,
   })),
   asyncHandler(async (req, res) => {
     if (!req.user) {
@@ -273,7 +273,7 @@ router.post(
 
     res.json({
       ...updatedPlaylist,
-      games
+      games,
     });
   })
 );
@@ -289,7 +289,7 @@ router.delete(
   requirePermission('playlists.update'),
   logActivity('playlists.games.remove', 'user_playlist_games', (req) => ({
     playlistId: req.params.id,
-    gamesRemoved: req.body.gameIds?.length || 0
+    gamesRemoved: req.body.gameIds?.length || 0,
   })),
   asyncHandler(async (req, res) => {
     if (!req.user) {
@@ -314,7 +314,7 @@ router.delete(
 
     res.json({
       ...updatedPlaylist,
-      games
+      games,
     });
   })
 );
@@ -330,7 +330,7 @@ router.put(
   requirePermission('playlists.update'),
   logActivity('playlists.games.reorder', 'user_playlist_games', (req) => ({
     playlistId: req.params.id,
-    gameCount: req.body.gameIdOrder?.length || 0
+    gameCount: req.body.gameIdOrder?.length || 0,
   })),
   asyncHandler(async (req, res) => {
     if (!req.user) {
@@ -355,7 +355,7 @@ router.put(
 
     res.json({
       ...updatedPlaylist,
-      games
+      games,
     });
   })
 );
@@ -412,7 +412,7 @@ router.post(
 
     const shareData = playlistService.enableSharing(playlistId, req.user.id, {
       expiresAt,
-      showOwner
+      showOwner,
     });
 
     if (!shareData) {
@@ -504,7 +504,7 @@ router.patch(
 
     const shareData = playlistService.updateShareSettings(playlistId, req.user.id, {
       expiresAt,
-      showOwner
+      showOwner,
     });
 
     if (!shareData) {
diff --git a/backend/src/routes/users.ts b/backend/src/routes/users.ts
index f17bc2c..6bb083d 100644
--- a/backend/src/routes/users.ts
+++ b/backend/src/routes/users.ts
@@ -16,28 +16,28 @@ const createUserSchema = z.object({
   email: z.string().email(),
   password: z.string().min(6),
   roleId: z.number().int().positive(),
-  isActive: z.boolean().optional()
+  isActive: z.boolean().optional(),
 });
 
 const updateUserSchema = z.object({
   email: z.string().email().optional(),
   roleId: z.number().int().positive().optional(),
-  isActive: z.boolean().optional()
+  isActive: z.boolean().optional(),
 });
 
 const changePasswordSchema = z.object({
   currentPassword: z.string().min(6),
-  newPassword: z.string().min(6)
+  newPassword: z.string().min(6),
 });
 
 const updateThemeSchema = z.object({
   themeColor: z.string().min(1),
-  surfaceColor: z.string().min(1).optional()
+  surfaceColor: z.string().min(1).optional(),
 });
 
 const updateThemeSettingsSchema = z.object({
   mode: z.enum(['light', 'dark', 'system']),
-  primaryColor: z.string().min(1)
+  primaryColor: z.string().min(1),
 });
 
 /**
@@ -97,7 +97,7 @@ router.post(
       email: data.email,
       password: data.password,
       roleId: data.roleId,
-      isActive: data.isActive ?? true
+      isActive: data.isActive ?? true,
     });
 
     res.status(201).json(user);
@@ -114,7 +114,7 @@ router.patch(
   requirePermission('users.update'),
   logActivity('users.update.profile', 'users', (req) => ({
     userId: req.params.id,
-    fieldsUpdated: Object.keys(req.body)
+    fieldsUpdated: Object.keys(req.body),
   })),
   asyncHandler(async (req, res) => {
     const id = parseInt(req.params.id);
@@ -185,7 +185,7 @@ router.get(
     // Return in old format for compatibility
     res.json({
       themeColor: `${themeSettings.primaryColor}-500`,
-      surfaceColor: 'slate-700'
+      surfaceColor: 'slate-700',
     });
   })
 );
@@ -212,7 +212,7 @@ router.patch(
     res.json({
       success: true,
       themeColor: data.themeColor,
-      surfaceColor: data.surfaceColor || 'slate-700'
+      surfaceColor: data.surfaceColor || 'slate-700',
     });
   })
 );
@@ -245,11 +245,7 @@ router.patch(
     const userId = req.user!.id;
     const validated = updateThemeSettingsSchema.parse(req.body);
 
-    await userService.updateThemeSettings(
-      userId,
-      validated.mode,
-      validated.primaryColor
-    );
+    await userService.updateThemeSettings(userId, validated.mode, validated.primaryColor);
 
     const updated = await userService.getThemeSettings(userId);
     res.json(updated);
diff --git a/backend/src/server.ts b/backend/src/server.ts
index c8e6a5e..c8783c5 100644
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -29,36 +29,40 @@ async function startServer() {
   const app: Express = express();
 
   // Security middleware
-  app.use(helmet({
-    contentSecurityPolicy: false, // Will be configured in frontend via meta tag
-    crossOriginEmbedderPolicy: false,
-    frameguard: {
-      action: 'deny' // Equivalent to frame-ancestors 'none'
-    }
-  }));
+  app.use(
+    helmet({
+      contentSecurityPolicy: false, // Will be configured in frontend via meta tag
+      crossOriginEmbedderPolicy: false,
+      frameguard: {
+        action: 'deny', // Equivalent to frame-ancestors 'none'
+      },
+    })
+  );
 
   // CORS - dynamic origin to support configured domains
-  app.use(cors({
-    origin: (origin, callback) => {
-      // Allow same-origin and server-to-server requests
-      if (!origin) return callback(null, true);
+  app.use(
+    cors({
+      origin: (origin, callback) => {
+        // Allow same-origin and server-to-server requests
+        if (!origin) return callback(null, true);
 
-      // Always allow the configured domain from env
-      if (origin === config.domain) return callback(null, true);
+        // Always allow the configured domain from env
+        if (origin === config.domain) return callback(null, true);
 
-      // Check domains from the database
-      try {
-        const domainService = new DomainService();
-        const allowed = domainService.getAllowedOrigins();
-        if (allowed.has(origin)) return callback(null, true);
-      } catch {
-        // DB not ready during startup - fall through
-      }
+        // Check domains from the database
+        try {
+          const domainService = new DomainService();
+          const allowed = domainService.getAllowedOrigins();
+          if (allowed.has(origin)) return callback(null, true);
+        } catch {
+          // DB not ready during startup - fall through
+        }
 
-      callback(new Error('Not allowed by CORS'));
-    },
-    credentials: true
-  }));
+        callback(new Error('Not allowed by CORS'));
+      },
+      credentials: true,
+    })
+  );
 
   // Body parsing with size limits (prevent DoS attacks)
   app.use(express.json({ limit: '1mb' }));
@@ -116,7 +120,7 @@ async function startServer() {
 
   // Pre-warm game search cache for instant first page load
   // Run asynchronously to not block server startup
-  GameSearchCache.prewarmCache().catch(error => {
+  GameSearchCache.prewarmCache().catch((error) => {
     logger.warn('Failed to pre-warm game search cache:', error);
     // Non-fatal: server continues without pre-warmed cache
   });
@@ -148,9 +152,15 @@ async function startServer() {
     JobScheduler.registerJob({
       id: 'metadata-sync',
       name: 'Metadata Sync',
-      enabled: typeof jobSettings.metadataSyncEnabled === 'boolean' ? jobSettings.metadataSyncEnabled : false,
-      cronSchedule: typeof jobSettings.metadataSyncSchedule === 'string' ? jobSettings.metadataSyncSchedule : '0 * * * *', // Default: hourly
-      run: () => metadataSyncJob.run()
+      enabled:
+        typeof jobSettings.metadataSyncEnabled === 'boolean'
+          ? jobSettings.metadataSyncEnabled
+          : false,
+      cronSchedule:
+        typeof jobSettings.metadataSyncSchedule === 'string'
+          ? jobSettings.metadataSyncSchedule
+          : '0 * * * *', // Default: hourly
+      run: () => metadataSyncJob.run(),
     });
 
     // Register Ruffle update job
@@ -158,9 +168,15 @@ async function startServer() {
     JobScheduler.registerJob({
       id: 'ruffle-update',
       name: 'Ruffle Update',
-      enabled: typeof jobSettings.ruffleUpdateEnabled === 'boolean' ? jobSettings.ruffleUpdateEnabled : false,
-      cronSchedule: typeof jobSettings.ruffleUpdateSchedule === 'string' ? jobSettings.ruffleUpdateSchedule : '0 0 * * *', // Default: daily at midnight
-      run: () => ruffleUpdateJob.run()
+      enabled:
+        typeof jobSettings.ruffleUpdateEnabled === 'boolean'
+          ? jobSettings.ruffleUpdateEnabled
+          : false,
+      cronSchedule:
+        typeof jobSettings.ruffleUpdateSchedule === 'string'
+          ? jobSettings.ruffleUpdateSchedule
+          : '0 0 * * *', // Default: daily at midnight
+      run: () => ruffleUpdateJob.run(),
     });
 
     // Start all enabled jobs
@@ -184,7 +200,7 @@ async function startServer() {
       timestamp: new Date().toISOString(),
       flashpointPath: config.flashpointPath,
       databaseConnected: DatabaseService.isConnected(),
-      gameServiceUrl: config.gameServerUrl
+      gameServiceUrl: config.gameServerUrl,
     });
   });
 
@@ -224,14 +240,17 @@ async function startServer() {
 
   // Start cleanup scheduler for abandoned play sessions (every 6 hours)
   const playTrackingService = new PlayTrackingService();
-  const cleanupInterval = setInterval(() => {
-    playTrackingService.cleanupAbandonedSessions().catch(error => {
-      logger.error('Failed to cleanup abandoned sessions:', error);
-    });
-  }, 6 * 60 * 60 * 1000); // 6 hours
+  const cleanupInterval = setInterval(
+    () => {
+      playTrackingService.cleanupAbandonedSessions().catch((error) => {
+        logger.error('Failed to cleanup abandoned sessions:', error);
+      });
+    },
+    6 * 60 * 60 * 1000
+  ); // 6 hours
 
   // Run initial cleanup
-  playTrackingService.cleanupAbandonedSessions().catch(error => {
+  playTrackingService.cleanupAbandonedSessions().catch((error) => {
     logger.error('Failed to cleanup abandoned sessions:', error);
   });
 
diff --git a/backend/src/services/ActivityService.ts b/backend/src/services/ActivityService.ts
index 131fb30..16e4028 100644
--- a/backend/src/services/ActivityService.ts
+++ b/backend/src/services/ActivityService.ts
@@ -1,7 +1,12 @@
 import { UserDatabaseService } from './UserDatabaseService';
 import { ActivityLog, LogActivityData } from '../types/auth';
 import { PaginatedResponse, createPaginatedResponse, calculateOffset } from '../utils/pagination';
-import { ActivityBreakdownRow, UserBreakdownRow, ResourceBreakdownRow, IpBreakdownRow } from '../types/database-rows';
+import {
+  ActivityBreakdownRow,
+  UserBreakdownRow,
+  ResourceBreakdownRow,
+  IpBreakdownRow,
+} from '../types/database-rows';
 import { TimeRange, getHoursFromTimeRange } from '../utils/timeRangeUtils';
 import { AUTH_ACTIONS, categorizeAction } from '../utils/activityUtils';
 
@@ -58,9 +63,7 @@ export class ActivityService {
       params.push(filters.endDate);
     }
 
-    const sql = conditions.length > 0
-      ? 'WHERE ' + conditions.join(' AND ')
-      : '';
+    const sql = conditions.length > 0 ? 'WHERE ' + conditions.join(' AND ') : '';
 
     return { sql, params };
   }
@@ -83,7 +86,7 @@ export class ActivityService {
         data.resourceId || null,
         detailsJson,
         data.ipAddress || null,
-        data.userAgent || null
+        data.userAgent || null,
       ]
     );
   }
@@ -105,7 +108,7 @@ export class ActivityService {
       username: 'username',
       action: 'action',
       resource: 'resource',
-      ipAddress: 'ip_address'
+      ipAddress: 'ip_address',
     };
     const dbColumn = columnMap[sortBy] || 'created_at';
     const order = sortOrder.toUpperCase();
@@ -121,10 +124,12 @@ export class ActivityService {
       LIMIT ? OFFSET ?
     `;
 
-    const logs = UserDatabaseService.all<ActivityLog>(sql, [...whereParams, limit, offset]).map(log => ({
-      ...log,
-      details: log.details ? JSON.parse(log.details as string) : null
-    }));
+    const logs = UserDatabaseService.all<ActivityLog>(sql, [...whereParams, limit, offset]).map(
+      (log) => ({
+        ...log,
+        details: log.details ? JSON.parse(log.details as string) : null,
+      })
+    );
 
     const countSql = `SELECT COUNT(*) as count FROM activity_logs ${whereClause}`;
     const total = UserDatabaseService.get<{ count: number }>(countSql, whereParams)?.count || 0;
@@ -146,7 +151,10 @@ export class ActivityService {
   /**
    * Get aggregate statistics for dashboard
    */
-  async getStats(timeRange: TimeRange = '24h', customRange?: { startDate?: string; endDate?: string }) {
+  async getStats(
+    timeRange: TimeRange = '24h',
+    customRange?: { startDate?: string; endDate?: string }
+  ) {
     let startDate: string;
     let endDate: string = new Date().toISOString();
 
@@ -195,7 +203,9 @@ export class ActivityService {
     ) as { hour: number; count: number } | null;
 
     // Get previous period stats for trends
-    const previousPeriodStart = new Date(new Date(startDate).getTime() - (new Date(endDate).getTime() - new Date(startDate).getTime())).toISOString();
+    const previousPeriodStart = new Date(
+      new Date(startDate).getTime() - (new Date(endDate).getTime() - new Date(startDate).getTime())
+    ).toISOString();
     const previousStats = UserDatabaseService.get(
       `SELECT
         COUNT(*) as total,
@@ -235,21 +245,21 @@ export class ActivityService {
         ? {
             hour: peakHourData.hour,
             count: peakHourData.count,
-            formattedRange: formatHourRange(peakHourData.hour)
+            formattedRange: formatHourRange(peakHourData.hour),
           }
         : { hour: 0, count: 0, formattedRange: '12:00 AM - 1:00 AM' },
       authEvents: {
         total: currentStats?.authEvents || 0,
         successful: currentStats?.authSuccessful || 0,
-        failed: currentStats?.authFailed || 0
+        failed: currentStats?.authFailed || 0,
       },
       failedOperations: currentStats?.failedOperations || 0,
       systemEvents: currentStats?.systemEvents || 0,
       trends: {
         totalChange: calculateTrend(currentStats?.total || 0, previousStats?.total || 0),
         userChange: calculateTrend(currentStats?.uniqueUsers || 0, previousStats?.uniqueUsers || 0),
-        authChange: calculateTrend(currentStats?.authEvents || 0, previousStats?.authEvents || 0)
-      }
+        authChange: calculateTrend(currentStats?.authEvents || 0, previousStats?.authEvents || 0),
+      },
     };
   }
 
@@ -264,7 +274,7 @@ export class ActivityService {
     if (granularity === 'hour') {
       groupFormat = "datetime(strftime('%Y-%m-%d %H:00:00', created_at))";
     } else {
-      groupFormat = "date(created_at)";
+      groupFormat = 'date(created_at)';
     }
 
     const trendData = UserDatabaseService.all(
@@ -293,8 +303,8 @@ export class ActivityService {
         granularity,
         startDate,
         endDate: new Date().toISOString(),
-        dataPoints: trendData.length
-      }
+        dataPoints: trendData.length,
+      },
     };
   }
 
@@ -353,7 +363,7 @@ export class ActivityService {
     }>;
 
     return {
-      data: topActions.map(action => ({
+      data: topActions.map((action) => ({
         action: action.action,
         count: action.count,
         percentage: totalActivities > 0 ? (action.count / totalActivities) * 100 : 0,
@@ -361,13 +371,13 @@ export class ActivityService {
         topResource: action.topResource,
         exampleActivity: {
           username: action.exampleUsername || 'System',
-          timestamp: action.exampleTimestamp
-        }
+          timestamp: action.exampleTimestamp,
+        },
       })),
       meta: {
         totalActivities,
-        uniqueActions: topActions.length
-      }
+        uniqueActions: topActions.length,
+      },
     };
   }
 
@@ -450,33 +460,41 @@ export class ActivityService {
         throw new Error(`Invalid groupBy parameter: ${groupBy}`);
     }
 
-    const results = UserDatabaseService.all(sql, groupBy === 'user' || groupBy === 'resource' ? [startDate, startDate, limit] : [startDate, limit]) as ActivityBreakdownRow[];
+    const results = UserDatabaseService.all(
+      sql,
+      groupBy === 'user' || groupBy === 'resource'
+        ? [startDate, startDate, limit]
+        : [startDate, limit]
+    ) as ActivityBreakdownRow[];
 
     return {
       data: results.map((row: ActivityBreakdownRow) => ({
         key: row.key || 'Unknown',
         count: row.count,
         percentage: totalActivities > 0 ? (row.count / totalActivities) * 100 : 0,
-        metadata: groupBy === 'user'
-          ? {
-              userId: (row as UserBreakdownRow).userId,
-              lastActivity: (row as UserBreakdownRow).lastActivity,
-              topAction: (row as UserBreakdownRow).topAction
-            }
-          : groupBy === 'ip'
-          ? {
-              associatedUserCount: (row as IpBreakdownRow).associatedUserCount,
-              associatedUsers: (row as IpBreakdownRow).associatedUsers ? (row as IpBreakdownRow).associatedUsers.split(',').slice(0, 5) : [],
-              failedAttempts: (row as IpBreakdownRow).failedAttempts
-            }
-          : {
-              topAction: (row as ResourceBreakdownRow).topAction
-            }
+        metadata:
+          groupBy === 'user'
+            ? {
+                userId: (row as UserBreakdownRow).userId,
+                lastActivity: (row as UserBreakdownRow).lastActivity,
+                topAction: (row as UserBreakdownRow).topAction,
+              }
+            : groupBy === 'ip'
+              ? {
+                  associatedUserCount: (row as IpBreakdownRow).associatedUserCount,
+                  associatedUsers: (row as IpBreakdownRow).associatedUsers
+                    ? (row as IpBreakdownRow).associatedUsers.split(',').slice(0, 5)
+                    : [],
+                  failedAttempts: (row as IpBreakdownRow).failedAttempts,
+                }
+              : {
+                  topAction: (row as ResourceBreakdownRow).topAction,
+                },
       })),
       meta: {
         groupBy,
-        total: totalActivities
-      }
+        total: totalActivities,
+      },
     };
   }
 }
diff --git a/backend/src/services/AuthService.ts b/backend/src/services/AuthService.ts
index 288b0d9..3addea2 100644
--- a/backend/src/services/AuthService.ts
+++ b/backend/src/services/AuthService.ts
@@ -20,7 +20,10 @@ export class AuthService {
   /**
    * Login user with username/password
    */
-  async login(credentials: LoginCredentials, ipAddress: string): Promise<{ user: AuthUser; tokens: AuthTokens }> {
+  async login(
+    credentials: LoginCredentials,
+    ipAddress: string
+  ): Promise<{ user: AuthUser; tokens: AuthTokens }> {
     try {
       const { username, password } = credentials;
 
@@ -52,10 +55,10 @@ export class AuthService {
       await this.recordLoginAttempt(username, ipAddress, true);
 
       // Update last login
-      UserDatabaseService.run(
-        "UPDATE users SET last_login_at = ? WHERE id = ?",
-        [new Date().toISOString(), user.id]
-      );
+      UserDatabaseService.run('UPDATE users SET last_login_at = ? WHERE id = ?', [
+        new Date().toISOString(),
+        user.id,
+      ]);
 
       // Get user permissions
       const permissions = this.getUserPermissions(user.id);
@@ -71,7 +74,7 @@ export class AuthService {
         role: user.role_name,
         permissions,
         themeColor: user.theme_color || 'blue-500',
-        surfaceColor: user.surface_color || 'slate-700'
+        surfaceColor: user.surface_color || 'slate-700',
       };
 
       return { user: authUser, tokens };
@@ -79,7 +82,7 @@ export class AuthService {
       logger.error('[AuthService] Login error:', {
         error: error instanceof Error ? error.message : String(error),
         stack: error instanceof Error ? error.stack : undefined,
-        username: credentials.username
+        username: credentials.username,
       });
       throw error;
     }
@@ -108,19 +111,17 @@ export class AuthService {
     }
 
     // Check if username exists
-    const existingUser = UserDatabaseService.get(
-      'SELECT id FROM users WHERE username = ?',
-      [data.username]
-    );
+    const existingUser = UserDatabaseService.get('SELECT id FROM users WHERE username = ?', [
+      data.username,
+    ]);
     if (existingUser) {
       throw new AppError(409, 'Username already exists');
     }
 
     // Check if email exists
-    const existingEmail = UserDatabaseService.get(
-      'SELECT id FROM users WHERE email = ?',
-      [data.email]
-    );
+    const existingEmail = UserDatabaseService.get('SELECT id FROM users WHERE email = ?', [
+      data.email,
+    ]);
     if (existingEmail) {
       throw new AppError(409, 'Email already exists');
     }
@@ -158,7 +159,9 @@ export class AuthService {
       [userId, defaultTheme, userId, defaultPrimaryColor]
     );
 
-    logger.info(`[AuthService] Created user ${data.username} with default theme: ${defaultTheme}, primary color: ${defaultPrimaryColor}`);
+    logger.info(
+      `[AuthService] Created user ${data.username} with default theme: ${defaultTheme}, primary color: ${defaultPrimaryColor}`
+    );
 
     // Get created user
     const user = UserDatabaseService.get(
@@ -182,7 +185,7 @@ export class AuthService {
       role: user.role_name,
       permissions,
       themeColor: user.theme_color || 'blue-500',
-      surfaceColor: user.surface_color || 'slate-700'
+      surfaceColor: user.surface_color || 'slate-700',
     };
 
     return { user: authUser, tokens };
@@ -192,10 +195,10 @@ export class AuthService {
    * Logout user (revoke refresh token)
    */
   async logout(refreshToken: string): Promise<void> {
-    UserDatabaseService.run(
-      "UPDATE refresh_tokens SET revoked_at = ? WHERE token = ?",
-      [new Date().toISOString(), refreshToken]
-    );
+    UserDatabaseService.run('UPDATE refresh_tokens SET revoked_at = ? WHERE token = ?', [
+      new Date().toISOString(),
+      refreshToken,
+    ]);
   }
 
   /**
@@ -204,7 +207,7 @@ export class AuthService {
    */
   async revokeAllUserTokens(userId: number): Promise<void> {
     UserDatabaseService.run(
-      "UPDATE refresh_tokens SET revoked_at = ? WHERE user_id = ? AND revoked_at IS NULL",
+      'UPDATE refresh_tokens SET revoked_at = ? WHERE user_id = ? AND revoked_at IS NULL',
       [new Date().toISOString(), userId]
     );
 
@@ -240,10 +243,10 @@ export class AuthService {
     }
 
     // Revoke the old refresh token (security best practice)
-    UserDatabaseService.run(
-      "UPDATE refresh_tokens SET revoked_at = ? WHERE token = ?",
-      [new Date().toISOString(), refreshToken]
-    );
+    UserDatabaseService.run('UPDATE refresh_tokens SET revoked_at = ? WHERE token = ?', [
+      new Date().toISOString(),
+      refreshToken,
+    ]);
 
     logger.debug(`[AuthService] Revoked old refresh token for user ${user.id}`);
 
@@ -278,7 +281,7 @@ export class AuthService {
         username: user.username,
         email: user.email,
         role: user.role_name,
-        permissions
+        permissions,
       };
     } catch (error) {
       throw new AppError(401, 'Invalid or expired token');
@@ -305,7 +308,7 @@ export class AuthService {
       [userId]
     );
 
-    const permissionNames = permissions.map(p => p.name);
+    const permissionNames = permissions.map((p) => p.name);
 
     // Store in cache
     PermissionCache.setUserPermissions(userId, permissionNames);
@@ -320,7 +323,7 @@ export class AuthService {
     const accessToken = generateAccessToken({
       userId: user.id,
       username: user.username,
-      role: user.role_name
+      role: user.role_name,
     });
 
     const refreshToken = generateRefreshToken();
@@ -335,7 +338,7 @@ export class AuthService {
     return {
       accessToken,
       refreshToken,
-      expiresIn: 3600 // 1 hour
+      expiresIn: 3600, // 1 hour
     };
   }
 
@@ -349,7 +352,10 @@ export class AuthService {
 
     // Validate and sanitize lockoutDuration to prevent SQL injection
     // Ensure it's a number between 1 and 1440 (24 hours)
-    const safeLockoutDuration = Math.min(Math.max(parseInt(String(lockoutDuration), 10) || 15, 1), 1440);
+    const safeLockoutDuration = Math.min(
+      Math.max(parseInt(String(lockoutDuration), 10) || 15, 1),
+      1440
+    );
 
     // Count failed attempts in lockout window - using parameterized query
     const failedAttempts = UserDatabaseService.get(
@@ -361,14 +367,21 @@ export class AuthService {
     );
 
     if (failedAttempts?.count >= maxAttempts) {
-      throw new AppError(429, `Too many login attempts. Please try again in ${safeLockoutDuration} minutes.`);
+      throw new AppError(
+        429,
+        `Too many login attempts. Please try again in ${safeLockoutDuration} minutes.`
+      );
     }
   }
 
   /**
    * Record login attempt
    */
-  private async recordLoginAttempt(username: string, ipAddress: string, success: boolean): Promise<void> {
+  private async recordLoginAttempt(
+    username: string,
+    ipAddress: string,
+    success: boolean
+  ): Promise<void> {
     UserDatabaseService.run(
       'INSERT INTO login_attempts (username, ip_address, success) VALUES (?, ?, ?)',
       [username, ipAddress, success ? 1 : 0]
@@ -389,10 +402,20 @@ export class AuthService {
 
       // Return settings with defaults if not found
       return {
-        guest_access_enabled: authSettings.guestAccessEnabled !== undefined ? (authSettings.guestAccessEnabled ? 1 : 0) : 1,
-        user_registration_enabled: authSettings.userRegistrationEnabled !== undefined ? (authSettings.userRegistrationEnabled ? 1 : 0) : 1,
+        guest_access_enabled:
+          authSettings.guestAccessEnabled !== undefined
+            ? authSettings.guestAccessEnabled
+              ? 1
+              : 0
+            : 1,
+        user_registration_enabled:
+          authSettings.userRegistrationEnabled !== undefined
+            ? authSettings.userRegistrationEnabled
+              ? 1
+              : 0
+            : 1,
         max_login_attempts: authSettings.maxLoginAttempts || 5,
-        lockout_duration_minutes: authSettings.lockoutDurationMinutes || 15
+        lockout_duration_minutes: authSettings.lockoutDurationMinutes || 15,
       };
     } catch (error) {
       logger.error('Failed to get auth settings, using defaults:', error);
@@ -401,7 +424,7 @@ export class AuthService {
         guest_access_enabled: 1,
         user_registration_enabled: 1,
         max_login_attempts: 5,
-        lockout_duration_minutes: 15
+        lockout_duration_minutes: 15,
       };
     }
   }
diff --git a/backend/src/services/AuthSettingsService.ts b/backend/src/services/AuthSettingsService.ts
index 6ba257e..9f1052b 100644
--- a/backend/src/services/AuthSettingsService.ts
+++ b/backend/src/services/AuthSettingsService.ts
@@ -24,14 +24,30 @@ export class AuthSettingsService {
     const latestUpdate = this.getLatestUpdate();
 
     return {
-      guestAccessEnabled: typeof authSettings.guestAccessEnabled === 'boolean' ? authSettings.guestAccessEnabled : true,
-      userRegistrationEnabled: typeof authSettings.userRegistrationEnabled === 'boolean' ? authSettings.userRegistrationEnabled : true,
-      requireEmailVerification: typeof authSettings.requireEmailVerification === 'boolean' ? authSettings.requireEmailVerification : false,
-      sessionTimeoutMinutes: typeof authSettings.sessionTimeoutMinutes === 'number' ? authSettings.sessionTimeoutMinutes : 60,
-      maxLoginAttempts: typeof authSettings.maxLoginAttempts === 'number' ? authSettings.maxLoginAttempts : 5,
-      lockoutDurationMinutes: typeof authSettings.lockoutDurationMinutes === 'number' ? authSettings.lockoutDurationMinutes : 15,
+      guestAccessEnabled:
+        typeof authSettings.guestAccessEnabled === 'boolean'
+          ? authSettings.guestAccessEnabled
+          : true,
+      userRegistrationEnabled:
+        typeof authSettings.userRegistrationEnabled === 'boolean'
+          ? authSettings.userRegistrationEnabled
+          : true,
+      requireEmailVerification:
+        typeof authSettings.requireEmailVerification === 'boolean'
+          ? authSettings.requireEmailVerification
+          : false,
+      sessionTimeoutMinutes:
+        typeof authSettings.sessionTimeoutMinutes === 'number'
+          ? authSettings.sessionTimeoutMinutes
+          : 60,
+      maxLoginAttempts:
+        typeof authSettings.maxLoginAttempts === 'number' ? authSettings.maxLoginAttempts : 5,
+      lockoutDurationMinutes:
+        typeof authSettings.lockoutDurationMinutes === 'number'
+          ? authSettings.lockoutDurationMinutes
+          : 15,
       updatedAt: latestUpdate.updatedAt,
-      updatedBy: latestUpdate.updatedBy
+      updatedBy: latestUpdate.updatedBy,
     };
   }
 
@@ -69,7 +85,7 @@ export class AuthSettingsService {
 
     return {
       updatedAt: result?.updated_at || new Date().toISOString(),
-      updatedBy: result?.updated_by
+      updatedBy: result?.updated_by,
     };
   }
 }
diff --git a/backend/src/services/CachedSystemSettingsService.ts b/backend/src/services/CachedSystemSettingsService.ts
index e662786..85b013e 100644
--- a/backend/src/services/CachedSystemSettingsService.ts
+++ b/backend/src/services/CachedSystemSettingsService.ts
@@ -42,7 +42,7 @@ export class CachedSystemSettingsService extends SystemSettingsService {
     if (value !== null) {
       this.cache.set(key, {
         value,
-        timestamp: Date.now()
+        timestamp: Date.now(),
       });
     }
 
@@ -64,7 +64,7 @@ export class CachedSystemSettingsService extends SystemSettingsService {
 
     this.categoryCache.set(category, {
       value,
-      timestamp: Date.now()
+      timestamp: Date.now(),
     });
 
     return value;
@@ -137,7 +137,7 @@ export class CachedSystemSettingsService extends SystemSettingsService {
       keyCount: this.cache.size,
       categoryCount: this.categoryCache.size,
       hitRate: 0, // Would need hit/miss tracking for accurate calculation
-      size: this.estimateCacheSize()
+      size: this.estimateCacheSize(),
     };
   }
 
diff --git a/backend/src/services/CommunityPlaylistService.ts b/backend/src/services/CommunityPlaylistService.ts
index 378ff09..fbc9da8 100644
--- a/backend/src/services/CommunityPlaylistService.ts
+++ b/backend/src/services/CommunityPlaylistService.ts
@@ -46,18 +46,20 @@ export class CommunityPlaylistService {
       const response = await axios.get(PLAYLISTS_WIKI_URL, {
         timeout: 30000,
         headers: {
-          'User-Agent': 'Flashpoint-Webapp/1.0'
-        }
+          'User-Agent': 'Flashpoint-Webapp/1.0',
+        },
       });
 
       // Parse HTML and extract playlists
       const categories = this.parsePlaylistTables(response.data);
 
-      logger.info(`[CommunityPlaylist] Found ${categories.length} categories with ${categories.reduce((sum, cat) => sum + cat.playlists.length, 0)} total playlists`);
+      logger.info(
+        `[CommunityPlaylist] Found ${categories.length} categories with ${categories.reduce((sum, cat) => sum + cat.playlists.length, 0)} total playlists`
+      );
 
       return {
         categories,
-        lastFetched: new Date().toISOString()
+        lastFetched: new Date().toISOString(),
       };
     } catch (error) {
       logger.error('[CommunityPlaylist] Failed to fetch community playlists:', error);
@@ -86,8 +88,8 @@ export class CommunityPlaylistService {
       const response = await axios.get(downloadUrl, {
         timeout: 60000,
         headers: {
-          'User-Agent': 'Flashpoint-Webapp/1.0'
-        }
+          'User-Agent': 'Flashpoint-Webapp/1.0',
+        },
       });
 
       const playlistData = response.data;
@@ -97,7 +99,7 @@ export class CommunityPlaylistService {
         logger.error('[CommunityPlaylist] Invalid playlist structure');
         return {
           success: false,
-          error: 'Invalid playlist format'
+          error: 'Invalid playlist format',
         };
       }
 
@@ -112,7 +114,7 @@ export class CommunityPlaylistService {
         return {
           success: false,
           conflict: true,
-          error: 'A playlist with this ID already exists'
+          error: 'A playlist with this ID already exists',
         };
       } catch {
         // File doesn't exist - good to proceed
@@ -121,11 +123,13 @@ export class CommunityPlaylistService {
       // Save playlist to disk
       await fs.writeFile(playlistFilePath, JSON.stringify(playlistData, null, '\t'), 'utf-8');
 
-      logger.info(`[CommunityPlaylist] Downloaded playlist: ${playlistData.title} (${playlistData.id})`);
+      logger.info(
+        `[CommunityPlaylist] Downloaded playlist: ${playlistData.title} (${playlistData.id})`
+      );
 
       return {
         success: true,
-        playlist: playlistData
+        playlist: playlistData,
       };
     } catch (error) {
       logger.error('[CommunityPlaylist] Failed to download playlist:', error);
@@ -134,26 +138,26 @@ export class CommunityPlaylistService {
         if (error.code === 'ECONNABORTED') {
           return {
             success: false,
-            error: 'Download timeout - please try again'
+            error: 'Download timeout - please try again',
           };
         }
         if (error.response?.status === 404) {
           return {
             success: false,
-            error: 'Playlist not found on server'
+            error: 'Playlist not found on server',
           };
         }
         if (error.response?.status && error.response.status >= 500) {
           return {
             success: false,
-            error: 'Server error - please try again later'
+            error: 'Server error - please try again later',
           };
         }
       }
 
       return {
         success: false,
-        error: 'Failed to download playlist'
+        error: 'Failed to download playlist',
       };
     }
   }
@@ -177,9 +181,11 @@ export class CommunityPlaylistService {
         const categoryName = headerText.replace(/\[edit.*?\]/g, '').trim();
 
         // Skip certain headers
-        if (categoryName.toLowerCase().includes('contents') ||
-            categoryName.toLowerCase().includes('navigation') ||
-            categoryName.toLowerCase().includes('tutorial')) {
+        if (
+          categoryName.toLowerCase().includes('contents') ||
+          categoryName.toLowerCase().includes('navigation') ||
+          categoryName.toLowerCase().includes('tutorial')
+        ) {
           return;
         }
 
@@ -202,36 +208,39 @@ export class CommunityPlaylistService {
         const playlists: CommunityPlaylist[] = [];
 
         // Parse table rows (skip header row)
-        $(elem).find('tr').slice(1).each((j, row) => {
-          const cells = $(row).find('td');
+        $(elem)
+          .find('tr')
+          .slice(1)
+          .each((j, row) => {
+            const cells = $(row).find('td');
 
-          if (cells.length >= 4) {
-            const name = $(cells[0]).text().trim();
-            const author = $(cells[1]).text().trim();
-            const description = $(cells[2]).text().trim();
-            const downloadLink = $(cells[3]).find('a').attr('href');
+            if (cells.length >= 4) {
+              const name = $(cells[0]).text().trim();
+              const author = $(cells[1]).text().trim();
+              const description = $(cells[2]).text().trim();
+              const downloadLink = $(cells[3]).find('a').attr('href');
 
-            if (name && downloadLink) {
-              // Make URL absolute
-              const absoluteUrl = this.makeAbsoluteUrl(downloadLink);
+              if (name && downloadLink) {
+                // Make URL absolute
+                const absoluteUrl = this.makeAbsoluteUrl(downloadLink);
 
-              // Determine category name
-              let categoryName = mainCategory;
-              if (mainCategory === 'Games' && subCategory) {
-                // For Games category, create separate categories for each subcategory
-                categoryName = `Games - ${subCategory}`;
+                // Determine category name
+                let categoryName = mainCategory;
+                if (mainCategory === 'Games' && subCategory) {
+                  // For Games category, create separate categories for each subcategory
+                  categoryName = `Games - ${subCategory}`;
+                }
+
+                playlists.push({
+                  name,
+                  author: author || 'Unknown',
+                  description: description || '',
+                  downloadUrl: absoluteUrl,
+                  category: categoryName,
+                });
               }
-
-              playlists.push({
-                name,
-                author: author || 'Unknown',
-                description: description || '',
-                downloadUrl: absoluteUrl,
-                category: categoryName
-              });
             }
-          }
-        });
+          });
 
         // Only add category if it has playlists (non-empty)
         if (playlists.length > 0) {
@@ -242,11 +251,11 @@ export class CommunityPlaylistService {
           }
 
           // Find or create category
-          let category = categories.find(cat => cat.name === categoryName);
+          let category = categories.find((cat) => cat.name === categoryName);
           if (!category) {
             category = {
               name: categoryName,
-              playlists: []
+              playlists: [],
             };
             categories.push(category);
           }
@@ -258,7 +267,7 @@ export class CommunityPlaylistService {
     });
 
     // Filter out empty categories
-    return categories.filter(cat => cat.playlists.length > 0);
+    return categories.filter((cat) => cat.playlists.length > 0);
   }
 
   /**
diff --git a/backend/src/services/DatabaseService.ts b/backend/src/services/DatabaseService.ts
index 1f882fb..005c675 100644
--- a/backend/src/services/DatabaseService.ts
+++ b/backend/src/services/DatabaseService.ts
@@ -52,7 +52,7 @@ export class DatabaseService {
       logger.info('Database connection opened successfully', {
         sourcePath: this.sourceDbPath,
         activePath: this.activeDbPath,
-        usingLocalCopy: this.isUsingLocalCopy
+        usingLocalCopy: this.isUsingLocalCopy,
       });
 
       // Start watching source database for changes
@@ -128,7 +128,7 @@ export class DatabaseService {
         mmapSize: this.isUsingLocalCopy ? config.sqliteMmapSize : 0,
         tempStore: 'MEMORY',
         journalMode: 'DELETE',
-        synchronous: 'NORMAL'
+        synchronous: 'NORMAL',
       });
     } catch (error) {
       logger.error('Failed to apply some PRAGMA optimizations:', error);
@@ -180,7 +180,7 @@ export class DatabaseService {
       if (sourceStats.mtimeMs > localStats.mtimeMs) {
         logger.info('Source database is newer than local copy, will update', {
           sourceModified: new Date(sourceStats.mtimeMs).toISOString(),
-          localModified: new Date(localStats.mtimeMs).toISOString()
+          localModified: new Date(localStats.mtimeMs).toISOString(),
         });
         return true;
       }
@@ -189,7 +189,7 @@ export class DatabaseService {
       if (sourceStats.size !== localStats.size) {
         logger.info('Source database size differs from local copy, will update', {
           sourceSize: sourceStats.size,
-          localSize: localStats.size
+          localSize: localStats.size,
         });
         return true;
       }
@@ -211,7 +211,7 @@ export class DatabaseService {
     try {
       logger.info('Copying database to local storage...', {
         source: this.sourceDbPath,
-        destination: config.localDbPath
+        destination: config.localDbPath,
       });
 
       // Copy to temp file first (atomic operation)
@@ -226,7 +226,7 @@ export class DatabaseService {
 
       logger.info(`Database copied to local storage in ${duration}ms`, {
         size: `${sizeMB} MB`,
-        path: config.localDbPath
+        path: config.localDbPath,
       });
     } catch (error) {
       // Clean up temp file if it exists
@@ -266,7 +266,7 @@ export class DatabaseService {
       });
 
       logger.info('Database file watcher started', {
-        watching: this.sourceDbPath
+        watching: this.sourceDbPath,
       });
     } catch (error) {
       logger.error('Failed to start database file watcher:', error);
@@ -418,7 +418,7 @@ export class DatabaseService {
       sourcePath: this.sourceDbPath,
       activePath: this.activeDbPath,
       usingLocalCopy: this.isUsingLocalCopy,
-      lastModified: this.lastModifiedTime ? new Date(this.lastModifiedTime) : null
+      lastModified: this.lastModifiedTime ? new Date(this.lastModifiedTime) : null,
     };
   }
 
@@ -437,61 +437,77 @@ export class DatabaseService {
   static exec<T = any>(sql: string, params: any[] = []): T[] {
     const db = this.getDatabase();
 
-    return measureQueryPerformance(() => {
-      try {
-        const stmt = db.prepare(sql);
-        return stmt.all(params) as T[];
-      } catch (error) {
-        logger.error('Database query error:', { sql, params, error });
-        throw error;
-      }
-    }, sql, params);
+    return measureQueryPerformance(
+      () => {
+        try {
+          const stmt = db.prepare(sql);
+          return stmt.all(params) as T[];
+        } catch (error) {
+          logger.error('Database query error:', { sql, params, error });
+          throw error;
+        }
+      },
+      sql,
+      params
+    );
   }
 
   // Helper method to get a single row
   static get<T = any>(sql: string, params: any[] = []): T | undefined {
     const db = this.getDatabase();
 
-    return measureQueryPerformance(() => {
-      try {
-        const stmt = db.prepare(sql);
-        const result = stmt.get(params);
-        return result as T | undefined;
-      } catch (error) {
-        logger.error('Database get error:', error);
-        throw error;
-      }
-    }, sql, params);
+    return measureQueryPerformance(
+      () => {
+        try {
+          const stmt = db.prepare(sql);
+          const result = stmt.get(params);
+          return result as T | undefined;
+        } catch (error) {
+          logger.error('Database get error:', error);
+          throw error;
+        }
+      },
+      sql,
+      params
+    );
   }
 
   // Helper method to get all rows
   static all<T = any>(sql: string, params: any[] = []): T[] {
     const db = this.getDatabase();
 
-    return measureQueryPerformance(() => {
-      try {
-        const stmt = db.prepare(sql);
-        return stmt.all(params) as T[];
-      } catch (error) {
-        logger.error('Database all error:', error);
-        throw error;
-      }
-    }, sql, params);
+    return measureQueryPerformance(
+      () => {
+        try {
+          const stmt = db.prepare(sql);
+          return stmt.all(params) as T[];
+        } catch (error) {
+          logger.error('Database all error:', error);
+          throw error;
+        }
+      },
+      sql,
+      params
+    );
   }
 
   // Helper method to run INSERT/UPDATE/DELETE queries (doesn't return rows)
   static run(sql: string, params: any[] = []): void {
     const db = this.getDatabase();
 
-    measureQueryPerformance(() => {
-      try {
-        const stmt = db.prepare(sql);
-        stmt.run(params);
-      } catch (error) {
-        logger.error('Database run error:', { sql, params, error });
-        throw error;
-      }
-    }, sql, params);
+    measureQueryPerformance(
+      () => {
+        try {
+          const stmt = db.prepare(sql);
+          stmt.run(params);
+        } catch (error) {
+          logger.error('Database run error:', { sql, params, error });
+          throw error;
+        }
+      },
+      sql,
+      params
+    );
   }
 
   // Save database changes to disk
diff --git a/backend/src/services/DomainService.ts b/backend/src/services/DomainService.ts
index 89fad79..a970f41 100644
--- a/backend/src/services/DomainService.ts
+++ b/backend/src/services/DomainService.ts
@@ -50,7 +50,9 @@ export class DomainService {
     }
 
     const rows = this.db
-      .prepare('SELECT id, hostname, is_default, created_at FROM domains ORDER BY is_default DESC, hostname ASC')
+      .prepare(
+        'SELECT id, hostname, is_default, created_at FROM domains ORDER BY is_default DESC, hostname ASC'
+      )
       .all() as DomainRow[];
 
     cachedDomains = rows.map(this.mapRow);
@@ -102,17 +104,15 @@ export class DomainService {
     const validated = this.validateHostname(hostname);
 
     // Check for duplicate
-    const existing = this.db
-      .prepare('SELECT id FROM domains WHERE hostname = ?')
-      .get(validated) as { id: number } | undefined;
+    const existing = this.db.prepare('SELECT id FROM domains WHERE hostname = ?').get(validated) as
+      | { id: number }
+      | undefined;
 
     if (existing) {
       throw new Error(`Domain "${validated}" already exists`);
     }
 
-    const stmt = this.db.prepare(
-      'INSERT INTO domains (hostname, created_by) VALUES (?, ?)'
-    );
+    const stmt = this.db.prepare('INSERT INTO domains (hostname, created_by) VALUES (?, ?)');
     const result = stmt.run(validated, createdBy);
 
     this.invalidateCache();
@@ -129,9 +129,9 @@ export class DomainService {
    * Delete a domain by ID
    */
   deleteDomain(id: number): boolean {
-    const existing = this.db
-      .prepare('SELECT hostname FROM domains WHERE id = ?')
-      .get(id) as { hostname: string } | undefined;
+    const existing = this.db.prepare('SELECT hostname FROM domains WHERE id = ?').get(id) as
+      | { hostname: string }
+      | undefined;
 
     if (!existing) {
       return false;
diff --git a/backend/src/services/DownloadManager.ts b/backend/src/services/DownloadManager.ts
index f2f3ca3..b445175 100644
--- a/backend/src/services/DownloadManager.ts
+++ b/backend/src/services/DownloadManager.ts
@@ -99,7 +99,7 @@ export class DownloadManager {
         gameDataId,
         gameId: gameData.gameId,
         filename,
-        sourceCount: sources.length
+        sourceCount: sources.length,
       });
 
       // Collect errors from failed sources
@@ -112,7 +112,7 @@ export class DownloadManager {
         try {
           logger.info(`Attempting download from source ${i + 1}/${sources.length}`, {
             source: source.name,
-            gameDataId
+            gameDataId,
           });
 
           // Update progress
@@ -123,7 +123,7 @@ export class DownloadManager {
             filename,
             source: source.name,
             bytesDownloaded: 0,
-            totalBytes: 0
+            totalBytes: 0,
           });
 
           // Construct URL
@@ -131,27 +131,22 @@ export class DownloadManager {
           logger.debug('Download URL constructed', { url, source: source.name });
 
           // Download to temp file
-          await this.downloadFile(
-            url,
-            tempFilePath,
-            controller.signal,
-            (downloaded, total) => {
-              const percent = total > 0 ? Math.floor((downloaded / total) * 100) : 0;
-              onProgress?.(percent);
-              onDetails?.({
-                gameId: gameData.gameId,
-                gameDataId,
-                filename,
-                source: source.name,
-                bytesDownloaded: downloaded,
-                totalBytes: total
-              });
-            }
-          );
+          await this.downloadFile(url, tempFilePath, controller.signal, (downloaded, total) => {
+            const percent = total > 0 ? Math.floor((downloaded / total) * 100) : 0;
+            onProgress?.(percent);
+            onDetails?.({
+              gameId: gameData.gameId,
+              gameDataId,
+              filename,
+              source: source.name,
+              bytesDownloaded: downloaded,
+              totalBytes: total,
+            });
+          });
 
           logger.info('Download completed, validating hash', {
             gameDataId,
-            source: source.name
+            source: source.name,
           });
 
           // Update status to validating
@@ -161,7 +156,7 @@ export class DownloadManager {
             filename,
             source: source.name,
             bytesDownloaded: 0,
-            totalBytes: 0
+            totalBytes: 0,
           });
 
           // Validate hash
@@ -169,7 +164,7 @@ export class DownloadManager {
 
           logger.info('Hash validation successful, importing file', {
             gameDataId,
-            source: source.name
+            source: source.name,
           });
 
           // Import to final location
@@ -181,7 +176,7 @@ export class DownloadManager {
           logger.info('Download workflow completed successfully', {
             gameDataId,
             finalPath,
-            source: source.name
+            source: source.name,
           });
 
           // Success! Return final path
@@ -191,12 +186,12 @@ export class DownloadManager {
           const errorMessage = error instanceof Error ? error.message : 'Unknown error';
           logger.warn(`Download failed from source: ${source.name}`, {
             gameDataId,
-            error: errorMessage
+            error: errorMessage,
           });
 
           errors.push({
             source: source.name,
-            error: errorMessage
+            error: errorMessage,
           });
 
           // Clean up temp file for next attempt
@@ -213,9 +208,7 @@ export class DownloadManager {
       }
 
       // All sources failed
-      const errorSummary = errors
-        .map(e => `${e.source}: ${e.error}`)
-        .join('\n');
+      const errorSummary = errors.map((e) => `${e.source}: ${e.error}`).join('\n');
 
       throw new Error(
         `Failed to download game data from all ${sources.length} sources:\n${errorSummary}`
@@ -245,8 +238,8 @@ export class DownloadManager {
       timeout: this.DOWNLOAD_TIMEOUT_MS,
       signal: abortSignal as any,
       headers: {
-        'User-Agent': 'Flashpoint-WebApp/1.0'
-      }
+        'User-Agent': 'Flashpoint-WebApp/1.0',
+      },
     });
 
     const totalBytes = parseInt(response.headers['content-length'] || '0', 10);
diff --git a/backend/src/services/FallbackCache.ts b/backend/src/services/FallbackCache.ts
index 4a8058b..b5c0f20 100644
--- a/backend/src/services/FallbackCache.ts
+++ b/backend/src/services/FallbackCache.ts
@@ -16,7 +16,7 @@ export class FallbackCache<T = any> {
       max: maxSize,
       ttl: this.FALLBACK_TTL,
       updateAgeOnGet: true,
-      allowStale: true // Allow stale data in fallback mode
+      allowStale: true, // Allow stale data in fallback mode
     });
   }
 
@@ -26,7 +26,7 @@ export class FallbackCache<T = any> {
   set(key: string, data: T): void {
     this.cache.set(key, {
       data,
-      cachedAt: Date.now()
+      cachedAt: Date.now(),
     });
   }
 
@@ -45,13 +45,13 @@ export class FallbackCache<T = any> {
     logger.debug('[FallbackCache] Serving cached data', {
       key: key.substring(0, 50),
       age: `${Math.round(age / 1000)}s`,
-      cachedAt: new Date(cached.cachedAt).toISOString()
+      cachedAt: new Date(cached.cachedAt).toISOString(),
     });
 
     return {
       data: cached.data,
       cachedAt: cached.cachedAt,
-      age
+      age,
     };
   }
 
@@ -75,7 +75,7 @@ export class FallbackCache<T = any> {
   getStats(): { size: number; max: number } {
     return {
       size: this.cache.size,
-      max: this.cache.max
+      max: this.cache.max,
     };
   }
 }
diff --git a/backend/src/services/FavoritesService.ts b/backend/src/services/FavoritesService.ts
index 8826a79..fe14ef6 100644
--- a/backend/src/services/FavoritesService.ts
+++ b/backend/src/services/FavoritesService.ts
@@ -219,7 +219,7 @@ export class FavoritesService {
         if (game) {
           return {
             ...game,
-            addedAt: fav.added_at
+            addedAt: fav.added_at,
           };
         }
         return null;
diff --git a/backend/src/services/FileImporter.ts b/backend/src/services/FileImporter.ts
index 03f9a2b..bf0fd37 100644
--- a/backend/src/services/FileImporter.ts
+++ b/backend/src/services/FileImporter.ts
@@ -40,7 +40,7 @@ export class FileImporter {
       logger.info('Starting file import', {
         gameId,
         tempFile: tempFilePath,
-        size: stats.size
+        size: stats.size,
       });
 
       // Get destination directory
@@ -63,13 +63,15 @@ export class FileImporter {
       logger.info('File copied successfully', {
         gameId,
         finalPath,
-        size: stats.size
+        size: stats.size,
       });
 
       // Verify copy succeeded
       const finalStats = await fs.promises.stat(finalPath);
       if (finalStats.size !== stats.size) {
-        throw new Error(`File copy verification failed: size mismatch (expected ${stats.size}, got ${finalStats.size})`);
+        throw new Error(
+          `File copy verification failed: size mismatch (expected ${stats.size}, got ${finalStats.size})`
+        );
       }
 
       // Delete temporary file
@@ -77,7 +79,7 @@ export class FileImporter {
 
       logger.info('File import completed successfully', {
         gameId,
-        finalPath
+        finalPath,
       });
 
       return finalPath;
@@ -85,7 +87,7 @@ export class FileImporter {
       logger.error('File import failed', {
         gameId,
         tempFilePath,
-        error
+        error,
       });
 
       // Re-throw with more context
@@ -117,7 +119,7 @@ export class FileImporter {
     } catch (error) {
       logger.warn('Failed to delete temporary file', {
         tempFilePath,
-        error
+        error,
       });
       // Don't throw - cleanup is best-effort
     }
diff --git a/backend/src/services/GameDataService.ts b/backend/src/services/GameDataService.ts
index 0282fd8..10ecaec 100644
--- a/backend/src/services/GameDataService.ts
+++ b/backend/src/services/GameDataService.ts
@@ -26,9 +26,7 @@ export class GameDataService {
 
       // Look for ZIP file starting with gameId
       const zipPattern = `${gameId}-`;
-      const zipFile = files.find(f =>
-        f.startsWith(zipPattern) && f.endsWith('.zip')
-      );
+      const zipFile = files.find((f) => f.startsWith(zipPattern) && f.endsWith('.zip'));
 
       if (!zipFile) {
         logger.warn(`[GameDataService] No ZIP file found for game ${gameId}`);
@@ -37,17 +35,23 @@ export class GameDataService {
 
       const zipPath = path.join(gamesPath, zipFile);
 
-      logger.info(`[GameDataService] Requesting game-service to mount ZIP for game ${gameId}: ${zipFile}`);
+      logger.info(
+        `[GameDataService] Requesting game-service to mount ZIP for game ${gameId}: ${zipFile}`
+      );
 
       // Call game-service API to mount the ZIP
       const gameZipServerUrl = config.gameServiceGameZipUrl || 'http://localhost:22501';
       try {
-        const response = await axios.post(`${gameZipServerUrl}/mount/${mountId}`, {
-          zipPath: zipPath
-        }, {
-          timeout: 5000,
-          validateStatus: (status) => status === 200 || status === 409 // 409 = already mounted
-        });
+        const response = await axios.post(
+          `${gameZipServerUrl}/mount/${mountId}`,
+          {
+            zipPath: zipPath,
+          },
+          {
+            timeout: 5000,
+            validateStatus: (status) => status === 200 || status === 409, // 409 = already mounted
+          }
+        );
 
         if (response.status === 409) {
           logger.debug(`[GameDataService] ZIP already mounted for game ${gameId}`);
@@ -64,7 +68,6 @@ export class GameDataService {
         logger.error(`[GameDataService] Failed to mount ZIP via game-service:`, error);
         return false;
       }
-
     } catch (error) {
       logger.error(`[GameDataService] Error mounting ZIP for game ${gameId}:`, error);
       return false;
@@ -87,23 +90,30 @@ export class GameDataService {
 
     const gameDataResults = await Promise.allSettled(gameDataPromises);
     const validGameData = gameDataResults
-      .filter((r): r is PromiseFulfilledResult<{ gameId: string; activeDataId: number } | null> => r.status === 'fulfilled' && r.value !== null)
-      .map(r => r.value!);
+      .filter(
+        (r): r is PromiseFulfilledResult<{ gameId: string; activeDataId: number } | null> =>
+          r.status === 'fulfilled' && r.value !== null
+      )
+      .map((r) => r.value!);
 
     const results = await Promise.allSettled(
       validGameData.map(({ gameId }) => this.mountGameZip(gameId))
     );
 
-    const succeeded = results.filter(r => r.status === 'fulfilled' && r.value).length;
+    const succeeded = results.filter((r) => r.status === 'fulfilled' && r.value).length;
     const failed = results.length - succeeded;
 
-    logger.info(`[GameDataService] Mounted ${succeeded}/${results.length} game ZIPs (${failed} failed)`);
+    logger.info(
+      `[GameDataService] Mounted ${succeeded}/${results.length} game ZIPs (${failed} failed)`
+    );
   }
 
   /**
    * Get list of all available game data ZIP files
    */
-  async listAvailableGameDataZips(): Promise<Array<{ activeDataId: number; filename: string; size: number }>> {
+  async listAvailableGameDataZips(): Promise<
+    Array<{ activeDataId: number; filename: string; size: number }>
+  > {
     try {
       const gamesPath = config.flashpointGamesPath;
       const files = await fs.readdir(gamesPath);
@@ -122,7 +132,7 @@ export class GameDataService {
             zipFiles.push({
               activeDataId,
               filename: file,
-              size: stats.size
+              size: stats.size,
             });
           }
         }
diff --git a/backend/src/services/GameDatabaseUpdater.ts b/backend/src/services/GameDatabaseUpdater.ts
index a0ce646..3a9c2e0 100644
--- a/backend/src/services/GameDatabaseUpdater.ts
+++ b/backend/src/services/GameDatabaseUpdater.ts
@@ -34,7 +34,7 @@ export class GameDatabaseUpdater {
     try {
       logger.info('Updating database for downloaded game data', {
         gameDataId,
-        filePath
+        filePath,
       });
 
       // First, fetch the current game data to get the gameId
@@ -50,7 +50,7 @@ export class GameDatabaseUpdater {
 
       logger.debug('Path conversion for database storage', {
         absolutePath: filePath,
-        relativePath
+        relativePath,
       });
 
       // Update game_data table
@@ -62,7 +62,7 @@ export class GameDatabaseUpdater {
 
       logger.debug('Executing UPDATE on game_data', {
         sql: updateGameDataSql,
-        params: [relativePath, gameDataId]
+        params: [relativePath, gameDataId],
       });
 
       DatabaseService.run(updateGameDataSql, [relativePath, gameDataId]);
@@ -87,19 +87,19 @@ export class GameDatabaseUpdater {
 
         logger.debug('Executing UPDATE on game table', {
           sql: updateGameSql,
-          params: [gameData.gameId, gameDataId]
+          params: [gameData.gameId, gameDataId],
         });
 
         DatabaseService.run(updateGameSql, [gameData.gameId, gameDataId]);
 
         logger.debug('game table UPDATE successful - activeDataOnDisk set to 1', {
-          gameId: gameData.gameId
+          gameId: gameData.gameId,
         });
       } else {
         logger.debug('Skipping game table update - game data is not active', {
           gameId: gameData.gameId,
           activeDataId: game?.activeDataId,
-          requestedDataId: gameDataId
+          requestedDataId: gameDataId,
         });
       }
 
@@ -109,7 +109,7 @@ export class GameDatabaseUpdater {
       logger.info('Database updated successfully', {
         gameDataId,
         gameId: gameData.gameId,
-        filePath
+        filePath,
       });
 
       // Fetch and return updated game data
@@ -123,12 +123,14 @@ export class GameDatabaseUpdater {
       logger.error('Failed to update database', {
         gameDataId,
         filePath,
-        error
+        error,
       });
 
       // Attempt to rollback by reloading database (sql.js limitation)
       // In a real scenario, we'd use a proper transaction system
-      throw new Error(`Database update failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      throw new Error(
+        `Database update failed: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
     }
   }
 
@@ -176,11 +178,13 @@ export class GameDatabaseUpdater {
       DatabaseService.save();
 
       logger.info('Database changes flushed to disk', {
-        path: config.flashpointDbPath
+        path: config.flashpointDbPath,
       });
     } catch (error) {
       logger.error('Failed to save database to disk', { error });
-      throw new Error(`Failed to persist database changes: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      throw new Error(
+        `Failed to persist database changes: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
     }
   }
 
@@ -198,7 +202,7 @@ export class GameDatabaseUpdater {
       presentOnDisk: row.presentOnDisk,
       path: row.path,
       size: row.size,
-      parameters: row.parameters
+      parameters: row.parameters,
     };
   }
 
diff --git a/backend/src/services/GameFileService.ts b/backend/src/services/GameFileService.ts
index f2e782e..07ed139 100644
--- a/backend/src/services/GameFileService.ts
+++ b/backend/src/services/GameFileService.ts
@@ -54,7 +54,7 @@ export class GameFileService {
       this.infinityServerURL = 'http://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs/';
       this.externalFilePaths = [
         'http://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs',
-        'http://infinity.unstable.life/Flashpoint/Legacy/htdocs/'
+        'http://infinity.unstable.life/Flashpoint/Legacy/htdocs/',
       ];
     }
   }
@@ -64,7 +64,9 @@ export class GameFileService {
    * @param urlPath The path like "www.example.com/path/file.swf"
    * @returns File buffer and content type
    */
-  async getGameFile(urlPath: string): Promise<{ data: Buffer; contentType: string; source: string }> {
+  async getGameFile(
+    urlPath: string
+  ): Promise<{ data: Buffer; contentType: string; source: string }> {
     logger.info(`[GameFileService] ========================================`);
     logger.info(`[GameFileService] Requested: ${urlPath}`);
 
@@ -96,7 +98,9 @@ export class GameFileService {
     // Try other external paths
     let attemptNum = 3;
     for (const externalPath of this.externalFilePaths) {
-      logger.info(`[GameFileService] [${attemptNum}/${3 + this.externalFilePaths.length}] Trying: ${externalPath}`);
+      logger.info(
+        `[GameFileService] [${attemptNum}/${3 + this.externalFilePaths.length}] Trying: ${externalPath}`
+      );
       const result = await this.tryExternalSource(externalPath, urlPath);
       if (result) {
         logger.info(`[GameFileService] ✓ Found in external source!`);
@@ -105,14 +109,18 @@ export class GameFileService {
       attemptNum++;
     }
 
-    logger.error(`[GameFileService] ✗ File not found in any source (tried ${2 + this.externalFilePaths.length} sources)`);
+    logger.error(
+      `[GameFileService] ✗ File not found in any source (tried ${2 + this.externalFilePaths.length} sources)`
+    );
     throw new Error('File not found in Game Server or any external source');
   }
 
   /**
    * Try to get file from the local Game Server
    */
-  private async tryGameServer(urlPath: string): Promise<{ data: Buffer; contentType: string } | null> {
+  private async tryGameServer(
+    urlPath: string
+  ): Promise<{ data: Buffer; contentType: string } | null> {
     return new Promise((resolve, reject) => {
       // Make proxy-style HTTP request
       const fullUrl = `http://${urlPath}`;
@@ -124,7 +132,7 @@ export class GameFileService {
         path: fullUrl,
         method: 'GET',
         headers: {
-          'Host': parsedUrl.hostname,
+          Host: parsedUrl.hostname,
           'User-Agent': 'Flashpoint-WebApp/1.0',
         },
         timeout: 10000,
@@ -163,7 +171,10 @@ export class GameFileService {
   /**
    * Try to download file from an external source
    */
-  private async tryExternalSource(baseUrl: string, urlPath: string): Promise<{ data: Buffer; contentType: string } | null> {
+  private async tryExternalSource(
+    baseUrl: string,
+    urlPath: string
+  ): Promise<{ data: Buffer; contentType: string } | null> {
     // Construct full URL
     // baseUrl might be: http://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs/
     // urlPath is: www.example.com/path/file.swf
@@ -209,7 +220,9 @@ export class GameFileService {
         } else if (error.code === 'ENOTFOUND') {
           logger.warn(`[GameFileService] ✗ DNS resolution failed`);
         } else if (error.response) {
-          logger.warn(`[GameFileService] ✗ HTTP ${error.response.status}: ${error.response.statusText}`);
+          logger.warn(
+            `[GameFileService] ✗ HTTP ${error.response.status}: ${error.response.statusText}`
+          );
         } else if (error.request) {
           logger.warn(`[GameFileService] ✗ No response received: ${error.message}`);
         } else {
diff --git a/backend/src/services/GameSearchCache.ts b/backend/src/services/GameSearchCache.ts
index 2d7863a..26f7142 100644
--- a/backend/src/services/GameSearchCache.ts
+++ b/backend/src/services/GameSearchCache.ts
@@ -37,7 +37,7 @@ export class GameSearchCache {
     // Optional: Log evictions for monitoring
     dispose: (value, key) => {
       logger.debug(`[GameSearchCache] Evicted cache entry: ${key}`);
-    }
+    },
   });
 
   private static gameService = new GameService();
@@ -68,7 +68,7 @@ export class GameSearchCache {
       limit: query.limit,
       showBroken: query.showBroken,
       showExtreme: query.showExtreme,
-      fields: query.fields || 'detail'
+      fields: query.fields || 'detail',
     };
 
     return JSON.stringify(normalizedQuery);
@@ -79,7 +79,9 @@ export class GameSearchCache {
    * Checks cache first, falls back to database query if cache miss
    * If database fails, returns stale data from fallback cache
    */
-  static async searchGames(query: GameSearchQuery): Promise<PaginatedResult<Game> & { fromCache?: boolean; cacheAge?: number }> {
+  static async searchGames(
+    query: GameSearchQuery
+  ): Promise<PaginatedResult<Game> & { fromCache?: boolean; cacheAge?: number }> {
     const cacheKey = this.generateCacheKey(query);
 
     // Try to get from primary cache
@@ -105,7 +107,7 @@ export class GameSearchCache {
       if (!result || !result.data || !Array.isArray(result.data)) {
         logger.error('[GameSearchCache] Invalid result from database query', {
           result,
-          cacheKey: cacheKey.substring(0, 200)
+          cacheKey: cacheKey.substring(0, 200),
         });
         throw new Error('Invalid database query result');
       }
@@ -118,21 +120,21 @@ export class GameSearchCache {
     } catch (error) {
       // Database query failed - try fallback cache
       logger.warn('[GameSearchCache] Database query failed, attempting fallback cache', {
-        error: error instanceof Error ? error.message : String(error)
+        error: error instanceof Error ? error.message : String(error),
       });
 
       const fallback = this.fallbackCache.get(cacheKey);
       if (fallback) {
         logger.info('[GameSearchCache] Serving stale data from fallback cache', {
           age: `${Math.round(fallback.age / 1000)}s`,
-          cachedAt: new Date(fallback.cachedAt).toISOString()
+          cachedAt: new Date(fallback.cachedAt).toISOString(),
         });
 
         // Return stale data with metadata
         return {
           ...fallback.data,
           fromCache: true,
-          cacheAge: fallback.age
+          cacheAge: fallback.age,
         };
       }
 
@@ -150,7 +152,9 @@ export class GameSearchCache {
   static clearCache(): void {
     const size = this.cache.size;
     this.cache.clear();
-    logger.info(`[GameSearchCache] Cleared primary cache (${size} entries), fallback cache preserved`);
+    logger.info(
+      `[GameSearchCache] Cleared primary cache (${size} entries), fallback cache preserved`
+    );
   }
 
   /**
@@ -163,7 +167,9 @@ export class GameSearchCache {
     this.cache.clear();
     this.fallbackCache.clear();
 
-    logger.info(`[GameSearchCache] Cleared all caches (primary: ${primarySize}, fallback: ${fallbackSize} entries)`);
+    logger.info(
+      `[GameSearchCache] Cleared all caches (primary: ${primarySize}, fallback: ${fallbackSize} entries)`
+    );
   }
 
   /**
@@ -177,9 +183,9 @@ export class GameSearchCache {
       primary: {
         size: this.cache.size,
         max: this.cache.max,
-        ttl: 1000 * 60 * 5 // 5 minutes
+        ttl: 1000 * 60 * 5, // 5 minutes
       },
-      fallback: this.fallbackCache.getStats()
+      fallback: this.fallbackCache.getStats(),
     };
   }
 
@@ -216,9 +222,23 @@ export class GameSearchCache {
       // Default home page - animations library
       { library: 'theatre', page: 1, limit: 50, sortBy: 'title', sortOrder: 'asc', fields: 'list' },
       // Recently added games
-      { library: 'arcade', page: 1, limit: 50, sortBy: 'dateAdded', sortOrder: 'desc', fields: 'list' },
+      {
+        library: 'arcade',
+        page: 1,
+        limit: 50,
+        sortBy: 'dateAdded',
+        sortOrder: 'desc',
+        fields: 'list',
+      },
       // Recently added animations
-      { library: 'theatre', page: 1, limit: 50, sortBy: 'dateAdded', sortOrder: 'desc', fields: 'list' },
+      {
+        library: 'theatre',
+        page: 1,
+        limit: 50,
+        sortBy: 'dateAdded',
+        sortOrder: 'desc',
+        fields: 'list',
+      },
     ];
 
     let successCount = 0;
@@ -234,7 +254,7 @@ export class GameSearchCache {
         fields: 'list',
         showBroken: false,
         showExtreme: false,
-        ...partialQuery
+        ...partialQuery,
       };
 
       try {
@@ -244,14 +264,14 @@ export class GameSearchCache {
 
         logger.debug(`[GameSearchCache] Pre-warmed query in ${queryDuration}ms`, {
           library: query.library,
-          sortBy: query.sortBy
+          sortBy: query.sortBy,
         });
 
         successCount++;
       } catch (error) {
         logger.warn('[GameSearchCache] Failed to pre-warm query', {
           query: partialQuery,
-          error: error instanceof Error ? error.message : String(error)
+          error: error instanceof Error ? error.message : String(error),
         });
         failCount++;
       }
@@ -261,7 +281,7 @@ export class GameSearchCache {
     logger.info(`[GameSearchCache] Cache pre-warming completed in ${totalDuration}ms`, {
       success: successCount,
       failed: failCount,
-      total: commonQueries.length
+      total: commonQueries.length,
     });
   }
 
@@ -279,7 +299,7 @@ export class GameSearchCache {
       sortOrder: 'asc',
       fields: 'list',
       showBroken: false,
-      showExtreme: false
+      showExtreme: false,
     };
     return this.has(defaultQuery);
   }
diff --git a/backend/src/services/GameService.ts b/backend/src/services/GameService.ts
index c63ae18..adfe309 100644
--- a/backend/src/services/GameService.ts
+++ b/backend/src/services/GameService.ts
@@ -58,7 +58,7 @@ export interface Game {
   playtime?: number;
   playCounter?: number;
   archiveState?: number;
-  logoPath?: string;       // Infinity edition only
+  logoPath?: string; // Infinity edition only
   screenshotPath?: string; // Infinity edition only
 }
 
@@ -106,8 +106,11 @@ export class GameService {
 
     // Infinity edition has logoPath and screenshotPath columns
     if (isInfinity) {
-      return baseColumns + `,
-      g.logoPath, g.screenshotPath`;
+      return (
+        baseColumns +
+        `,
+      g.logoPath, g.screenshotPath`
+      );
     }
 
     return baseColumns;
@@ -183,7 +186,7 @@ export class GameService {
       // OPTIMIZATION: Use INSTR instead of LIKE for tag matching (faster in SQLite)
       if (query.tags && query.tags.length > 0) {
         // Check if tags are in tagsStr field using INSTR with semicolon boundaries
-        query.tags.forEach(tag => {
+        query.tags.forEach((tag) => {
           sql += ` AND INSTR(';' || g.tagsStr || ';', ?) > 0`;
           params.push(`;${tag};`);
         });
@@ -245,7 +248,7 @@ export class GameService {
           dateAddedSince: query.dateAddedSince,
           dateModifiedSince: query.dateModifiedSince,
           sortBy: query.sortBy,
-          params: params
+          params: params,
         });
       }
 
@@ -258,7 +261,7 @@ export class GameService {
       // OPTIMIZATION: Fetch presentOnDisk separately for returned games (post-processing pattern)
       // This avoids the LEFT JOIN row explosion and GROUP BY aggregation
       if (games.length > 0) {
-        const gameIds = games.map(g => g.id);
+        const gameIds = games.map((g) => g.id);
         const placeholders = gameIds.map(() => '?').join(', ');
 
         const presentOnDiskSql = `
@@ -275,7 +278,7 @@ export class GameService {
 
         // Create a map for O(1) lookup
         const presentOnDiskMap = new Map(
-          presentOnDiskResults.map(r => [r.gameId, r.presentOnDisk])
+          presentOnDiskResults.map((r) => [r.gameId, r.presentOnDisk])
         );
 
         // Merge presentOnDisk into game objects and remove total_count
@@ -290,7 +293,7 @@ export class GameService {
         total,
         page: query.page,
         limit: query.limit,
-        totalPages: Math.ceil(total / query.limit)
+        totalPages: Math.ceil(total / query.limit),
       };
     } catch (error) {
       logger.error('Error searching games:', {
@@ -301,8 +304,8 @@ export class GameService {
           sortBy: query.sortBy,
           library: query.library,
           page: query.page,
-          limit: query.limit
-        }
+          limit: query.limit,
+        },
       });
       throw error;
     }
@@ -354,8 +357,8 @@ export class GameService {
       const games = DatabaseService.all(sql, ids) as Game[];
 
       // Sort games to match the order of input IDs
-      const gamesMap = new Map(games.map(g => [g.id, g]));
-      return ids.map(id => gamesMap.get(id)).filter((g): g is Game => g !== undefined);
+      const gamesMap = new Map(games.map((g) => [g.id, g]));
+      return ids.map((id) => gamesMap.get(id)).filter((g): g is Game => g !== undefined);
     } catch (error) {
       logger.error('Error getting games by IDs:', error);
       throw error;
@@ -460,7 +463,7 @@ export class GameService {
         sourceGame.platformName,
         sourceGame.developer,
         sourceGame.platformName,
-        limit
+        limit,
       ]) as Game[];
 
       return games;
@@ -504,7 +507,7 @@ export class GameService {
       releaseDate: 'g.releaseDate',
       dateAdded: 'g.dateAdded',
       dateModified: 'g.dateModified',
-      developer: 'g.developer'
+      developer: 'g.developer',
     };
     return columnMap[sortBy] || 'g.orderTitle';
   }
@@ -697,7 +700,10 @@ export class GameService {
       const tagCounts = new Map<string, number>();
 
       for (const row of results) {
-        const tags = row.tagsStr.split(';').map(tag => tag.trim()).filter(tag => tag);
+        const tags = row.tagsStr
+          .split(';')
+          .map((tag) => tag.trim())
+          .filter((tag) => tag);
         for (const tag of tags) {
           tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1);
         }
@@ -792,7 +798,7 @@ export class GameService {
       }
 
       // Get game IDs for query
-      const gameIds = mostPlayedStats.map(stat => stat.game_id);
+      const gameIds = mostPlayedStats.map((stat) => stat.game_id);
 
       // Fetch full game details from flashpoint database using list fields
       const placeholders = gameIds.map(() => '?').join(',');
@@ -805,9 +811,9 @@ export class GameService {
       const games = DatabaseService.all(sql, gameIds) as Game[];
 
       // Sort games by the original play count order
-      const gameMap = new Map(games.map(game => [game.id, game]));
+      const gameMap = new Map(games.map((game) => [game.id, game]));
       const sortedGames = gameIds
-        .map(id => gameMap.get(id))
+        .map((id) => gameMap.get(id))
         .filter((game): game is Game => game !== undefined);
 
       return sortedGames;
diff --git a/backend/src/services/HashValidator.ts b/backend/src/services/HashValidator.ts
index c321d94..14ceaf6 100644
--- a/backend/src/services/HashValidator.ts
+++ b/backend/src/services/HashValidator.ts
@@ -59,7 +59,7 @@ export class HashValidator {
       logger.warn('Hash validation failed', {
         filePath,
         expected,
-        actual: actualHash
+        actual: actualHash,
       });
     }
 
@@ -74,12 +74,18 @@ export class HashValidator {
    * @param source - Source name for error messages
    * @throws Error if hash doesn't match or file cannot be read
    */
-  static async validateOrThrow(filePath: string, expectedHash: string, source?: string): Promise<void> {
+  static async validateOrThrow(
+    filePath: string,
+    expectedHash: string,
+    source?: string
+  ): Promise<void> {
     const isValid = await this.validate(filePath, expectedHash);
 
     if (!isValid) {
       const sourceInfo = source ? ` from ${source}` : '';
-      throw new Error(`Hash validation failed${sourceInfo}: File hash does not match expected SHA256`);
+      throw new Error(
+        `Hash validation failed${sourceInfo}: File hash does not match expected SHA256`
+      );
     }
   }
 
@@ -96,7 +102,7 @@ export class HashValidator {
 
     return {
       hash,
-      size: stats.size
+      size: stats.size,
     };
   }
 }
diff --git a/backend/src/services/ImageUrlService.ts b/backend/src/services/ImageUrlService.ts
index 6a40ebf..ed8e33d 100644
--- a/backend/src/services/ImageUrlService.ts
+++ b/backend/src/services/ImageUrlService.ts
@@ -20,24 +20,26 @@ export class ImageUrlService {
         // Construct full image URL from Flashpoint CDN base URL
         const urls = [
           `${baseUrl}/Flashpoint/Data/Images`,
-          'https://infinity.unstable.life/Flashpoint/Data/Images' // Secondary fallback
+          'https://infinity.unstable.life/Flashpoint/Data/Images', // Secondary fallback
         ];
 
         logger.info('Using external image URLs from Flashpoint preferences', {
           baseUrl: preferences.onDemandBaseUrl,
-          constructedUrls: urls
+          constructedUrls: urls,
         });
 
         return urls;
       }
     } catch (error) {
-      logger.warn('Failed to read image URLs from Flashpoint preferences, using defaults', { error });
+      logger.warn('Failed to read image URLs from Flashpoint preferences, using defaults', {
+        error,
+      });
     }
 
     // Fallback to hardcoded defaults
     const defaultUrls = [
       'https://infinity.flashpointarchive.org/Flashpoint/Data/Images',
-      'https://infinity.unstable.life/Flashpoint/Data/Images'
+      'https://infinity.unstable.life/Flashpoint/Data/Images',
     ];
 
     logger.info('Using default image URLs', { urls: defaultUrls });
@@ -57,7 +59,7 @@ export class ImageUrlService {
       return {
         images: preferences.imageFolderPath || 'Data/Images',
         logos: preferences.logoFolderPath || 'Data/Logos',
-        playlists: preferences.playlistFolderPath || 'Data/Playlists'
+        playlists: preferences.playlistFolderPath || 'Data/Playlists',
       };
     } catch (error) {
       // Return defaults if preferences unavailable
@@ -65,7 +67,7 @@ export class ImageUrlService {
       return {
         images: 'Data/Images',
         logos: 'Data/Logos',
-        playlists: 'Data/Playlists'
+        playlists: 'Data/Playlists',
       };
     }
   }
diff --git a/backend/src/services/JobExecutionService.ts b/backend/src/services/JobExecutionService.ts
index afd6dcf..d2e604f 100644
--- a/backend/src/services/JobExecutionService.ts
+++ b/backend/src/services/JobExecutionService.ts
@@ -41,10 +41,9 @@ export class JobExecutionService {
     const completedAt = new Date().toISOString();
 
     // Calculate duration
-    const log = UserDatabaseService.get(
-      'SELECT started_at FROM job_execution_logs WHERE id = ?',
-      [id]
-    ) as { started_at: string } | null;
+    const log = UserDatabaseService.get('SELECT started_at FROM job_execution_logs WHERE id = ?', [
+      id,
+    ]) as { started_at: string } | null;
 
     if (!log) {
       logger.error(`[JobExecution] Cannot complete: log ${id} not found`);
@@ -84,7 +83,7 @@ export class JobExecutionService {
 
     return {
       data: logs.map(this.mapToJobExecutionLog),
-      total: total.count
+      total: total.count,
     };
   }
 
@@ -106,7 +105,7 @@ export class JobExecutionService {
 
     return {
       data: logs.map(this.mapToJobExecutionLog),
-      total: total.count
+      total: total.count,
     };
   }
 
@@ -133,10 +132,9 @@ export class JobExecutionService {
     cutoffDate.setDate(cutoffDate.getDate() - retentionDays);
     const cutoffISO = cutoffDate.toISOString();
 
-    const result = UserDatabaseService.run(
-      'DELETE FROM job_execution_logs WHERE started_at < ?',
-      [cutoffISO]
-    );
+    const result = UserDatabaseService.run('DELETE FROM job_execution_logs WHERE started_at < ?', [
+      cutoffISO,
+    ]);
 
     logger.info(`[JobExecution] Cleaned up ${result.changes} old logs`);
     return result.changes;
@@ -153,7 +151,7 @@ export class JobExecutionService {
       durationSeconds: row.duration_seconds,
       message: row.message,
       errorDetails: row.error_details,
-      triggeredBy: row.triggered_by
+      triggeredBy: row.triggered_by,
     };
   }
 }
diff --git a/backend/src/services/JobScheduler.ts b/backend/src/services/JobScheduler.ts
index f03d943..0f7142d 100644
--- a/backend/src/services/JobScheduler.ts
+++ b/backend/src/services/JobScheduler.ts
@@ -53,7 +53,9 @@ class JobSchedulerService {
 
     // Validate cron expression
     if (!cron.validate(job.cronSchedule)) {
-      logger.error(`Cannot start job: Invalid cron expression '${job.cronSchedule}' for job ${job.name}`);
+      logger.error(
+        `Cannot start job: Invalid cron expression '${job.cronSchedule}' for job ${job.name}`
+      );
       return;
     }
 
@@ -189,7 +191,7 @@ class JobSchedulerService {
     return {
       enabled: job.enabled,
       running: this.cronTasks.has(jobId),
-      cronSchedule: job.cronSchedule
+      cronSchedule: job.cronSchedule,
     };
   }
 
@@ -229,7 +231,7 @@ class JobSchedulerService {
       running,
       cronSchedule: job.cronSchedule,
       lastExecution,
-      nextRunEstimate
+      nextRunEstimate,
     };
   }
 
diff --git a/backend/src/services/MetadataSyncService.ts b/backend/src/services/MetadataSyncService.ts
index e9b413c..5bf3935 100644
--- a/backend/src/services/MetadataSyncService.ts
+++ b/backend/src/services/MetadataSyncService.ts
@@ -7,7 +7,6 @@ import { DatabaseService } from './DatabaseService';
 import { GameMetadataSource } from './MetadataUpdateService';
 import { SyncStatusService } from './SyncStatusService';
 
-
 interface SyncResult {
   success: boolean;
   gamesUpdated: number;
@@ -57,7 +56,7 @@ interface ApiTag {
   description: string | null;
   category: string | null;
   date_modified: string;
-  aliases?: string;        // semicolon-separated
+  aliases?: string; // semicolon-separated
   user_id?: number;
   Deleted?: boolean;
 }
@@ -67,7 +66,7 @@ interface ApiPlatform {
   name: string;
   description: string | null;
   date_modified: string;
-  aliases?: string;        // semicolon-separated
+  aliases?: string; // semicolon-separated
   user_id?: number;
   Deleted?: boolean;
 }
@@ -124,7 +123,7 @@ export class MetadataSyncService {
         tagsUpdated: 0,
         platformsUpdated: 0,
         error: 'Metadata sync is not available for Flashpoint Ultimate edition',
-        timestamp: new Date().toISOString()
+        timestamp: new Date().toISOString(),
       };
     }
     const startTime = new Date();
@@ -185,7 +184,7 @@ export class MetadataSyncService {
       await this.updatePreferencesTimestamps(source, preferences, {
         gamesLatestDate: latestGameDate,
         tagsLatestDate: latestTagDate,
-        platformsLatestDate: latestPlatformDate
+        platformsLatestDate: latestPlatformDate,
       });
 
       const result: SyncResult = {
@@ -194,7 +193,7 @@ export class MetadataSyncService {
         gamesDeleted,
         tagsUpdated,
         platformsUpdated,
-        timestamp: startTime.toISOString()
+        timestamp: startTime.toISOString(),
       };
 
       // Mark sync as completed
@@ -202,7 +201,6 @@ export class MetadataSyncService {
 
       logger.info(`[MetadataSync] Sync completed successfully:`, result);
       return result;
-
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Unknown error';
 
@@ -217,7 +215,7 @@ export class MetadataSyncService {
         tagsUpdated,
         platformsUpdated,
         error: errorMessage,
-        timestamp: startTime.toISOString()
+        timestamp: startTime.toISOString(),
       };
     }
   }
@@ -225,7 +223,9 @@ export class MetadataSyncService {
   /**
    * Sync platforms from FPFSS API
    */
-  private async syncPlatforms(source: GameMetadataSource): Promise<{ count: number; latestDate: string | null }> {
+  private async syncPlatforms(
+    source: GameMetadataSource
+  ): Promise<{ count: number; latestDate: string | null }> {
     try {
       const after = source.platforms?.latestUpdateTime || '1970-01-01';
       const url = `${source.baseUrl}/api/platforms?after=${after}`;
@@ -261,7 +261,9 @@ export class MetadataSyncService {
   /**
    * Sync tags from FPFSS API
    */
-  private async syncTags(source: GameMetadataSource): Promise<{ count: number; latestDate: string | null }> {
+  private async syncTags(
+    source: GameMetadataSource
+  ): Promise<{ count: number; latestDate: string | null }> {
     try {
       const after = source.tags?.latestUpdateTime || '1970-01-01';
       const url = `${source.baseUrl}/api/tags?after=${after}`;
@@ -297,7 +299,9 @@ export class MetadataSyncService {
   /**
    * Sync games from FPFSS API (with pagination)
    */
-  private async syncGames(source: GameMetadataSource): Promise<{ updated: number; deleted: number; latestDate: string | null }> {
+  private async syncGames(
+    source: GameMetadataSource
+  ): Promise<{ updated: number; deleted: number; latestDate: string | null }> {
     try {
       const after = source.games?.latestUpdateTime || '1970-01-01';
       let totalUpdated = 0;
@@ -316,8 +320,12 @@ export class MetadataSyncService {
         }
 
         logger.debug(`[MetadataSync] Fetching games batch ${batchCount} from: ${url}`);
-        const progress = Math.min(80, 40 + (batchCount * 5)); // Cap at 80% during game sync
-        this.syncStatusService.updateProgress('syncing-games', progress, `Syncing games (batch ${batchCount})...`);
+        const progress = Math.min(80, 40 + batchCount * 5); // Cap at 80% during game sync
+        this.syncStatusService.updateProgress(
+          'syncing-games',
+          progress,
+          `Syncing games (batch ${batchCount})...`
+        );
 
         const response = await axios.get(url, { timeout: 60000 });
         // FPFSS API returns {"games": [...]} not just an array
@@ -342,14 +350,19 @@ export class MetadataSyncService {
         // Get last game ID for pagination
         afterId = games[games.length - 1].id;
 
-        logger.info(`[MetadataSync] Batch ${batchCount}: ${games.length} games processed (total: ${totalUpdated})`);
+        logger.info(
+          `[MetadataSync] Batch ${batchCount}: ${games.length} games processed (total: ${totalUpdated})`
+        );
       }
 
       // Sync deleted games
       const deleted = await this.syncDeletedGames(source);
 
-      return { updated: totalUpdated, deleted, latestDate: latestDate !== after ? latestDate : null };
-
+      return {
+        updated: totalUpdated,
+        deleted,
+        latestDate: latestDate !== after ? latestDate : null,
+      };
     } catch (error) {
       logger.error('[MetadataSync] Error syncing games:', error);
       throw error;
@@ -382,7 +395,9 @@ export class MetadataSyncService {
         deletedIds = response.data.deletedGames;
       } else if (response.data.games && Array.isArray(response.data.games)) {
         // Wrapped in games property
-        deletedIds = response.data.games.map((g: unknown) => typeof g === 'string' ? g : (g as { id: string }).id);
+        deletedIds = response.data.games.map((g: unknown) =>
+          typeof g === 'string' ? g : (g as { id: string }).id
+        );
       } else {
         logger.warn('[MetadataSync] Unexpected deleted games API response format:', response.data);
       }
@@ -396,7 +411,6 @@ export class MetadataSyncService {
 
       logger.info(`[MetadataSync] Deleted ${deletedIds.length} games`);
       return deletedIds.length;
-
     } catch (error) {
       logger.error('[MetadataSync] Error syncing deleted games:', error);
       throw error;
@@ -420,7 +434,9 @@ export class MetadataSyncService {
     // Platform data is embedded in game records (game.platformName column)
     // No separate platform table exists in flashpoint.sqlite
     // The settings toggle works, but the actual data is synced via game records
-    logger.debug(`[MetadataSync] Received ${platforms.length} platform updates (data synced via game records)`);
+    logger.debug(
+      `[MetadataSync] Received ${platforms.length} platform updates (data synced via game records)`
+    );
   }
 
   /**
@@ -440,7 +456,9 @@ export class MetadataSyncService {
     // Tag data is embedded in game records (game.tagsStr column as semicolon-separated strings)
     // No separate tag table exists in flashpoint.sqlite
     // The settings toggle works, but the actual data is synced via game records
-    logger.debug(`[MetadataSync] Received ${tags.length} tag updates (data synced via game records)`);
+    logger.debug(
+      `[MetadataSync] Received ${tags.length} tag updates (data synced via game records)`
+    );
   }
 
   /**
@@ -454,12 +472,15 @@ export class MetadataSyncService {
     const sortedGames = this.sortGamesByParentDependency(games);
 
     // Build SQL for bulk upsert (29 columns per row)
-    const placeholders = sortedGames.map(() =>
-      '(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)'
-    ).join(', ');
+    const placeholders = sortedGames
+      .map(
+        () =>
+          '(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)'
+      )
+      .join(', ');
 
     const values: any[] = [];
-    sortedGames.forEach(game => {
+    sortedGames.forEach((game) => {
       values.push(
         game.id,
         game.parent_game_id || null,
@@ -547,7 +568,7 @@ export class MetadataSyncService {
     const visiting = new Set<string>(); // Track games currently being visited to detect cycles
 
     // Build game map
-    games.forEach(game => gameMap.set(game.id, game));
+    games.forEach((game) => gameMap.set(game.id, game));
 
     // Recursive function to add game and its parents first
     const addGame = (game: ApiGame): void => {
@@ -556,7 +577,9 @@ export class MetadataSyncService {
 
       // Circular dependency detected - break the cycle by skipping parent
       if (visiting.has(game.id)) {
-        logger.warn(`[MetadataSync] Circular parent dependency detected for game: ${game.id} (${game.title})`);
+        logger.warn(
+          `[MetadataSync] Circular parent dependency detected for game: ${game.id} (${game.title})`
+        );
         visited.add(game.id);
         sorted.push(game);
         return;
@@ -578,7 +601,7 @@ export class MetadataSyncService {
     };
 
     // Process all games
-    games.forEach(game => addGame(game));
+    games.forEach((game) => addGame(game));
 
     return sorted;
   }
@@ -621,7 +644,9 @@ export class MetadataSyncService {
           const updateSql = `UPDATE game SET parentGameId = NULL WHERE id IN (${updatePlaceholders})`;
           const updateStmt = db.prepare(updateSql);
           updateStmt.run(childGameIds);
-          logger.debug(`[MetadataSync] Orphaned ${childGameIds.length} child games (set parentGameId to NULL)`);
+          logger.debug(
+            `[MetadataSync] Orphaned ${childGameIds.length} child games (set parentGameId to NULL)`
+          );
         }
 
         // Now safe to delete the games
@@ -667,25 +692,33 @@ export class MetadataSyncService {
         // Update latestUpdateTime to the latest game/tag/platform dateModified
         // This is what the update check uses to determine what's new
         if (latestDates.gamesLatestDate) {
-          preferences.gameMetadataSources[sourceIndex].games.latestUpdateTime = latestDates.gamesLatestDate;
-          logger.info(`[MetadataSync] Updated games latestUpdateTime to: ${latestDates.gamesLatestDate}`);
+          preferences.gameMetadataSources[sourceIndex].games.latestUpdateTime =
+            latestDates.gamesLatestDate;
+          logger.info(
+            `[MetadataSync] Updated games latestUpdateTime to: ${latestDates.gamesLatestDate}`
+          );
         }
         if (latestDates.tagsLatestDate) {
-          preferences.gameMetadataSources[sourceIndex].tags.latestUpdateTime = latestDates.tagsLatestDate;
-          logger.info(`[MetadataSync] Updated tags latestUpdateTime to: ${latestDates.tagsLatestDate}`);
+          preferences.gameMetadataSources[sourceIndex].tags.latestUpdateTime =
+            latestDates.tagsLatestDate;
+          logger.info(
+            `[MetadataSync] Updated tags latestUpdateTime to: ${latestDates.tagsLatestDate}`
+          );
         }
-        if (latestDates.platformsLatestDate && preferences.gameMetadataSources[sourceIndex].platforms) {
-          preferences.gameMetadataSources[sourceIndex].platforms.latestUpdateTime = latestDates.platformsLatestDate;
-          logger.info(`[MetadataSync] Updated platforms latestUpdateTime to: ${latestDates.platformsLatestDate}`);
+        if (
+          latestDates.platformsLatestDate &&
+          preferences.gameMetadataSources[sourceIndex].platforms
+        ) {
+          preferences.gameMetadataSources[sourceIndex].platforms.latestUpdateTime =
+            latestDates.platformsLatestDate;
+          logger.info(
+            `[MetadataSync] Updated platforms latestUpdateTime to: ${latestDates.platformsLatestDate}`
+          );
         }
       }
 
       // Write back to preferences.json
-      await fs.writeFile(
-        this.preferencesPath,
-        JSON.stringify(preferences, null, 2),
-        'utf-8'
-      );
+      await fs.writeFile(this.preferencesPath, JSON.stringify(preferences, null, 2), 'utf-8');
 
       logger.info(`[MetadataSync] Updated preferences.json timestamps. actualUpdateTime: ${now}`);
     } catch (error) {
@@ -693,5 +726,4 @@ export class MetadataSyncService {
       throw error;
     }
   }
-
 }
diff --git a/backend/src/services/MetadataUpdateService.ts b/backend/src/services/MetadataUpdateService.ts
index 8b8567c..e0a2241 100644
--- a/backend/src/services/MetadataUpdateService.ts
+++ b/backend/src/services/MetadataUpdateService.ts
@@ -4,7 +4,6 @@ import axios from 'axios';
 import { config } from '../config';
 import { logger } from '../utils/logger';
 
-
 export interface GameMetadataSource {
   name: string;
   baseUrl: string;
@@ -63,7 +62,7 @@ export class MetadataUpdateService {
         return {
           hasUpdates: false,
           gamesUpdateAvailable: false,
-          tagsUpdateAvailable: false
+          tagsUpdateAvailable: false,
         };
       }
       // Read preferences file
@@ -78,7 +77,7 @@ export class MetadataUpdateService {
         return {
           hasUpdates: false,
           gamesUpdateAvailable: false,
-          tagsUpdateAvailable: false
+          tagsUpdateAvailable: false,
         };
       }
 
@@ -98,7 +97,9 @@ export class MetadataUpdateService {
       const hasUpdates = gamesUpdateAvailable || tagsUpdateAvailable;
 
       logger.info(`[MetadataUpdate] Games: ${gamesUpdateCount} updates available`);
-      logger.info(`[MetadataUpdate] Tags: ${tagsUpdateCount} updates available (synced via game records)`);
+      logger.info(
+        `[MetadataUpdate] Tags: ${tagsUpdateCount} updates available (synced via game records)`
+      );
 
       return {
         hasUpdates,
@@ -108,7 +109,7 @@ export class MetadataUpdateService {
         tagsUpdateCount,
         lastCheckedTime: source.games.actualUpdateTime,
         lastUpdateTime: source.games.latestUpdateTime,
-        source
+        source,
       };
     } catch (error) {
       logger.error('[MetadataUpdate] Failed to read metadata update info:', error);
@@ -117,7 +118,7 @@ export class MetadataUpdateService {
       return {
         hasUpdates: false,
         gamesUpdateAvailable: false,
-        tagsUpdateAvailable: false
+        tagsUpdateAvailable: false,
       };
     }
   }
@@ -127,7 +128,10 @@ export class MetadataUpdateService {
    * Queries: ${baseUrl}/api/games/updates?after=${timestamp}
    * Returns the actual count of updates from the server
    */
-  private async getUpdateCount(source: GameMetadataSource, type: 'games' | 'tags'): Promise<number> {
+  private async getUpdateCount(
+    source: GameMetadataSource,
+    type: 'games' | 'tags'
+  ): Promise<number> {
     try {
       // Add 2 seconds to update time to prevent rounding down errors (like Launcher does)
       const d = new Date(source[type].latestUpdateTime);
@@ -138,7 +142,7 @@ export class MetadataUpdateService {
       logger.debug(`[MetadataUpdate] Querying ${type} updates: ${countUrl}`);
 
       const response = await axios.get(countUrl, {
-        timeout: 10000
+        timeout: 10000,
       });
 
       if (response.data && typeof response.data.total === 'number') {
@@ -148,7 +152,10 @@ export class MetadataUpdateService {
       logger.warn(`[MetadataUpdate] Invalid response from ${countUrl}`);
       return 0;
     } catch (error) {
-      logger.error(`[MetadataUpdate] Error fetching ${type} update count:`, error instanceof Error ? error.message : 'Unknown error');
+      logger.error(
+        `[MetadataUpdate] Error fetching ${type} update count:`,
+        error instanceof Error ? error.message : 'Unknown error'
+      );
       return -1; // Return -1 on error (like Launcher does)
     }
   }
@@ -176,18 +183,21 @@ export class MetadataUpdateService {
       // Query FPFSS API for latest metadata info
       const response = await axios.get(fpfssUrl, {
         timeout: 10000,
-        validateStatus: (status) => status === 200
+        validateStatus: (status) => status === 200,
       });
 
       if (response.data && response.data.games && response.data.games.latestUpdateTime) {
         return {
-          latestUpdateTime: response.data.games.latestUpdateTime
+          latestUpdateTime: response.data.games.latestUpdateTime,
         };
       }
 
       return null;
     } catch (error) {
-      logger.warn('[MetadataUpdate] Failed to check remote updates:', error instanceof Error ? error.message : 'Unknown error');
+      logger.warn(
+        '[MetadataUpdate] Failed to check remote updates:',
+        error instanceof Error ? error.message : 'Unknown error'
+      );
       return null;
     }
   }
@@ -214,7 +224,7 @@ export class MetadataUpdateService {
       month: 'short',
       day: 'numeric',
       hour: '2-digit',
-      minute: '2-digit'
+      minute: '2-digit',
     });
   }
 }
diff --git a/backend/src/services/PerformanceMetrics.ts b/backend/src/services/PerformanceMetrics.ts
index b8706a2..e5bc5d5 100644
--- a/backend/src/services/PerformanceMetrics.ts
+++ b/backend/src/services/PerformanceMetrics.ts
@@ -55,7 +55,7 @@ export class PerformanceMetrics {
     const metrics = this.endpointMetrics.get(key)!;
     metrics.push({
       timestamp: Date.now(),
-      value: durationMs
+      value: durationMs,
     });
 
     // Trim old data points
@@ -67,7 +67,7 @@ export class PerformanceMetrics {
     if (durationMs > 1000) {
       logger.warn('[PerformanceMetrics] Slow endpoint detected', {
         endpoint: key,
-        duration: `${durationMs}ms`
+        duration: `${durationMs}ms`,
       });
     }
   }
@@ -100,7 +100,7 @@ export class PerformanceMetrics {
   static recordQuery(durationMs: number): void {
     this.queryMetrics.push({
       timestamp: Date.now(),
-      value: durationMs
+      value: durationMs,
     });
 
     // Trim old data points
@@ -151,7 +151,7 @@ export class PerformanceMetrics {
       stats[cacheName] = {
         hits: metrics.hits,
         misses: metrics.misses,
-        hitRate: Math.round(hitRate * 100) / 100 // Round to 2 decimal places
+        hitRate: Math.round(hitRate * 100) / 100, // Round to 2 decimal places
       };
     }
 
@@ -178,7 +178,7 @@ export class PerformanceMetrics {
     return Object.entries(endpointStats)
       .map(([endpoint, stats]) => ({
         endpoint,
-        avgDuration: Math.round(stats.avg)
+        avgDuration: Math.round(stats.avg),
       }))
       .sort((a, b) => b.avgDuration - a.avgDuration)
       .slice(0, limit);
@@ -188,7 +188,7 @@ export class PerformanceMetrics {
    * Calculate statistics from metric points
    */
   private static calculateStats(points: MetricPoint[]): MetricStats {
-    const values = points.map(p => p.value).sort((a, b) => a - b);
+    const values = points.map((p) => p.value).sort((a, b) => a - b);
     const count = values.length;
     const sum = values.reduce((acc, val) => acc + val, 0);
 
@@ -200,7 +200,7 @@ export class PerformanceMetrics {
       avg: sum / count,
       p50: this.percentile(values, 0.5),
       p95: this.percentile(values, 0.95),
-      p99: this.percentile(values, 0.99)
+      p99: this.percentile(values, 0.99),
     };
   }
 
@@ -220,7 +220,7 @@ export class PerformanceMetrics {
 
     // Cleanup endpoint metrics
     for (const [key, metrics] of this.endpointMetrics.entries()) {
-      const filtered = metrics.filter(m => m.timestamp > cutoff);
+      const filtered = metrics.filter((m) => m.timestamp > cutoff);
 
       if (filtered.length === 0) {
         this.endpointMetrics.delete(key);
@@ -230,7 +230,7 @@ export class PerformanceMetrics {
     }
 
     // Cleanup query metrics
-    this.queryMetrics = this.queryMetrics.filter(m => m.timestamp > cutoff);
+    this.queryMetrics = this.queryMetrics.filter((m) => m.timestamp > cutoff);
 
     logger.debug('[PerformanceMetrics] Cleaned up old metrics');
   }
@@ -256,10 +256,10 @@ export class PerformanceMetrics {
     return {
       endpoints: {
         total: this.endpointMetrics.size,
-        slowest: this.getSlowestEndpoints(5)
+        slowest: this.getSlowestEndpoints(5),
       },
       caches: this.getCacheStats(),
-      queries: this.getQueryStats()
+      queries: this.getQueryStats(),
     };
   }
 }
diff --git a/backend/src/services/PermissionCache.ts b/backend/src/services/PermissionCache.ts
index ab22298..29638e7 100644
--- a/backend/src/services/PermissionCache.ts
+++ b/backend/src/services/PermissionCache.ts
@@ -34,9 +34,12 @@ export class PermissionCache {
     if (this.cleanupInterval) return;
 
     // Run cleanup every 5 minutes
-    this.cleanupInterval = setInterval(() => {
-      this.cleanup();
-    }, 5 * 60 * 1000);
+    this.cleanupInterval = setInterval(
+      () => {
+        this.cleanup();
+      },
+      5 * 60 * 1000
+    );
 
     logger.info('[PermissionCache] Cleanup interval started');
   }
@@ -79,10 +82,12 @@ export class PermissionCache {
   static setUserPermissions(userId: number, permissions: string[]): void {
     this.userPermissionsCache.set(userId, {
       data: permissions,
-      expiresAt: Date.now() + this.USER_PERMISSIONS_TTL
+      expiresAt: Date.now() + this.USER_PERMISSIONS_TTL,
     });
 
-    logger.debug(`[PermissionCache] Cached permissions for user ${userId} (${permissions.length} permissions, TTL: 5min)`);
+    logger.debug(
+      `[PermissionCache] Cached permissions for user ${userId} (${permissions.length} permissions, TTL: 5min)`
+    );
   }
 
   /**
@@ -112,10 +117,12 @@ export class PermissionCache {
   static setRolePermissions(roleId: number, permissions: string[]): void {
     this.rolePermissionsCache.set(roleId, {
       data: permissions,
-      expiresAt: Date.now() + this.ROLE_PERMISSIONS_TTL
+      expiresAt: Date.now() + this.ROLE_PERMISSIONS_TTL,
     });
 
-    logger.debug(`[PermissionCache] Cached permissions for role ${roleId} (${permissions.length} permissions, TTL: 10min)`);
+    logger.debug(
+      `[PermissionCache] Cached permissions for role ${roleId} (${permissions.length} permissions, TTL: 10min)`
+    );
   }
 
   /**
@@ -196,7 +203,9 @@ export class PermissionCache {
     }
 
     if (userExpired > 0 || roleExpired > 0) {
-      logger.debug(`[PermissionCache] Cleanup: removed ${userExpired} user entries, ${roleExpired} role entries`);
+      logger.debug(
+        `[PermissionCache] Cleanup: removed ${userExpired} user entries, ${roleExpired} role entries`
+      );
     }
   }
 
@@ -211,7 +220,7 @@ export class PermissionCache {
     return {
       userCacheSize: this.userPermissionsCache.size,
       roleCacheSize: this.rolePermissionsCache.size,
-      totalSize: this.userPermissionsCache.size + this.rolePermissionsCache.size
+      totalSize: this.userPermissionsCache.size + this.rolePermissionsCache.size,
     };
   }
 }
diff --git a/backend/src/services/PlayTrackingService.ts b/backend/src/services/PlayTrackingService.ts
index 5ccf1fa..0a758c6 100644
--- a/backend/src/services/PlayTrackingService.ts
+++ b/backend/src/services/PlayTrackingService.ts
@@ -2,7 +2,12 @@ import { UserDatabaseService } from './UserDatabaseService';
 import { DatabaseService } from './DatabaseService';
 import { logger } from '../utils/logger';
 import { randomBytes } from 'crypto';
-import { PlaySessionRow, GameStatsRow, PlaytimeActivityRow, DistributionRow } from '../types/database-rows';
+import {
+  PlaySessionRow,
+  GameStatsRow,
+  PlaytimeActivityRow,
+  DistributionRow,
+} from '../types/database-rows';
 
 export interface PlaySession {
   id: number;
@@ -49,7 +54,9 @@ export class PlayTrackingService {
         [userId, gameId, gameTitle, sessionId]
       );
 
-      logger.info(`Play session started: userId=${userId}, gameId=${gameId}, sessionId=${sessionId}`);
+      logger.info(
+        `Play session started: userId=${userId}, gameId=${gameId}, sessionId=${sessionId}`
+      );
       return sessionId;
     } catch (error) {
       logger.error('Failed to start play session:', error);
@@ -92,7 +99,12 @@ export class PlayTrackingService {
       );
 
       // Update aggregated stats
-      await this.updateGameStats(session.user_id, session.game_id, session.game_title, durationSeconds);
+      await this.updateGameStats(
+        session.user_id,
+        session.game_id,
+        session.game_title,
+        durationSeconds
+      );
       await this.updateUserStats(session.user_id, durationSeconds);
 
       // Update aggregate stats in Flashpoint database for compatibility with Launcher
@@ -150,10 +162,9 @@ export class PlayTrackingService {
   private async updateUserStats(userId: number, durationSeconds: number): Promise<void> {
     try {
       // Check if stats exist
-      const existing = UserDatabaseService.get(
-        'SELECT * FROM user_stats WHERE user_id = ?',
-        [userId]
-      );
+      const existing = UserDatabaseService.get('SELECT * FROM user_stats WHERE user_id = ?', [
+        userId,
+      ]);
 
       // Count unique games played
       const gamesPlayed = UserDatabaseService.get(
@@ -221,12 +232,7 @@ export class PlayTrackingService {
             playtime = ?,
             playCounter = ?
         WHERE id = ?`,
-        [
-          aggregateStats.lastPlayed,
-          aggregateStats.totalPlaytime,
-          aggregateStats.totalPlays,
-          gameId
-        ]
+        [aggregateStats.lastPlayed, aggregateStats.totalPlaytime, aggregateStats.totalPlays, gameId]
       );
 
       logger.info(
@@ -256,7 +262,7 @@ export class PlayTrackingService {
           totalPlaytimeSeconds: 0,
           totalSessions: 0,
           firstPlayAt: null,
-          lastPlayAt: null
+          lastPlayAt: null,
         };
       }
 
@@ -266,7 +272,7 @@ export class PlayTrackingService {
         totalPlaytimeSeconds: stats.total_playtime_seconds,
         totalSessions: stats.total_sessions,
         firstPlayAt: stats.first_play_at,
-        lastPlayAt: stats.last_play_at
+        lastPlayAt: stats.last_play_at,
       };
     } catch (error) {
       logger.error('Failed to get user stats:', error);
@@ -294,7 +300,7 @@ export class PlayTrackingService {
         totalPlays: stat.total_plays,
         totalPlaytimeSeconds: stat.total_playtime_seconds,
         firstPlayedAt: stat.first_played_at,
-        lastPlayedAt: stat.last_played_at
+        lastPlayedAt: stat.last_played_at,
       }));
     } catch (error) {
       logger.error('Failed to get user game stats:', error);
@@ -324,7 +330,7 @@ export class PlayTrackingService {
         startedAt: session.started_at,
         endedAt: session.ended_at,
         durationSeconds: session.duration_seconds,
-        sessionId: session.session_id
+        sessionId: session.session_id,
       }));
     } catch (error) {
       logger.error('Failed to get user play history:', error);
@@ -352,7 +358,7 @@ export class PlayTrackingService {
         totalPlays: stat.total_plays,
         totalPlaytimeSeconds: stat.total_playtime_seconds,
         firstPlayedAt: stat.first_played_at,
-        lastPlayedAt: stat.last_played_at
+        lastPlayedAt: stat.last_played_at,
       }));
     } catch (error) {
       logger.error('Failed to get top games:', error);
@@ -363,7 +369,10 @@ export class PlayTrackingService {
   /**
    * Get play activity over time (daily aggregation)
    */
-  async getPlayActivityOverTime(userId: number, days = 30): Promise<Array<{ date: string; playtime: number; sessions: number }>> {
+  async getPlayActivityOverTime(
+    userId: number,
+    days = 30
+  ): Promise<Array<{ date: string; playtime: number; sessions: number }>> {
     try {
       // Validate and sanitize days parameter to prevent SQL injection
       // Ensure it's a positive integer between 1 and 365
@@ -386,7 +395,7 @@ export class PlayTrackingService {
       return data.map((row: PlaytimeActivityRow) => ({
         date: row.date,
         playtime: row.total_playtime || 0,
-        sessions: row.session_count || 0
+        sessions: row.session_count || 0,
       }));
     } catch (error) {
       logger.error('Failed to get play activity over time:', error);
@@ -397,7 +406,10 @@ export class PlayTrackingService {
   /**
    * Get games distribution by playtime
    */
-  async getGamesDistribution(userId: number, limit = 10): Promise<Array<{ name: string; value: number }>> {
+  async getGamesDistribution(
+    userId: number,
+    limit = 10
+  ): Promise<Array<{ name: string; value: number }>> {
     try {
       const stats = UserDatabaseService.all(
         `SELECT game_title, total_playtime_seconds
@@ -410,7 +422,7 @@ export class PlayTrackingService {
 
       return stats.map((stat: DistributionRow) => ({
         name: stat.game_title,
-        value: stat.total_playtime_seconds
+        value: stat.total_playtime_seconds,
       }));
     } catch (error) {
       logger.error('Failed to get games distribution:', error);
diff --git a/backend/src/services/PlaylistService.ts b/backend/src/services/PlaylistService.ts
index acec952..e3147c9 100644
--- a/backend/src/services/PlaylistService.ts
+++ b/backend/src/services/PlaylistService.ts
@@ -45,7 +45,11 @@ export class PlaylistService {
 
             // Extract game IDs from playlist (they're objects with gameId property)
             const gameIds = Array.isArray(playlist.games)
-              ? playlist.games.map((g: unknown) => typeof g === 'string' ? g : (g as {gameId?: string}).gameId).filter(Boolean)
+              ? playlist.games
+                  .map((g: unknown) =>
+                    typeof g === 'string' ? g : (g as { gameId?: string }).gameId
+                  )
+                  .filter(Boolean)
               : [];
 
             playlists.push({
@@ -55,7 +59,7 @@ export class PlaylistService {
               author: playlist.author,
               library: playlist.library,
               icon: playlist.icon,
-              gameIds
+              gameIds,
             });
           } catch (error) {
             logger.warn(`Failed to parse playlist file: ${file}`, error);
@@ -91,7 +95,8 @@ export class PlaylistService {
             if (playlist.games && Array.isArray(playlist.games)) {
               for (const playlistGame of playlist.games) {
                 // Playlist games are objects with gameId property, not just strings
-                const gameId = typeof playlistGame === 'string' ? playlistGame : playlistGame.gameId;
+                const gameId =
+                  typeof playlistGame === 'string' ? playlistGame : playlistGame.gameId;
 
                 if (gameId) {
                   const game = await this.gameService.getGameById(gameId);
@@ -109,7 +114,7 @@ export class PlaylistService {
               author: playlist.author,
               library: playlist.library,
               icon: playlist.icon,
-              games
+              games,
             };
           }
         }
@@ -135,7 +140,7 @@ export class PlaylistService {
         description: data.description || '',
         author: data.author || 'Unknown',
         library: data.library || 'arcade',
-        games: []
+        games: [],
       };
 
       // Write playlist file
@@ -151,7 +156,10 @@ export class PlaylistService {
     }
   }
 
-  async addGamesToPlaylist(playlistId: string, data: AddGamesToPlaylistDto): Promise<Playlist | null> {
+  async addGamesToPlaylist(
+    playlistId: string,
+    data: AddGamesToPlaylistDto
+  ): Promise<Playlist | null> {
     try {
       const playlistsPath = config.flashpointPlaylistsPath;
       const files = await fs.readdir(playlistsPath);
@@ -168,14 +176,14 @@ export class PlaylistService {
           if (id === playlistId) {
             // Get existing game IDs
             const existingGameIds = Array.isArray(playlist.games)
-              ? playlist.games.map((g: any) => typeof g === 'string' ? g : g.gameId)
+              ? playlist.games.map((g: any) => (typeof g === 'string' ? g : g.gameId))
               : [];
 
             // Add new game IDs (avoid duplicates)
-            const newGameIds = data.gameIds.filter(gameId => !existingGameIds.includes(gameId));
+            const newGameIds = data.gameIds.filter((gameId) => !existingGameIds.includes(gameId));
 
             // Convert to playlist game format
-            const newGames = newGameIds.map(gameId => ({ gameId }));
+            const newGames = newGameIds.map((gameId) => ({ gameId }));
 
             playlist.games = [...(playlist.games || []), ...newGames];
 
@@ -197,7 +205,10 @@ export class PlaylistService {
     }
   }
 
-  async removeGamesFromPlaylist(playlistId: string, data: AddGamesToPlaylistDto): Promise<Playlist | null> {
+  async removeGamesFromPlaylist(
+    playlistId: string,
+    data: AddGamesToPlaylistDto
+  ): Promise<Playlist | null> {
     try {
       const playlistsPath = config.flashpointPlaylistsPath;
       const files = await fs.readdir(playlistsPath);
@@ -266,8 +277,8 @@ export class PlaylistService {
   private generateUUID(): string {
     // Simple UUID v4 generator
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-      const r = Math.random() * 16 | 0;
-      const v = c === 'x' ? r : (r & 0x3 | 0x8);
+      const r = (Math.random() * 16) | 0;
+      const v = c === 'x' ? r : (r & 0x3) | 0x8;
       return v.toString(16);
     });
   }
diff --git a/backend/src/services/PreferencesService.ts b/backend/src/services/PreferencesService.ts
index a23b005..a0c2051 100644
--- a/backend/src/services/PreferencesService.ts
+++ b/backend/src/services/PreferencesService.ts
@@ -41,7 +41,7 @@ export class PreferencesService {
     const now = Date.now();
 
     // Return cached preferences if still valid
-    if (this.preferences && (now - this.lastLoadTime) < this.CACHE_TTL) {
+    if (this.preferences && now - this.lastLoadTime < this.CACHE_TTL) {
       return this.preferences;
     }
 
@@ -78,11 +78,13 @@ export class PreferencesService {
         sourceCount: parsed.gameDataSources?.length || 0,
         dataPacksPath: parsed.dataPacksFolderPath,
         imageFolderPath: parsed.imageFolderPath,
-        onDemandBaseUrl: parsed.onDemandBaseUrl
+        onDemandBaseUrl: parsed.onDemandBaseUrl,
       });
     } catch (error) {
       logger.error('Failed to load preferences:', error);
-      throw new Error(`Failed to load Flashpoint preferences: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      throw new Error(
+        `Failed to load Flashpoint preferences: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
     }
   }
 
diff --git a/backend/src/services/RoleService.ts b/backend/src/services/RoleService.ts
index 16e094e..1641c2d 100644
--- a/backend/src/services/RoleService.ts
+++ b/backend/src/services/RoleService.ts
@@ -18,9 +18,9 @@ export class RoleService {
     );
 
     // Get permissions for each role
-    return roles.map(role => ({
+    return roles.map((role) => ({
       ...role,
-      permissions: this.getRolePermissions(role.id)
+      permissions: this.getRolePermissions(role.id),
     }));
   }
 
@@ -38,7 +38,7 @@ export class RoleService {
 
     return {
       ...role,
-      permissions: this.getRolePermissions(id)
+      permissions: this.getRolePermissions(id),
     };
   }
 
@@ -100,7 +100,12 @@ export class RoleService {
   /**
    * Update role
    */
-  async updateRole(id: number, name?: string, description?: string, priority?: number): Promise<Role> {
+  async updateRole(
+    id: number,
+    name?: string,
+    description?: string,
+    priority?: number
+  ): Promise<Role> {
     const role = await this.getRoleById(id);
     if (!role) {
       throw new AppError(404, 'Role not found');
@@ -115,10 +120,10 @@ export class RoleService {
     const params: any[] = [];
 
     if (name !== undefined) {
-      const existing = UserDatabaseService.get(
-        'SELECT id FROM roles WHERE name = ? AND id != ?',
-        [name, id]
-      );
+      const existing = UserDatabaseService.get('SELECT id FROM roles WHERE name = ? AND id != ?', [
+        name,
+        id,
+      ]);
       if (existing) {
         throw new AppError(409, 'Role name already exists');
       }
@@ -140,14 +145,11 @@ export class RoleService {
       return role;
     }
 
-    updates.push("updated_at = ?");
+    updates.push('updated_at = ?');
     params.push(new Date().toISOString());
     params.push(id);
 
-    UserDatabaseService.run(
-      `UPDATE roles SET ${updates.join(', ')} WHERE id = ?`,
-      params
-    );
+    UserDatabaseService.run(`UPDATE roles SET ${updates.join(', ')} WHERE id = ?`, params);
 
     return (await this.getRoleById(id))!;
   }
@@ -201,10 +203,9 @@ export class RoleService {
     }
 
     // Check if role is assigned to users
-    const userCount = UserDatabaseService.get(
-      'SELECT COUNT(*) as count FROM users WHERE role_id = ?',
-      [id]
-    )?.count || 0;
+    const userCount =
+      UserDatabaseService.get('SELECT COUNT(*) as count FROM users WHERE role_id = ?', [id])
+        ?.count || 0;
 
     if (userCount > 0) {
       throw new AppError(409, `Cannot delete role: ${userCount} users are assigned to this role`);
diff --git a/backend/src/services/RuffleService.ts b/backend/src/services/RuffleService.ts
index 9ba60c6..a115814 100644
--- a/backend/src/services/RuffleService.ts
+++ b/backend/src/services/RuffleService.ts
@@ -73,9 +73,9 @@ export class RuffleService {
       const response = await axios.get(`${this.githubApiUrl}?per_page=1`, {
         timeout: 10000,
         headers: {
-          'Accept': 'application/vnd.github.v3+json',
-          'User-Agent': 'Flashpoint-Web'
-        }
+          Accept: 'application/vnd.github.v3+json',
+          'User-Agent': 'Flashpoint-Web',
+        },
       });
 
       const release = response.data[0];
@@ -84,9 +84,7 @@ export class RuffleService {
       }
 
       // Find web-selfhosted asset
-      const asset = release.assets.find((a: any) =>
-        a.name.includes('web-selfhosted.zip')
-      );
+      const asset = release.assets.find((a: any) => a.name.includes('web-selfhosted.zip'));
 
       if (!asset) {
         throw new Error('web-selfhosted.zip not found in release');
@@ -96,7 +94,7 @@ export class RuffleService {
         version: release.tag_name.replace('nightly-', ''),
         downloadUrl: asset.browser_download_url,
         publishedAt: release.published_at,
-        changelog: release.body || 'No changelog available.'
+        changelog: release.body || 'No changelog available.',
       };
     } catch (error) {
       logger.error('Error fetching latest Ruffle version:', error);
@@ -128,7 +126,7 @@ export class RuffleService {
       latestVersion: latest.version,
       updateAvailable,
       changelog: latest.changelog,
-      publishedAt: latest.publishedAt
+      publishedAt: latest.publishedAt,
     };
   }
 
@@ -149,8 +147,8 @@ export class RuffleService {
         responseType: 'arraybuffer',
         timeout: 60000, // 60 seconds for download
         headers: {
-          'User-Agent': 'Flashpoint-Web'
-        }
+          'User-Agent': 'Flashpoint-Web',
+        },
       });
 
       logger.info('[RuffleService] Download complete, extracting...');
@@ -198,7 +196,7 @@ export class RuffleService {
       return {
         success: true,
         version: latest.version,
-        message: `Successfully updated Ruffle to version ${latest.version}`
+        message: `Successfully updated Ruffle to version ${latest.version}`,
       };
     } catch (error) {
       logger.error('[RuffleService] Error updating Ruffle:', error);
diff --git a/backend/src/services/StatisticsService.ts b/backend/src/services/StatisticsService.ts
index 2ec170e..5787c9c 100644
--- a/backend/src/services/StatisticsService.ts
+++ b/backend/src/services/StatisticsService.ts
@@ -15,7 +15,7 @@ export class StatisticsService {
   private playlistService = new PlaylistService();
   private cache: { data: Statistics | null; timestamp: number } = {
     data: null,
-    timestamp: 0
+    timestamp: 0,
   };
   private readonly CACHE_TTL = 5 * 60 * 1000; // 5 minutes
 
@@ -73,7 +73,10 @@ export class StatisticsService {
         const uniqueTags = new Set<string>();
 
         for (const row of results) {
-          const tags = row.tagsStr.split(';').map(tag => tag.trim()).filter(tag => tag);
+          const tags = row.tagsStr
+            .split(';')
+            .map((tag) => tag.trim())
+            .filter((tag) => tag);
           for (const tag of tags) {
             uniqueTags.add(tag);
           }
@@ -103,7 +106,7 @@ export class StatisticsService {
         totalPlatforms,
         webPlayableGames,
         totalPlaylists,
-        totalTags
+        totalTags,
       };
 
       logger.debug('Statistics calculated:', statistics);
@@ -111,7 +114,7 @@ export class StatisticsService {
       // Update cache
       this.cache = {
         data: statistics,
-        timestamp: Date.now()
+        timestamp: Date.now(),
       };
 
       return statistics;
diff --git a/backend/src/services/SyncStatusService.ts b/backend/src/services/SyncStatusService.ts
index 7200d71..6de6ddd 100644
--- a/backend/src/services/SyncStatusService.ts
+++ b/backend/src/services/SyncStatusService.ts
@@ -31,7 +31,7 @@ export class SyncStatusService {
       isRunning: false,
       stage: 'idle',
       progress: 0,
-      message: 'No sync in progress'
+      message: 'No sync in progress',
     };
   }
 
@@ -69,7 +69,7 @@ export class SyncStatusService {
       stage: 'initializing',
       progress: 0,
       message: 'Starting metadata sync...',
-      startTime: new Date().toISOString()
+      startTime: new Date().toISOString(),
     };
 
     logger.info('[SyncStatus] Sync started');
@@ -121,7 +121,7 @@ export class SyncStatusService {
       isRunning: false,
       stage: 'idle',
       progress: 0,
-      message: 'No sync in progress'
+      message: 'No sync in progress',
     };
 
     logger.debug('[SyncStatus] Status reset');
diff --git a/backend/src/services/SystemSettingsService.ts b/backend/src/services/SystemSettingsService.ts
index 7371a56..8bd5d72 100644
--- a/backend/src/services/SystemSettingsService.ts
+++ b/backend/src/services/SystemSettingsService.ts
@@ -137,10 +137,7 @@ export class SystemSettingsService {
    * Check if a setting exists
    */
   exists(key: string): boolean {
-    const row = UserDatabaseService.get(
-      'SELECT 1 FROM system_settings WHERE key = ?',
-      [key]
-    );
+    const row = UserDatabaseService.get('SELECT 1 FROM system_settings WHERE key = ?', [key]);
     return !!row;
   }
 
@@ -182,7 +179,7 @@ export class SystemSettingsService {
       category: row.category,
       description: row.description,
       isPublic: row.is_public === 1,
-      defaultValue: this.parseValue(row.default_value, row.data_type)
+      defaultValue: this.parseValue(row.default_value, row.data_type),
     };
   }
 
@@ -203,21 +200,27 @@ export class SystemSettingsService {
       const schema = JSON.parse(row.validation_schema);
       this.validateAgainstSchema(value, schema, key);
     } catch (error) {
-      throw new Error(`Invalid validation schema for ${key}: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      throw new Error(
+        `Invalid validation schema for ${key}: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
     }
   }
 
   /**
    * Validate value against JSON schema
    */
-  private validateAgainstSchema(value: SettingValue, schema: Record<string, unknown>, key: string): void {
+  private validateAgainstSchema(
+    value: SettingValue,
+    schema: Record<string, unknown>,
+    key: string
+  ): void {
     // Type validation
     if (typeof schema.type === 'string') {
       const actualType = this.getType(value);
 
       // Allow integers when schema expects 'number' (e.g., 0, 1 are valid for float settings)
-      const isValidType = actualType === schema.type ||
-        (schema.type === 'number' && actualType === 'integer');
+      const isValidType =
+        actualType === schema.type || (schema.type === 'number' && actualType === 'integer');
 
       if (!isValidType) {
         throw new Error(`Setting '${key}' must be of type ${schema.type}, got ${actualType}`);
diff --git a/backend/src/services/UpdateService.ts b/backend/src/services/UpdateService.ts
index 8dec57a..767da78 100644
--- a/backend/src/services/UpdateService.ts
+++ b/backend/src/services/UpdateService.ts
@@ -45,7 +45,7 @@ export class UpdateService {
         { id: 'core-manager', name: 'Manager' },
         { id: 'core-database', name: 'Database' },
         { id: 'core-server-legacy', name: 'Legacy Server' },
-        { id: 'core-configuration', name: 'Configuration' }
+        { id: 'core-configuration', name: 'Configuration' },
       ];
 
       // Read components directory to check installed versions
@@ -58,7 +58,10 @@ export class UpdateService {
           const componentPath = path.join(componentsDir, component.id);
 
           // Check if component file exists
-          const exists = await fs.access(componentPath).then(() => true).catch(() => false);
+          const exists = await fs
+            .access(componentPath)
+            .then(() => true)
+            .catch(() => false);
 
           if (exists) {
             // Read component file - first line contains hash, size, and dependencies
@@ -76,14 +79,14 @@ export class UpdateService {
               id: component.id,
               name: component.name,
               state: 'UP_TO_DATE',
-              currentVersion
+              currentVersion,
             });
           } else {
             logger.warn(`[UpdateService] Component file not found: ${componentPath}`);
             componentsStatus.push({
               id: component.id,
               name: component.name,
-              state: 'ERROR'
+              state: 'ERROR',
             });
           }
         } catch (error) {
@@ -91,7 +94,7 @@ export class UpdateService {
           componentsStatus.push({
             id: component.id,
             name: component.name,
-            state: 'ERROR'
+            state: 'ERROR',
           });
         }
       }
@@ -104,7 +107,6 @@ export class UpdateService {
       } catch (error) {
         logger.warn('[UpdateService] Could not fetch remote component list:', error);
       }
-
     } catch (error) {
       logger.error('[UpdateService] Error during update check:', error);
     }
@@ -136,7 +138,7 @@ export class UpdateService {
       version,
       buildDate,
       componentsStatus,
-      lastChecked: new Date().toISOString()
+      lastChecked: new Date().toISOString(),
     };
   }
 
@@ -145,13 +147,16 @@ export class UpdateService {
 
     try {
       // Check if Flashpoint Manager exists
-      const managerExists = await fs.access(this.managerPath).then(() => true).catch(() => false);
+      const managerExists = await fs
+        .access(this.managerPath)
+        .then(() => true)
+        .catch(() => false);
 
       if (!managerExists) {
         logger.warn('[UpdateService] Flashpoint Manager not found at:', this.managerPath);
         return {
           success: false,
-          message: 'Flashpoint Manager not found. Please update manually.'
+          message: 'Flashpoint Manager not found. Please update manually.',
         };
       }
 
@@ -159,7 +164,7 @@ export class UpdateService {
       return new Promise((resolve, reject) => {
         const fpm = spawn(this.managerPath, ['update'], {
           cwd: path.join(this.flashpointRoot, 'Manager'),
-          windowsHide: true
+          windowsHide: true,
         });
 
         let errorOutput = '';
@@ -178,13 +183,13 @@ export class UpdateService {
             logger.info('[UpdateService] Updates installed successfully');
             resolve({
               success: true,
-              message: 'Updates installed successfully. Please restart the application.'
+              message: 'Updates installed successfully. Please restart the application.',
             });
           } else {
             logger.error('[UpdateService] Update failed with code:', code);
             resolve({
               success: false,
-              message: `Update failed: ${errorOutput || 'Unknown error'}`
+              message: `Update failed: ${errorOutput || 'Unknown error'}`,
             });
           }
         });
@@ -195,28 +200,37 @@ export class UpdateService {
         });
 
         // Timeout after 5 minutes
-        setTimeout(() => {
-          fpm.kill();
-          reject(new Error('Update process timed out'));
-        }, 5 * 60 * 1000);
+        setTimeout(
+          () => {
+            fpm.kill();
+            reject(new Error('Update process timed out'));
+          },
+          5 * 60 * 1000
+        );
       });
-
     } catch (error) {
       logger.error('[UpdateService] Error during update installation:', error);
       return {
         success: false,
-        message: error instanceof Error ? error.message : 'Failed to install updates'
+        message: error instanceof Error ? error.message : 'Failed to install updates',
       };
     }
   }
 
-  async getSystemInfo(): Promise<{ flashpointRoot: string; managerPath: string; managerExists: boolean }> {
-    const managerExists = await fs.access(this.managerPath).then(() => true).catch(() => false);
+  async getSystemInfo(): Promise<{
+    flashpointRoot: string;
+    managerPath: string;
+    managerExists: boolean;
+  }> {
+    const managerExists = await fs
+      .access(this.managerPath)
+      .then(() => true)
+      .catch(() => false);
 
     return {
       flashpointRoot: this.flashpointRoot,
       managerPath: this.managerPath,
-      managerExists
+      managerExists,
     };
   }
 }
diff --git a/backend/src/services/UserDatabaseService.ts b/backend/src/services/UserDatabaseService.ts
index 4608f8e..12069ad 100644
--- a/backend/src/services/UserDatabaseService.ts
+++ b/backend/src/services/UserDatabaseService.ts
@@ -93,7 +93,7 @@ export class UserDatabaseService {
       ).all() as { name: string }[];
 
       // Filter out the migrations table itself to check for other tables
-      const otherTables = tables.filter(t => t.name !== 'migrations');
+      const otherTables = tables.filter((t) => t.name !== 'migrations');
 
       if (otherTables.length === 0) {
         // New database, no detection needed
@@ -113,7 +113,7 @@ export class UserDatabaseService {
 
       // Detect 001_complete_schema (check for users table)
       // This migration includes all schema, seed data, and indexes
-      if (otherTables.some(t => t.name === 'users')) {
+      if (otherTables.some((t) => t.name === 'users')) {
         markApplied('001_complete_schema', 'Detected existing schema and seed data');
       }
 
@@ -140,8 +140,9 @@ export class UserDatabaseService {
       const migrationDir = path.join(__dirname, '../migrations');
 
       // Get all migration files (*.sql files with numeric prefix)
-      const files = fs.readdirSync(migrationDir)
-        .filter(f => f.endsWith('.sql') && /^\d{3}_/.test(f))
+      const files = fs
+        .readdirSync(migrationDir)
+        .filter((f) => f.endsWith('.sql') && /^\d{3}_/.test(f))
         .sort(); // Alphabetical sort ensures correct order (001, 002, etc.)
 
       logger.info(`[UserDB] Found ${files.length} migration file(s)`);
@@ -151,9 +152,7 @@ export class UserDatabaseService {
         const migrationPath = path.join(migrationDir, file);
 
         // Check if migration has already been applied
-        const applied = this.db!.prepare(
-          'SELECT 1 FROM migrations WHERE name = ?'
-        ).get(name);
+        const applied = this.db!.prepare('SELECT 1 FROM migrations WHERE name = ?').get(name);
 
         if (!applied) {
           logger.info(`[UserDB] Running migration: ${name}`);
@@ -226,15 +225,19 @@ export class UserDatabaseService {
   static exec<T = any>(sql: string, params: any[] = []): T[] {
     const db = this.getDatabase();
 
-    return measureQueryPerformance(() => {
-      try {
-        const stmt = db.prepare(sql);
-        return stmt.all(params) as T[];
-      } catch (error) {
-        logger.error('[UserDB] Query error:', { sql, params, error });
-        throw error;
-      }
-    }, sql, params);
+    return measureQueryPerformance(
+      () => {
+        try {
+          const stmt = db.prepare(sql);
+          return stmt.all(params) as T[];
+        } catch (error) {
+          logger.error('[UserDB] Query error:', { sql, params, error });
+          throw error;
+        }
+      },
+      sql,
+      params
+    );
   }
 
   /**
@@ -243,16 +246,20 @@ export class UserDatabaseService {
   static get<T = any>(sql: string, params: any[] = []): T | undefined {
     const db = this.getDatabase();
 
-    return measureQueryPerformance(() => {
-      try {
-        const stmt = db.prepare(sql);
-        const result = stmt.get(params);
-        return result as T | undefined;
-      } catch (error) {
-        logger.error('[UserDB] Get error:', { sql, params, error });
-        throw error;
-      }
-    }, sql, params);
+    return measureQueryPerformance(
+      () => {
+        try {
+          const stmt = db.prepare(sql);
+          const result = stmt.get(params);
+          return result as T | undefined;
+        } catch (error) {
+          logger.error('[UserDB] Get error:', { sql, params, error });
+          throw error;
+        }
+      },
+      sql,
+      params
+    );
   }
 
   /**
@@ -268,19 +275,23 @@ export class UserDatabaseService {
   static run(sql: string, params: any[] = []): BetterSqlite3.RunResult {
     const db = this.getDatabase();
 
-    return measureQueryPerformance(() => {
-      try {
-        const stmt = db.prepare(sql);
-        return stmt.run(params);
-      } catch (error) {
-        logger.error('[UserDB] Run error:', { sql, params });
-        logger.error('[UserDB] Error details:', error);
-        if (error instanceof Error) {
-          logger.error('[UserDB] Error stack:', error.stack);
+    return measureQueryPerformance(
+      () => {
+        try {
+          const stmt = db.prepare(sql);
+          return stmt.run(params);
+        } catch (error) {
+          logger.error('[UserDB] Run error:', { sql, params });
+          logger.error('[UserDB] Error details:', error);
+          if (error instanceof Error) {
+            logger.error('[UserDB] Error stack:', error.stack);
+          }
+          throw error;
         }
-        throw error;
-      }
-    }, sql, params);
+      },
+      sql,
+      params
+    );
   }
 
   /**
diff --git a/backend/src/services/UserPlaylistService.ts b/backend/src/services/UserPlaylistService.ts
index 9d7484c..5b956d8 100644
--- a/backend/src/services/UserPlaylistService.ts
+++ b/backend/src/services/UserPlaylistService.ts
@@ -171,12 +171,7 @@ export class UserPlaylistService {
       VALUES (?, ?, ?, ?)
     `);
 
-    const result = stmt.run(
-      userId,
-      data.title,
-      data.description || null,
-      data.icon || null
-    );
+    const result = stmt.run(userId, data.title, data.description || null, data.icon || null);
 
     logger.info(`Created playlist "${data.title}" for user ${userId}`);
 
@@ -219,7 +214,7 @@ export class UserPlaylistService {
       return playlist;
     }
 
-    updates.push('updated_at = datetime(\'now\')');
+    updates.push("updated_at = datetime('now')");
     values.push(playlistId, userId);
 
     const stmt = db.prepare(`
@@ -381,7 +376,7 @@ export class UserPlaylistService {
       // Create new user playlist
       const userPlaylist = this.createPlaylist(userId, {
         title: newTitle || `${flashpointPlaylist.title} (Copy)`,
-        description: flashpointPlaylist.description || undefined
+        description: flashpointPlaylist.description || undefined,
       });
 
       // Extract game IDs from flashpoint playlist
@@ -430,7 +425,9 @@ export class UserPlaylistService {
     // Verify ownership
     const playlist = this.getPlaylistById(playlistId, userId);
     if (!playlist) {
-      logger.warn(`Cannot enable sharing for playlist ${playlistId}: not found or not owned by user ${userId}`);
+      logger.warn(
+        `Cannot enable sharing for playlist ${playlistId}: not found or not owned by user ${userId}`
+      );
       return null;
     }
 
@@ -448,20 +445,14 @@ export class UserPlaylistService {
       WHERE id = ? AND user_id = ?
     `);
 
-    stmt.run(
-      shareToken,
-      options.expiresAt || null,
-      options.showOwner ? 1 : 0,
-      playlistId,
-      userId
-    );
+    stmt.run(shareToken, options.expiresAt || null, options.showOwner ? 1 : 0, playlistId, userId);
 
     logger.info(`Enabled sharing for playlist ${playlistId} (user ${userId})`);
 
     return {
       shareToken,
       expiresAt: options.expiresAt || null,
-      showOwner: options.showOwner || false
+      showOwner: options.showOwner || false,
     };
   }
 
@@ -475,7 +466,9 @@ export class UserPlaylistService {
     // Verify ownership
     const playlist = this.getPlaylistById(playlistId, userId);
     if (!playlist) {
-      logger.warn(`Cannot disable sharing for playlist ${playlistId}: not found or not owned by user ${userId}`);
+      logger.warn(
+        `Cannot disable sharing for playlist ${playlistId}: not found or not owned by user ${userId}`
+      );
       return null;
     }
 
@@ -502,7 +495,9 @@ export class UserPlaylistService {
     // Verify ownership
     const playlist = this.getPlaylistById(playlistId, userId);
     if (!playlist) {
-      logger.warn(`Cannot regenerate token for playlist ${playlistId}: not found or not owned by user ${userId}`);
+      logger.warn(
+        `Cannot regenerate token for playlist ${playlistId}: not found or not owned by user ${userId}`
+      );
       return null;
     }
 
@@ -523,7 +518,7 @@ export class UserPlaylistService {
     return {
       shareToken: newToken,
       expiresAt: playlist.shareExpiresAt || null,
-      showOwner: playlist.showOwner || false
+      showOwner: playlist.showOwner || false,
     };
   }
 
@@ -540,7 +535,9 @@ export class UserPlaylistService {
     // Verify ownership
     const playlist = this.getPlaylistById(playlistId, userId);
     if (!playlist) {
-      logger.warn(`Cannot update share settings for playlist ${playlistId}: not found or not owned by user ${userId}`);
+      logger.warn(
+        `Cannot update share settings for playlist ${playlistId}: not found or not owned by user ${userId}`
+      );
       return null;
     }
 
@@ -559,7 +556,7 @@ export class UserPlaylistService {
 
     stmt.run(
       options.expiresAt !== undefined ? options.expiresAt : playlist.shareExpiresAt,
-      options.showOwner !== undefined ? (options.showOwner ? 1 : 0) : (playlist.showOwner ? 1 : 0),
+      options.showOwner !== undefined ? (options.showOwner ? 1 : 0) : playlist.showOwner ? 1 : 0,
       playlistId,
       userId
     );
@@ -568,8 +565,9 @@ export class UserPlaylistService {
 
     return {
       shareToken: playlist.shareToken,
-      expiresAt: options.expiresAt !== undefined ? options.expiresAt : (playlist.shareExpiresAt || null),
-      showOwner: options.showOwner !== undefined ? options.showOwner : (playlist.showOwner || false)
+      expiresAt:
+        options.expiresAt !== undefined ? options.expiresAt : playlist.shareExpiresAt || null,
+      showOwner: options.showOwner !== undefined ? options.showOwner : playlist.showOwner || false,
     };
   }
 
@@ -591,7 +589,9 @@ export class UserPlaylistService {
     const playlist = stmt.get(shareToken) as UserPlaylist | undefined;
 
     if (!playlist) {
-      logger.debug(`Shared playlist not found or expired for token: ${shareToken.substring(0, 8)}...`);
+      logger.debug(
+        `Shared playlist not found or expired for token: ${shareToken.substring(0, 8)}...`
+      );
       return null;
     }
 
@@ -661,11 +661,7 @@ export class UserPlaylistService {
    * Creates new playlist with same title (+ " (Copy)"), description, icon
    * Copies all games with same order
    */
-  cloneSharedPlaylist(
-    shareToken: string,
-    userId: number,
-    newTitle?: string
-  ): UserPlaylist | null {
+  cloneSharedPlaylist(shareToken: string, userId: number, newTitle?: string): UserPlaylist | null {
     const db = this.userDb.getDatabase();
 
     // Get shared playlist
@@ -680,7 +676,7 @@ export class UserPlaylistService {
     const newPlaylist = this.createPlaylist(userId, {
       title,
       description: sourcePlaylist.description || undefined,
-      icon: sourcePlaylist.icon || undefined
+      icon: sourcePlaylist.icon || undefined,
     });
 
     // Copy games with same order
diff --git a/backend/src/services/UserService.ts b/backend/src/services/UserService.ts
index c8567da..2292451 100644
--- a/backend/src/services/UserService.ts
+++ b/backend/src/services/UserService.ts
@@ -51,19 +51,17 @@ export class UserService {
    */
   async createUser(data: CreateUserData): Promise<User> {
     // Check if username exists
-    const existingUser = UserDatabaseService.get(
-      'SELECT id FROM users WHERE username = ?',
-      [data.username]
-    );
+    const existingUser = UserDatabaseService.get('SELECT id FROM users WHERE username = ?', [
+      data.username,
+    ]);
     if (existingUser) {
       throw new AppError(409, 'Username already exists');
     }
 
     // Check if email exists
-    const existingEmail = UserDatabaseService.get(
-      'SELECT id FROM users WHERE email = ?',
-      [data.email]
-    );
+    const existingEmail = UserDatabaseService.get('SELECT id FROM users WHERE email = ?', [
+      data.email,
+    ]);
     if (existingEmail) {
       throw new AppError(409, 'Email already exists');
     }
@@ -98,10 +96,10 @@ export class UserService {
 
     if (data.email !== undefined) {
       // Check if email is taken by another user
-      const existing = UserDatabaseService.get(
-        'SELECT id FROM users WHERE email = ? AND id != ?',
-        [data.email, id]
-      );
+      const existing = UserDatabaseService.get('SELECT id FROM users WHERE email = ? AND id != ?', [
+        data.email,
+        id,
+      ]);
       if (existing) {
         throw new AppError(409, 'Email already exists');
       }
@@ -123,14 +121,11 @@ export class UserService {
       return user; // No changes
     }
 
-    updates.push("updated_at = ?");
+    updates.push('updated_at = ?');
     params.push(new Date().toISOString());
     params.push(id);
 
-    UserDatabaseService.run(
-      `UPDATE users SET ${updates.join(', ')} WHERE id = ?`,
-      params
-    );
+    UserDatabaseService.run(`UPDATE users SET ${updates.join(', ')} WHERE id = ?`, params);
 
     // Invalidate permission cache if role changed
     if (data.roleId !== undefined) {
@@ -152,10 +147,11 @@ export class UserService {
 
     // Prevent deleting the last admin
     if (user.roleName === 'admin') {
-      const adminCount = UserDatabaseService.get(
-        'SELECT COUNT(*) as count FROM users u JOIN roles r ON u.role_id = r.id WHERE r.name = "admin"',
-        []
-      )?.count || 0;
+      const adminCount =
+        UserDatabaseService.get(
+          'SELECT COUNT(*) as count FROM users u JOIN roles r ON u.role_id = r.id WHERE r.name = "admin"',
+          []
+        )?.count || 0;
 
       if (adminCount <= 1) {
         throw new AppError(403, 'Cannot delete the last admin user');
@@ -169,10 +165,7 @@ export class UserService {
    * Change user password
    */
   async changePassword(id: number, currentPassword: string, newPassword: string): Promise<void> {
-    const user = UserDatabaseService.get(
-      'SELECT password_hash FROM users WHERE id = ?',
-      [id]
-    );
+    const user = UserDatabaseService.get('SELECT password_hash FROM users WHERE id = ?', [id]);
 
     if (!user) {
       throw new AppError(404, 'User not found');
@@ -189,14 +182,13 @@ export class UserService {
     const passwordHash = await hashPassword(newPassword);
 
     // Update password
-    UserDatabaseService.run(
-      "UPDATE users SET password_hash = ?, updated_at = ? WHERE id = ?",
-      [passwordHash, new Date().toISOString(), id]
-    );
+    UserDatabaseService.run('UPDATE users SET password_hash = ?, updated_at = ? WHERE id = ?', [
+      passwordHash,
+      new Date().toISOString(),
+      id,
+    ]);
   }
 
-
-
   /**
    * Get user setting by key
    */
@@ -218,10 +210,13 @@ export class UserService {
       [userId]
     );
 
-    return results.reduce((acc: Record<string, string>, row: any) => {
-      acc[row.setting_key] = row.setting_value;
-      return acc;
-    }, {} as Record<string, string>);
+    return results.reduce(
+      (acc: Record<string, string>, row: any) => {
+        acc[row.setting_key] = row.setting_value;
+        return acc;
+      },
+      {} as Record<string, string>
+    );
   }
 
   /**
@@ -266,7 +261,7 @@ export class UserService {
 
     return {
       mode: mode || 'dark',
-      primaryColor: primaryColor || 'blue'
+      primaryColor: primaryColor || 'blue',
     };
   }
 }
diff --git a/backend/src/telemetry/index.ts b/backend/src/telemetry/index.ts
index 28fcd8c..4aae3e0 100644
--- a/backend/src/telemetry/index.ts
+++ b/backend/src/telemetry/index.ts
@@ -18,4 +18,9 @@ import { initializeTelemetry } from './otel';
 initializeTelemetry();
 
 // Re-export for convenience
-export { initializeTelemetry, shutdownTelemetry, isTelemetryEnabled, getTelemetryConfig } from './otel';
+export {
+  initializeTelemetry,
+  shutdownTelemetry,
+  isTelemetryEnabled,
+  getTelemetryConfig,
+} from './otel';
diff --git a/backend/src/telemetry/otel.ts b/backend/src/telemetry/otel.ts
index 8083018..5dec183 100644
--- a/backend/src/telemetry/otel.ts
+++ b/backend/src/telemetry/otel.ts
@@ -4,7 +4,10 @@ import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
 import { OTLPMetricExporter } from '@opentelemetry/exporter-metrics-otlp-http';
 import { PeriodicExportingMetricReader } from '@opentelemetry/sdk-metrics';
 import { resourceFromAttributes } from '@opentelemetry/resources';
-import { SEMRESATTRS_SERVICE_NAME, SEMRESATTRS_SERVICE_VERSION } from '@opentelemetry/semantic-conventions';
+import {
+  SEMRESATTRS_SERVICE_NAME,
+  SEMRESATTRS_SERVICE_VERSION,
+} from '@opentelemetry/semantic-conventions';
 import { logger } from '../utils/logger';
 
 /**
@@ -42,7 +45,7 @@ function getOtelConfig() {
     tracesEnabled: process.env.OTEL_TRACES_ENABLED !== 'false',
     metricsEnabled: process.env.OTEL_METRICS_ENABLED !== 'false',
     metricsExportInterval: parseInt(process.env.OTEL_METRICS_EXPORT_INTERVAL || '60000', 10),
-    logLevel: process.env.OTEL_LOG_LEVEL || 'info'
+    logLevel: process.env.OTEL_LOG_LEVEL || 'info',
   };
 }
 
@@ -54,7 +57,7 @@ function getExporterHeaders(apiKey: string): Record<string, string> {
     return {};
   }
   return {
-    'Authorization': `Api-Key ${apiKey}`
+    Authorization: `Api-Key ${apiKey}`,
   };
 }
 
@@ -76,14 +79,14 @@ export function initializeTelemetry(): void {
       endpoint: config.endpoint,
       service: config.serviceName,
       traces: config.tracesEnabled,
-      metrics: config.metricsEnabled
+      metrics: config.metricsEnabled,
     });
 
     // Create resource (service metadata)
     const resource = resourceFromAttributes({
       [SEMRESATTRS_SERVICE_NAME]: config.serviceName,
       [SEMRESATTRS_SERVICE_VERSION]: config.serviceVersion,
-      environment: process.env.NODE_ENV || 'development'
+      environment: process.env.NODE_ENV || 'development',
     });
 
     // Build exporter headers
@@ -117,10 +120,10 @@ export function initializeTelemetry(): void {
         getNodeAutoInstrumentations({
           // Disable specific instrumentations if needed
           '@opentelemetry/instrumentation-fs': {
-            enabled: false // File system instrumentation can be noisy
+            enabled: false, // File system instrumentation can be noisy
           },
           '@opentelemetry/instrumentation-dns': {
-            enabled: false
+            enabled: false,
           },
           // HTTP instrumentation
           '@opentelemetry/instrumentation-http': {
@@ -134,16 +137,16 @@ export function initializeTelemetry(): void {
             headersToSpanAttributes: {
               server: {
                 requestHeaders: ['user-agent', 'content-type'],
-                responseHeaders: ['content-type']
-              }
-            }
+                responseHeaders: ['content-type'],
+              },
+            },
           },
           // Express instrumentation
           '@opentelemetry/instrumentation-express': {
-            enabled: true
-          }
-        })
-      ]
+            enabled: true,
+          },
+        }),
+      ],
     });
 
     // Start SDK
@@ -151,14 +154,13 @@ export function initializeTelemetry(): void {
 
     logger.info('[OpenTelemetry] Telemetry initialized successfully', {
       traces: config.tracesEnabled ? 'enabled' : 'disabled',
-      metrics: config.metricsEnabled ? 'enabled' : 'disabled'
+      metrics: config.metricsEnabled ? 'enabled' : 'disabled',
     });
 
     // Graceful shutdown
     process.on('SIGTERM', () => {
       shutdownTelemetry();
     });
-
   } catch (error) {
     logger.error('[OpenTelemetry] Failed to initialize telemetry:', error);
     // Non-fatal - application continues without telemetry
diff --git a/backend/src/utils/activityUtils.ts b/backend/src/utils/activityUtils.ts
index d5ad7cc..43acfec 100644
--- a/backend/src/utils/activityUtils.ts
+++ b/backend/src/utils/activityUtils.ts
@@ -4,14 +4,9 @@ export type ActionCategory = 'auth' | 'crud' | 'error' | 'system';
  * Authentication-related actions used in SQL queries and analytics.
  * Used for aggregating auth events in getStats(), getTrend(), and getPreviousPeriodStats().
  */
-export const AUTH_ACTIONS = [
-  'login',
-  'logout',
-  'register',
-  'auth.login.failed'
-] as const;
+export const AUTH_ACTIONS = ['login', 'logout', 'register', 'auth.login.failed'] as const;
 
-export type AuthAction = typeof AUTH_ACTIONS[number];
+export type AuthAction = (typeof AUTH_ACTIONS)[number];
 
 /**
  * Categorize an action string into one of four categories.
@@ -29,11 +24,7 @@ export function categorizeAction(action: string): ActionCategory {
   ) {
     return 'auth';
   }
-  if (
-    action.includes('schedule') ||
-    action.includes('cleanup') ||
-    action.includes('maintenance')
-  ) {
+  if (action.includes('schedule') || action.includes('cleanup') || action.includes('maintenance')) {
     return 'system';
   }
   return 'crud';
diff --git a/backend/src/utils/benchmarkGameSearch.ts b/backend/src/utils/benchmarkGameSearch.ts
index 70501ec..9035012 100644
--- a/backend/src/utils/benchmarkGameSearch.ts
+++ b/backend/src/utils/benchmarkGameSearch.ts
@@ -94,17 +94,13 @@ async function runAllBenchmarks(): Promise<void> {
   benchmarks.push(await runBenchmark('Library: arcade', { library: 'arcade' }));
 
   // Benchmark 6: Year range
-  benchmarks.push(
-    await runBenchmark('Years: 2000-2010', { yearFrom: 2000, yearTo: 2010 })
-  );
+  benchmarks.push(await runBenchmark('Years: 2000-2010', { yearFrom: 2000, yearTo: 2010 }));
 
   // Benchmark 7: Tag filter (single tag)
   benchmarks.push(await runBenchmark('Tag: Puzzle', { tags: ['Puzzle'] }));
 
   // Benchmark 8: Multiple tags
-  benchmarks.push(
-    await runBenchmark('Tags: Puzzle + Action', { tags: ['Puzzle', 'Action'] })
-  );
+  benchmarks.push(await runBenchmark('Tags: Puzzle + Action', { tags: ['Puzzle', 'Action'] }));
 
   // Benchmark 9: Complex filter combination
   benchmarks.push(
@@ -168,11 +164,11 @@ async function runAllBenchmarks(): Promise<void> {
   console.log('└────┴──────────────────────────────────┴──────────┴────────┴──────────┘\n');
 
   // Summary statistics
-  const times = benchmarks.map(b => b.executionTime);
+  const times = benchmarks.map((b) => b.executionTime);
   const avgTime = Math.round(times.reduce((a, b) => a + b, 0) / times.length);
   const minTime = Math.min(...times);
   const maxTime = Math.max(...times);
-  const slowQueries = benchmarks.filter(b => b.executionTime >= 100);
+  const slowQueries = benchmarks.filter((b) => b.executionTime >= 100);
 
   console.log('SUMMARY:\n');
   console.log(`  Average execution time: ${avgTime}ms`);
@@ -182,7 +178,7 @@ async function runAllBenchmarks(): Promise<void> {
 
   if (slowQueries.length > 0) {
     console.log('\n⚠️  SLOW QUERIES DETECTED:\n');
-    slowQueries.forEach(q => {
+    slowQueries.forEach((q) => {
       console.log(`  - ${q.name}: ${q.executionTime}ms`);
     });
   }
diff --git a/backend/src/utils/jwt.ts b/backend/src/utils/jwt.ts
index c8fb840..b03a9e8 100644
--- a/backend/src/utils/jwt.ts
+++ b/backend/src/utils/jwt.ts
@@ -18,7 +18,7 @@ export interface JWTPayload {
  */
 export function generateAccessToken(payload: JWTPayload): string {
   return jwt.sign(payload, config.jwtSecret, {
-    expiresIn: config.jwtExpiresIn as string | number
+    expiresIn: config.jwtExpiresIn as string | number,
   } as jwt.SignOptions);
 }
 
diff --git a/backend/src/utils/logger.ts b/backend/src/utils/logger.ts
index 4a4b91d..e52aa85 100644
--- a/backend/src/utils/logger.ts
+++ b/backend/src/utils/logger.ts
@@ -29,7 +29,7 @@ function getTraceContext(): { trace_id?: string; span_id?: string } {
       const spanContext = activeSpan.spanContext();
       return {
         trace_id: spanContext.traceId,
-        span_id: spanContext.spanId
+        span_id: spanContext.spanId,
       };
     }
   } catch {
@@ -44,13 +44,13 @@ function getTraceContext(): { trace_id?: string; span_id?: string } {
  */
 function getSeverityNumber(level: string): number {
   const severityMap: Record<string, number> = {
-    error: 17,   // ERROR
-    warn: 13,    // WARN
-    info: 9,     // INFO
-    http: 9,     // INFO
-    verbose: 5,  // DEBUG
-    debug: 5,    // DEBUG
-    silly: 1     // TRACE
+    error: 17, // ERROR
+    warn: 13, // WARN
+    info: 9, // INFO
+    http: 9, // INFO
+    verbose: 5, // DEBUG
+    debug: 5, // DEBUG
+    silly: 1, // TRACE
   };
   return severityMap[level] || 9;
 }
@@ -98,8 +98,8 @@ const transports: winston.transport[] = [
         }
         return msg;
       })
-    )
-  })
+    ),
+  }),
 ];
 
 // Track file transport for diagnostics
@@ -128,7 +128,9 @@ if (config.logFile) {
       fs.unlinkSync(testFile);
       console.log(`[Logger]   Directory is writable`);
     } catch (writeError) {
-      throw new Error(`Log directory is not writable: ${writeError instanceof Error ? writeError.message : writeError}`);
+      throw new Error(
+        `Log directory is not writable: ${writeError instanceof Error ? writeError.message : writeError}`
+      );
     }
 
     // Create file transport with OTEL-compatible JSON format
@@ -142,7 +144,7 @@ if (config.logFile) {
       ),
       maxsize: 10485760, // 10MB
       maxFiles: 5,
-      tailable: true
+      tailable: true,
     });
 
     // Add error handler to catch write failures
@@ -172,7 +174,7 @@ export const logger = winston.createLogger({
     winston.format.json()
   ),
   defaultMeta: { service: 'flashpoint-web-backend' },
-  transports
+  transports,
 });
 
 /**
@@ -192,7 +194,7 @@ export function getLoggingStatus(): {
     filePath: config.logFile || null,
     fileError: fileLoggingError?.message || null,
     logLevel: config.logLevel,
-    otelIntegration: trace !== null
+    otelIntegration: trace !== null,
   };
 }
 
diff --git a/backend/src/utils/pagination.ts b/backend/src/utils/pagination.ts
index e50d517..cd6a063 100644
--- a/backend/src/utils/pagination.ts
+++ b/backend/src/utils/pagination.ts
@@ -28,8 +28,8 @@ export function createPaginatedResponse<T>(
       total,
       page,
       limit,
-      totalPages
-    }
+      totalPages,
+    },
   };
 }
 
@@ -56,13 +56,10 @@ export function normalizePagination(
   normalizedPage = Math.max(1, normalizedPage || 1);
 
   // Ensure limit is within bounds
-  normalizedLimit = Math.min(
-    maxLimit,
-    Math.max(1, normalizedLimit || defaultLimit)
-  );
+  normalizedLimit = Math.min(maxLimit, Math.max(1, normalizedLimit || defaultLimit));
 
   return {
     page: normalizedPage,
-    limit: normalizedLimit
+    limit: normalizedLimit,
   };
 }
diff --git a/backend/src/utils/queryParser.ts b/backend/src/utils/queryParser.ts
index 2dca3f0..35918a8 100644
--- a/backend/src/utils/queryParser.ts
+++ b/backend/src/utils/queryParser.ts
@@ -40,17 +40,11 @@ export function parsePaginationQuery(
   query: any,
   defaults: PaginationDefaults = {}
 ): PaginationResult {
-  const {
-    limit: defaultLimit = 50,
-    maxLimit = 100,
-    offset: defaultOffset = 0,
-  } = defaults;
+  const { limit: defaultLimit = 50, maxLimit = 100, offset: defaultOffset = 0 } = defaults;
 
   // Parse limit with default and max cap
   const parsedLimit = parseInt(query.limit as string);
-  const limit = isNaN(parsedLimit)
-    ? defaultLimit
-    : Math.min(parsedLimit, maxLimit);
+  const limit = isNaN(parsedLimit) ? defaultLimit : Math.min(parsedLimit, maxLimit);
 
   // Parse offset with default
   const parsedOffset = parseInt(query.offset as string);
diff --git a/backend/src/utils/queryPerformance.ts b/backend/src/utils/queryPerformance.ts
index 1e05de0..8d1b60c 100644
--- a/backend/src/utils/queryPerformance.ts
+++ b/backend/src/utils/queryPerformance.ts
@@ -70,11 +70,7 @@ function logSlowQuery(metrics: QueryMetrics): void {
  * @param params - Query parameters
  * @returns The result of the query function
  */
-export function measureQueryPerformance<T>(
-  queryFn: () => T,
-  sql: string,
-  params: any[] = []
-): T {
+export function measureQueryPerformance<T>(queryFn: () => T, sql: string, params: any[] = []): T {
   const start = performance.now();
 
   try {
diff --git a/docs/01-overview/project-overview.md b/docs/01-overview/project-overview.md
index be0d4dd..165ff7b 100644
--- a/docs/01-overview/project-overview.md
+++ b/docs/01-overview/project-overview.md
@@ -2,15 +2,22 @@
 
 ## Introduction
 
-Flashpoint Web is a self-hosted web application designed to browse and play games from the Flashpoint Archive. It provides a modern, user-friendly interface to access thousands of preserved Flash games, HTML5 games, and animations from the early web era.
+Flashpoint Web is a self-hosted web application designed to browse and play
+games from the Flashpoint Archive. It provides a modern, user-friendly interface
+to access thousands of preserved Flash games, HTML5 games, and animations from
+the early web era.
 
 ## What is Flashpoint?
 
-[Flashpoint](https://flashpointarchive.org/) is a community preservation project dedicated to saving games and animations from the web. With Adobe Flash Player's end-of-life in December 2020, millions of Flash games and animations became unplayable. Flashpoint preserves these games and provides tools to play them.
+[Flashpoint](https://flashpointarchive.org/) is a community preservation project
+dedicated to saving games and animations from the web. With Adobe Flash Player's
+end-of-life in December 2020, millions of Flash games and animations became
+unplayable. Flashpoint preserves these games and provides tools to play them.
 
 ## What is Flashpoint Web?
 
-Flashpoint Web is a **web-based alternative** to the Flashpoint Launcher, offering:
+Flashpoint Web is a **web-based alternative** to the Flashpoint Launcher,
+offering:
 
 - **Browser-based access** to your local Flashpoint collection
 - **Modern UI** built with React and Tailwind CSS
@@ -24,7 +31,8 @@ Flashpoint Web is a **web-based alternative** to the Flashpoint Launcher, offeri
 
 ### Game Browsing & Search
 
-- **Comprehensive filtering** by platform, developer, publisher, series, tags, year, and more
+- **Comprehensive filtering** by platform, developer, publisher, series, tags,
+  year, and more
 - **Fast search** across 70,000+ games in the archive
 - **Multiple view modes** (grid/list) with customizable layouts
 - **Related games** suggestions based on developer and platform
@@ -59,11 +67,14 @@ Flashpoint Web is a **web-based alternative** to the Flashpoint Launcher, offeri
 
 Flashpoint Web consists of three independent services:
 
-1. **Backend (Port 3100)** - REST API server handling game metadata, user management, and authentication
+1. **Backend (Port 3100)** - REST API server handling game metadata, user
+   management, and authentication
 2. **Frontend (Port 5173)** - React web application providing the user interface
-3. **Game Service (Ports 22500/22501)** - File serving proxy for game content and ZIP archives
+3. **Game Service (Ports 22500/22501)** - File serving proxy for game content
+   and ZIP archives
 
 This separation allows:
+
 - Independent scaling of services
 - Backend non-blocking on large file transfers
 - Game service caching and CDN compatibility
@@ -72,58 +83,68 @@ This separation allows:
 ## Technology Stack Summary
 
 - **Backend**: Node.js, Express, TypeScript, SQLite (BetterSqlite3), JWT, bcrypt
-- **Frontend**: React 18, TypeScript, Vite, TanStack Query, Zustand, Tailwind CSS, Shadcn UI
+- **Frontend**: React 18, TypeScript, Vite, TanStack Query, Zustand, Tailwind
+  CSS, Shadcn UI
 - **Game Service**: Node.js, TypeScript, node-stream-zip, Axios
 - **Game Emulation**: Ruffle (Flash), Native Browser (HTML5)
 
 ## Use Cases
 
 ### Home Users
-- Browse and play your personal Flashpoint collection from any device on your local network
+
+- Browse and play your personal Flashpoint collection from any device on your
+  local network
 - Track your playtime and discover new games
 - Create playlists for organizing favorites
 
 ### Multi-User Households
+
 - Individual user accounts with separate play statistics
 - Guest mode for temporary access
 - User registration for creating accounts
 
 ### Educational Institutions
+
 - Preserve and provide access to educational Flash content
 - Track student engagement with educational games
 - Role-based access for teachers and students
 
 ### Game Preservationists
+
 - Access comprehensive metadata from Flashpoint's preservation efforts
 - Contribute to playlists and curation
 - Integration with existing Flashpoint installations
 
 ## Project Goals
 
-1. **Preservation** - Support the Flashpoint mission of preserving web games and animations
-2. **Accessibility** - Make preserved content easy to access via modern web interfaces
-3. **User Experience** - Provide intuitive, responsive UI for browsing and playing
+1. **Preservation** - Support the Flashpoint mission of preserving web games and
+   animations
+2. **Accessibility** - Make preserved content easy to access via modern web
+   interfaces
+3. **User Experience** - Provide intuitive, responsive UI for browsing and
+   playing
 4. **Extensibility** - Modular architecture allowing future enhancements
 5. **Performance** - Fast searches, efficient file serving, responsive UI
 6. **Security** - Secure authentication, permission system, audit logging
 
 ## Comparison with Flashpoint Launcher
 
-| Feature | Flashpoint Launcher | Flashpoint Web |
-|---------|-------------------|----------------|
-| Platform | Desktop (Windows, Linux, Mac) | Web browser |
-| Interface | Desktop application | Web application |
-| Game Support | All platforms | Flash, HTML5 (browser-playable) |
-| Authentication | Single user | Multi-user with RBAC |
-| Play Tracking | Local only | Per-user with statistics |
-| Remote Access | No | Yes (local network) |
-| Search/Filter | Basic | Advanced with multiple criteria |
-| Playlists | Launcher-managed | User-created, favorites |
-| Updates | Manual | Database hot-reload |
+| Feature        | Flashpoint Launcher           | Flashpoint Web                  |
+| -------------- | ----------------------------- | ------------------------------- |
+| Platform       | Desktop (Windows, Linux, Mac) | Web browser                     |
+| Interface      | Desktop application           | Web application                 |
+| Game Support   | All platforms                 | Flash, HTML5 (browser-playable) |
+| Authentication | Single user                   | Multi-user with RBAC            |
+| Play Tracking  | Local only                    | Per-user with statistics        |
+| Remote Access  | No                            | Yes (local network)             |
+| Search/Filter  | Basic                         | Advanced with multiple criteria |
+| Playlists      | Launcher-managed              | User-created, favorites         |
+| Updates        | Manual                        | Database hot-reload             |
 
 ## License
 
-Flashpoint Web is open-source software. (Note: Add appropriate license information)
+Flashpoint Web is open-source software. (Note: Add appropriate license
+information)
 
 ## Credits
 
@@ -135,9 +156,11 @@ Flashpoint Web is open-source software. (Note: Add appropriate license informati
 
 Ready to dive in?
 
-1. [System Architecture](../02-architecture/system-architecture.md) - Understand the system design
+1. [System Architecture](../02-architecture/system-architecture.md) - Understand
+   the system design
 2. [Technology Stack](technology-stack.md) - Learn about the technologies used
-3. [Setup Guide](../08-development/setup-guide.md) - Set up your development environment
+3. [Setup Guide](../08-development/setup-guide.md) - Set up your development
+   environment
 
 ## Related Links
 
diff --git a/docs/01-overview/technology-stack.md b/docs/01-overview/technology-stack.md
index dc9168c..913d695 100644
--- a/docs/01-overview/technology-stack.md
+++ b/docs/01-overview/technology-stack.md
@@ -1,45 +1,46 @@
 # Technology Stack
 
-Modern, production-ready technologies chosen for performance, developer experience, and ecosystem maturity.
+Modern, production-ready technologies chosen for performance, developer
+experience, and ecosystem maturity.
 
 ## Stack Overview
 
 ### Backend Technologies
 
-| Technology | Version | Purpose |
-|------------|---------|---------|
-| Node.js | 20+ | JavaScript runtime |
-| Express | 4.18 | Web framework |
-| TypeScript | 5.4 | Type-safe JavaScript |
-| BetterSqlite3 | 12.6 | SQLite database driver |
-| JWT | 9.0 | Authentication tokens |
-| bcrypt | 6.0 | Password hashing |
-| Winston | 3.11 | Logging |
+| Technology    | Version | Purpose                |
+| ------------- | ------- | ---------------------- |
+| Node.js       | 20+     | JavaScript runtime     |
+| Express       | 4.18    | Web framework          |
+| TypeScript    | 5.4     | Type-safe JavaScript   |
+| BetterSqlite3 | 12.6    | SQLite database driver |
+| JWT           | 9.0     | Authentication tokens  |
+| bcrypt        | 6.0     | Password hashing       |
+| Winston       | 3.11    | Logging                |
 
 ### Frontend Technologies
 
-| Technology | Version | Purpose |
-|------------|---------|---------|
-| React | 18.3 | UI library |
-| TypeScript | 5.4 | Type-safe JavaScript |
-| Vite | 5.2 | Build tool and dev server |
-| React Router | 6.22 | Client-side routing |
-| TanStack Query | 5.28 | Server state management |
-| Zustand | 4.5 | Client state management |
-| Tailwind CSS | 3.4 | Utility-first CSS |
-| Shadcn UI | Latest | Component library |
-| Ruffle | 0.2.0 | Flash emulator |
+| Technology     | Version | Purpose                   |
+| -------------- | ------- | ------------------------- |
+| React          | 18.3    | UI library                |
+| TypeScript     | 5.4     | Type-safe JavaScript      |
+| Vite           | 5.2     | Build tool and dev server |
+| React Router   | 6.22    | Client-side routing       |
+| TanStack Query | 5.28    | Server state management   |
+| Zustand        | 4.5     | Client state management   |
+| Tailwind CSS   | 3.4     | Utility-first CSS         |
+| Shadcn UI      | Latest  | Component library         |
+| Ruffle         | 0.2.0   | Flash emulator            |
 
 ### Game Service Technologies
 
-| Technology | Version | Purpose |
-|------------|---------|---------|
-| Node.js | 20+ | JavaScript runtime |
-| Express | 4.18 | HTTP server |
-| TypeScript | 5.3 | Type safety |
-| node-stream-zip | 1.15 | ZIP archive streaming |
-| Axios | 1.6 | HTTP client |
-| Winston | 3.11 | Logging |
+| Technology      | Version | Purpose               |
+| --------------- | ------- | --------------------- |
+| Node.js         | 20+     | JavaScript runtime    |
+| Express         | 4.18    | HTTP server           |
+| TypeScript      | 5.3     | Type safety           |
+| node-stream-zip | 1.15    | ZIP archive streaming |
+| Axios           | 1.6     | HTTP client           |
+| Winston         | 3.11    | Logging               |
 
 ---
 
@@ -50,12 +51,14 @@ Modern, production-ready technologies chosen for performance, developer experien
 JavaScript runtime built on Chrome's V8 engine.
 
 **Why chosen:**
+
 - Same language as frontend (JavaScript/TypeScript)
 - Excellent async I/O for concurrent requests
 - Large npm ecosystem
 - Great performance
 
 **Use cases:**
+
 - REST API server
 - Database operations
 - File watching (hot-reload)
@@ -66,16 +69,18 @@ JavaScript runtime built on Chrome's V8 engine.
 Minimal and flexible web application framework.
 
 **Why chosen:**
+
 - Mature and battle-tested
 - Perfect middleware pattern
 - Large ecosystem
 - Fast routing
 
 **Key middleware:**
+
 ```typescript
 app.use(cors({ origin: process.env.DOMAIN }));
-app.use(helmet());                          // Security headers
-app.use(compression());                     // Response compression
+app.use(helmet()); // Security headers
+app.use(compression()); // Response compression
 app.use('/api/auth', rateLimit({ max: 5 })); // Rate limiting
 ```
 
@@ -84,6 +89,7 @@ app.use('/api/auth', rateLimit({ max: 5 })); // Rate limiting
 Typed superset of JavaScript.
 
 **Why chosen:**
+
 - Type safety catches errors at compile time
 - Excellent IDE support
 - Code quality enforcement
@@ -94,12 +100,14 @@ Typed superset of JavaScript.
 Fastest SQLite3 library for Node.js.
 
 **Why chosen over alternatives:**
+
 - Synchronous API (simpler than async wrappers)
 - 2-3x faster than async alternatives
 - Fewer race conditions
 - Perfect for SQLite workloads
 
 **Use:**
+
 ```typescript
 // Read-only connection to flashpoint.sqlite
 const fpDb = new Database(config.flashpointDbPath, { readonly: true });
@@ -108,7 +116,9 @@ const fpDb = new Database(config.flashpointDbPath, { readonly: true });
 const userDb = new Database(USER_DB_PATH);
 
 // Prepared statement
-const stmt = fpDb.prepare('SELECT * FROM game WHERE title LIKE ? AND platform = ?');
+const stmt = fpDb.prepare(
+  'SELECT * FROM game WHERE title LIKE ? AND platform = ?'
+);
 const games = stmt.all(`%${search}%`, platform);
 ```
 
@@ -116,7 +126,8 @@ const games = stmt.all(`%${search}%`, platform);
 
 **JWT**: Stateless authentication, works across instances, mobile-friendly.
 
-**bcrypt**: Designed for passwords, slow by design (resistant to brute-force), automatic salt generation.
+**bcrypt**: Designed for passwords, slow by design (resistant to brute-force),
+automatic salt generation.
 
 ---
 
@@ -127,12 +138,14 @@ const games = stmt.all(`%${search}%`, platform);
 JavaScript library for building user interfaces.
 
 **Why chosen:**
+
 - Component model - reusable, composable UI
 - Largest React library ecosystem
 - Virtual DOM for performance
 - Excellent tooling
 
 **React 18 features:**
+
 - Automatic batching
 - Concurrent rendering
 - Transitions for smooth updates
@@ -142,6 +155,7 @@ JavaScript library for building user interfaces.
 Next-generation frontend build tool.
 
 **Why chosen over alternatives:**
+
 - Instant HMR via native ES modules
 - Fast production builds (esbuild)
 - Simple configuration
@@ -152,12 +166,14 @@ Next-generation frontend build tool.
 Powerful data synchronization library.
 
 **Why chosen:**
+
 - Smart cache management
 - Background refetching
 - Built-in loading/error states
 - Excellent DevTools
 
 **Usage:**
+
 ```typescript
 function useGames(filters: GameFilters) {
   return useQuery({
@@ -174,6 +190,7 @@ function useGames(filters: GameFilters) {
 Small, fast state management library.
 
 **Why chosen:**
+
 - Minimal boilerplate
 - Optimized re-renders
 - TypeScript-first
@@ -181,6 +198,7 @@ Small, fast state management library.
 - Only 1KB gzipped
 
 **Usage:**
+
 ```typescript
 const useAuthStore = create<AuthState>((set) => ({
   user: null,
@@ -201,6 +219,7 @@ const useAuthStore = create<AuthState>((set) => ({
 Utility-first CSS framework.
 
 **Why chosen:**
+
 - Build UIs without custom CSS
 - Consistent design system
 - Automatic CSS purging
@@ -212,6 +231,7 @@ Utility-first CSS framework.
 Re-usable components built with Radix UI and Tailwind.
 
 **Why chosen:**
+
 - Copy components to your project
 - Built on accessible Radix primitives
 - Pre-designed component system
@@ -223,6 +243,7 @@ Re-usable components built with Radix UI and Tailwind.
 Flash Player emulator written in Rust, compiled to WebAssembly.
 
 **Why needed:**
+
 - Adobe Flash reached EOL
 - Runs in modern browsers
 - Sandboxed WebAssembly execution
@@ -237,12 +258,14 @@ Flash Player emulator written in Rust, compiled to WebAssembly.
 Zero-dependency ZIP file streaming library.
 
 **Why chosen:**
+
 - Streaming (no extraction required)
 - Memory efficient random access
 - Fast direct reads
 - Simple API
 
 **Usage:**
+
 ```typescript
 const zip = new StreamZip.async({ file: '/path/to/game.zip' });
 const entry = await zip.entry(filePath);
@@ -273,6 +296,7 @@ Unit testing framework with Vite integration.
 ### Decision Criteria
 
 For each technology, evaluated:
+
 1. Performance
 2. Developer experience
 3. Ecosystem
@@ -286,35 +310,35 @@ For each technology, evaluated:
 
 #### React vs Vue vs Svelte
 
-| Criteria | React | Vue | Svelte |
-|----------|-------|-----|--------|
-| Ecosystem | Excellent | Good | Growing |
-| TypeScript | Excellent | Good | Good |
-| Community | Largest | Large | Smaller |
-| Bundle Size | Larger | Medium | Smallest |
-| **Decision** | **✓ Chosen** | ✗ | ✗ |
+| Criteria     | React        | Vue    | Svelte   |
+| ------------ | ------------ | ------ | -------- |
+| Ecosystem    | Excellent    | Good   | Growing  |
+| TypeScript   | Excellent    | Good   | Good     |
+| Community    | Largest      | Large  | Smaller  |
+| Bundle Size  | Larger       | Medium | Smallest |
+| **Decision** | **✓ Chosen** | ✗      | ✗        |
 
 **Reason**: Largest ecosystem (Shadcn UI, TanStack Query)
 
 #### TanStack Query vs Redux Toolkit Query vs SWR
 
-| Criteria | TanStack | RTK Query | SWR |
-|----------|----------|-----------|-----|
-| Features | Most | Many | Fewer |
-| TypeScript | Excellent | Good | Good |
-| Boilerplate | Low | Medium | Lowest |
-| **Decision** | **✓ Chosen** | ✗ | ✗ |
+| Criteria     | TanStack     | RTK Query | SWR    |
+| ------------ | ------------ | --------- | ------ |
+| Features     | Most         | Many      | Fewer  |
+| TypeScript   | Excellent    | Good      | Good   |
+| Boilerplate  | Low          | Medium    | Lowest |
+| **Decision** | **✓ Chosen** | ✗         | ✗      |
 
 **Reason**: Best balance of features and DX
 
 #### SQLite vs PostgreSQL vs MongoDB
 
-| Criteria | SQLite | PostgreSQL | MongoDB |
-|----------|--------|------------|---------|
-| Setup | Embedded | Server | Server |
-| Flashpoint | Native | Migration | Migration |
-| Complexity | Lowest | Medium | Medium |
-| **Decision** | **✓ Chosen** | ✗ | ✗ |
+| Criteria     | SQLite       | PostgreSQL | MongoDB   |
+| ------------ | ------------ | ---------- | --------- |
+| Setup        | Embedded     | Server     | Server    |
+| Flashpoint   | Native       | Migration  | Migration |
+| Complexity   | Lowest       | Medium     | Medium    |
+| **Decision** | **✓ Chosen** | ✗          | ✗         |
 
 **Reason**: Flashpoint compatibility, self-hosted simplicity
 
@@ -323,6 +347,7 @@ For each technology, evaluated:
 ## Package Dependencies
 
 ### Backend Production
+
 ```json
 {
   "axios": "^1.13.2",
@@ -335,6 +360,7 @@ For each technology, evaluated:
 ```
 
 ### Frontend Production
+
 ```json
 {
   "@ruffle-rs/ruffle": "^0.2.0-nightly",
@@ -353,6 +379,7 @@ For each technology, evaluated:
 ### Bundle Sizes
 
 **Frontend (Production Build):**
+
 - Main bundle: ~150 KB (gzipped)
 - React vendor: ~130 KB (gzipped)
 - Shadcn UI: ~50 KB (gzipped)
@@ -362,16 +389,19 @@ For each technology, evaluated:
 ### Runtime Performance
 
 **Backend API:**
+
 - Average response: <50ms
 - Game search: <100ms
 - Database queries: <10ms (indexed)
 
 **Frontend:**
+
 - First contentful paint: <1s
 - Time to interactive: <2s
 - Game grid render: <100ms (virtualized)
 
 **Game Service:**
+
 - File streaming: Wire speed
 - ZIP file access: <50ms
 - CDN fallback: 200-500ms (network dependent)
@@ -381,12 +411,14 @@ For each technology, evaluated:
 ## Browser Support
 
 **Required features:**
+
 - ES2020 support
 - WebAssembly (for Ruffle)
 - CSS Grid and Flexbox
 - localStorage
 
 **Targeted browsers:**
+
 - Chrome/Edge: Last 2 versions
 - Firefox: Last 2 versions
 - Safari: Last 2 versions
@@ -395,7 +427,8 @@ For each technology, evaluated:
 
 ## Related Documentation
 
-- [Architecture Overview](../02-architecture/system-architecture.md) - System design
+- [Architecture Overview](../02-architecture/system-architecture.md) - System
+  design
 - [Backend Guide](../03-backend/README.md) - Backend details
 - [Frontend Guide](../04-frontend/README.md) - Frontend details
 - [Deployment Guide](../09-deployment/README.md) - Production deployment
diff --git a/docs/02-architecture/README.md b/docs/02-architecture/README.md
index 3844d41..a4d2d44 100644
--- a/docs/02-architecture/README.md
+++ b/docs/02-architecture/README.md
@@ -1,6 +1,8 @@
 # Architecture Documentation
 
-This directory contains comprehensive architecture documentation for Flashpoint Web, detailing the system design, service communication patterns, and data flows.
+This directory contains comprehensive architecture documentation for Flashpoint
+Web, detailing the system design, service communication patterns, and data
+flows.
 
 ## Documentation Structure
 
@@ -9,6 +11,7 @@ This directory contains comprehensive architecture documentation for Flashpoint
 **Deep dive into the complete system architecture**
 
 Topics covered:
+
 - Three-service architecture overview (Frontend, Backend, Game Service)
 - Technology stack and rationale
 - Service responsibilities and boundaries
@@ -20,13 +23,15 @@ Topics covered:
 - Error handling strategies
 - Monitoring and logging
 
-**When to read**: Start here for a high-level understanding of the entire system.
+**When to read**: Start here for a high-level understanding of the entire
+system.
 
 ### 2. [Service Communication](./service-communication.md)
 
 **Inter-service communication patterns and protocols**
 
 Topics covered:
+
 - Frontend ↔ Backend communication (REST API)
 - Backend ↔ Game Service communication (internal APIs)
 - Frontend ↔ Game Service communication (direct file loading)
@@ -39,13 +44,15 @@ Topics covered:
 - Performance optimization
 - WebSocket (future considerations)
 
-**When to read**: When you need to understand how services communicate or add new API endpoints.
+**When to read**: When you need to understand how services communicate or add
+new API endpoints.
 
 ### 3. [Data Flow Diagrams](./data-flow-diagrams.md)
 
 **Complete request/response flows with Mermaid diagrams**
 
 Topics covered:
+
 - Game browse and search flow
 - Game detail view flow
 - Filter options loading
@@ -56,13 +63,15 @@ Topics covered:
 - Sort order changes
 - Cache management (stale-while-revalidate)
 
-**When to read**: When debugging data flow issues or understanding user journeys through the system.
+**When to read**: When debugging data flow issues or understanding user journeys
+through the system.
 
 ### 4. [Authentication Flow](./authentication-flow.md)
 
 **Complete authentication and authorization flow**
 
 Topics covered:
+
 - User registration flow
 - User login flow
 - Protected request flow
@@ -75,13 +84,15 @@ Topics covered:
 - Security best practices
 - Common authentication issues
 
-**When to read**: When implementing authentication features or troubleshooting auth issues.
+**When to read**: When implementing authentication features or troubleshooting
+auth issues.
 
 ### 5. [Game Launch Flow](./game-launch-flow.md)
 
 **Detailed game playing flow from click to play**
 
 Topics covered:
+
 - Game launch request flow
 - ZIP mounting flow
 - Game content loading (Flash and HTML5)
@@ -92,13 +103,15 @@ Topics covered:
 - Error handling
 - Performance optimization
 
-**When to read**: When debugging game loading issues or understanding how games are served.
+**When to read**: When debugging game loading issues or understanding how games
+are served.
 
 ### 6. [Play Tracking Flow](./play-tracking-flow.md)
 
 **Session tracking and statistics aggregation**
 
 Topics covered:
+
 - Session start flow
 - Session end flow
 - Statistics aggregation (per-game and per-user)
@@ -108,15 +121,18 @@ Topics covered:
 - Database schema and indexing
 - Privacy and data management
 
-**When to read**: When implementing analytics features or understanding play session tracking.
+**When to read**: When implementing analytics features or understanding play
+session tracking.
 
 ## Architecture Diagrams
 
-All architecture documents include Mermaid diagrams for visual representation. These diagrams are rendered automatically in GitHub and most Markdown viewers.
+All architecture documents include Mermaid diagrams for visual representation.
+These diagrams are rendered automatically in GitHub and most Markdown viewers.
 
 ### Key Diagram Types
 
 **System Diagrams**: Show the overall architecture and service relationships
+
 ```mermaid
 graph TB
     Frontend --> Backend
@@ -124,6 +140,7 @@ graph TB
 ```
 
 **Sequence Diagrams**: Show step-by-step interactions between components
+
 ```mermaid
 sequenceDiagram
     User->>Frontend: Click button
@@ -132,6 +149,7 @@ sequenceDiagram
 ```
 
 **Flow Diagrams**: Show decision trees and process flows
+
 ```mermaid
 graph LR
     Start --> Decision{Condition?}
@@ -151,11 +169,13 @@ Business logic lives in service classes, routes are thin controllers.
 
 ### 2. Repository Pattern (Implicit)
 
-Database access is abstracted through `DatabaseService` and `UserDatabaseService`.
+Database access is abstracted through `DatabaseService` and
+`UserDatabaseService`.
 
 ### 3. Middleware Pipeline
 
 Express middleware chains handle cross-cutting concerns:
+
 - Authentication (JWT verification)
 - Authorization (RBAC)
 - Logging (activity tracking)
@@ -165,12 +185,14 @@ Express middleware chains handle cross-cutting concerns:
 ### 4. State Management
 
 **Frontend**:
+
 - Server state: TanStack Query
 - UI state: Zustand
 - URL state: React Router
 - Form state: React Hook Form
 
 **Backend**:
+
 - Stateless (JWT for session)
 - Database as source of truth
 
@@ -388,9 +410,11 @@ Express middleware chains handle cross-cutting concerns:
 
 ## Related Documentation
 
-- [Overview Documentation](../01-overview/): High-level overview and getting started
+- [Overview Documentation](../01-overview/): High-level overview and getting
+  started
 - [API Reference](../03-api/): Detailed API endpoint documentation (if exists)
-- [Development Guide](../04-development/): Development setup and workflows (if exists)
+- [Development Guide](../04-development/): Development setup and workflows (if
+  exists)
 - [Deployment Guide](../05-deployment/): Production deployment (if exists)
 
 ## Contributing
diff --git a/docs/02-architecture/authentication-flow.md b/docs/02-architecture/authentication-flow.md
index 04a490c..e5faf27 100644
--- a/docs/02-architecture/authentication-flow.md
+++ b/docs/02-architecture/authentication-flow.md
@@ -2,7 +2,8 @@
 
 ## Overview
 
-Flashpoint Web uses JWT-based authentication with role-based access control (RBAC).
+Flashpoint Web uses JWT-based authentication with role-based access control
+(RBAC).
 
 ## Authentication Architecture
 
@@ -95,16 +96,19 @@ sequenceDiagram
 ```
 
 **Password Validation Schema**:
+
 ```typescript
-const registerSchema = z.object({
-  username: z.string().min(3).max(50),
-  email: z.string().email(),
-  password: z.string().min(6),
-  confirmPassword: z.string()
-}).refine(data => data.password === data.confirmPassword, {
-  message: "Passwords don't match",
-  path: ["confirmPassword"]
-});
+const registerSchema = z
+  .object({
+    username: z.string().min(3).max(50),
+    email: z.string().email(),
+    password: z.string().min(6),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+  });
 ```
 
 ## 2. User Login Flow
@@ -150,6 +154,7 @@ sequenceDiagram
 ```
 
 **JWT Token Structure**:
+
 ```typescript
 // Access Token
 {
@@ -213,6 +218,7 @@ sequenceDiagram
 ```
 
 **Authentication Middleware**:
+
 ```typescript
 export const authenticate = async (req, res, next) => {
   try {
@@ -230,7 +236,7 @@ export const authenticate = async (req, res, next) => {
       username: user.username,
       email: user.email,
       role: user.roleName,
-      permissions: user.permissions
+      permissions: user.permissions,
     };
 
     next();
@@ -241,6 +247,7 @@ export const authenticate = async (req, res, next) => {
 ```
 
 **RBAC Middleware**:
+
 ```typescript
 export const requirePermission = (permission: string) => {
   return (req, res, next) => {
@@ -293,6 +300,7 @@ sequenceDiagram
 ```
 
 **Axios Response Interceptor**:
+
 ```typescript
 api.interceptors.response.use(
   (response) => response,
@@ -369,6 +377,7 @@ graph TB
 ```
 
 **Database Schema**:
+
 ```sql
 CREATE TABLE roles (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -395,12 +404,14 @@ CREATE TABLE role_permissions (
 ```
 
 **Default Roles**:
+
 - `admin`: Full system access
 - `moderator`: Content management and user support
 - `user`: Standard user features (games, playlists)
 - `guest`: Read-only access (if enabled)
 
 **Common Permissions**:
+
 ```
 games.read, games.play
 playlists.read, playlists.create, playlists.update, playlists.delete
@@ -410,6 +421,7 @@ settings.update
 ```
 
 **Frontend Permission Checks**:
+
 ```typescript
 export const ProtectedRoute = ({ children, requiredPermission }) => {
   const { isAuthenticated, hasPermission } = useAuthStore();
@@ -433,7 +445,8 @@ export const ProtectedRoute = ({ children, requiredPermission }) => {
 
 ## 7. Guest Mode
 
-When `auth.guest_access_enabled` is true in system settings, unauthenticated users can browse games with limited permissions.
+When `auth.guest_access_enabled` is true in system settings, unauthenticated
+users can browse games with limited permissions.
 
 ```typescript
 // Frontend
@@ -441,7 +454,7 @@ const guestUser: User = {
   id: 0,
   username: 'Guest',
   role: 'guest',
-  permissions: ['games.read', 'games.play']
+  permissions: ['games.read', 'games.play'],
 };
 
 // Backend
@@ -457,7 +470,12 @@ export const optionalAuth = async (req, res, next) => {
     if (!settings.guestAccessEnabled) {
       throw new AppError(401, 'Authentication required');
     }
-    req.user = { id: 0, username: 'guest', role: 'guest', permissions: ['games.read'] };
+    req.user = {
+      id: 0,
+      username: 'guest',
+      role: 'guest',
+      permissions: ['games.read'],
+    };
   }
 
   next();
@@ -469,6 +487,7 @@ export const optionalAuth = async (req, res, next) => {
 **Password Security**: Bcrypt with 10 rounds
 
 **JWT Security**:
+
 - Short-lived access tokens (15 minutes)
 - Long-lived refresh tokens (7 days)
 - Signed with random 256-bit JWT_SECRET
@@ -482,10 +501,10 @@ export const optionalAuth = async (req, res, next) => {
 
 ## Troubleshooting
 
-| Issue | Cause | Solution |
-|-------|-------|----------|
-| 401 on valid requests | Token expired | Automatic refresh in Axios interceptor |
-| Infinite refresh loop | Refresh token also expired | Force logout and redirect to login |
-| 403 despite logged in | Missing permission | Check user role and permissions in database |
-| Guest access not working | Setting disabled | Verify `auth.guest_access_enabled` in system_settings |
-| Admin gets 503 in maintenance | Unauthenticated request | Use authenticated `api` client, not raw `fetch()` |
+| Issue                         | Cause                      | Solution                                              |
+| ----------------------------- | -------------------------- | ----------------------------------------------------- |
+| 401 on valid requests         | Token expired              | Automatic refresh in Axios interceptor                |
+| Infinite refresh loop         | Refresh token also expired | Force logout and redirect to login                    |
+| 403 despite logged in         | Missing permission         | Check user role and permissions in database           |
+| Guest access not working      | Setting disabled           | Verify `auth.guest_access_enabled` in system_settings |
+| Admin gets 503 in maintenance | Unauthenticated request    | Use authenticated `api` client, not raw `fetch()`     |
diff --git a/docs/02-architecture/data-flow-diagrams.md b/docs/02-architecture/data-flow-diagrams.md
index 02d29c1..fdebe8f 100644
--- a/docs/02-architecture/data-flow-diagrams.md
+++ b/docs/02-architecture/data-flow-diagrams.md
@@ -40,10 +40,12 @@ sequenceDiagram
 ```
 
 **Data Transformation**:
+
 - Frontend state: `{ search: "mario", platform: "Flash", page: 1, limit: 50 }`
 - URL params: `?search=mario&platform=Flash&page=1&limit=50`
 - Backend validation: Zod schema validation
-- SQL: `SELECT * FROM game WHERE platformName = 'Flash' AND title LIKE '%mario%' ... LIMIT 50 OFFSET 0`
+- SQL:
+  `SELECT * FROM game WHERE platformName = 'Flash' AND title LIKE '%mario%' ... LIMIT 50 OFFSET 0`
 
 ## 2. Game Detail View Flow
 
@@ -132,18 +134,15 @@ sequenceDiagram
 ```
 
 **Filter Options Response**:
+
 ```json
 {
   "platforms": [
     { "name": "Flash", "count": 85000 },
     { "name": "HTML5", "count": 15000 }
   ],
-  "developers": [
-    { "name": "Developer A", "count": 500 }
-  ],
-  "tags": [
-    { "name": "Action", "count": 15000 }
-  ],
+  "developers": [{ "name": "Developer A", "count": 500 }],
+  "tags": [{ "name": "Action", "count": 15000 }],
   "yearRange": { "min": 1995, "max": 2024 }
 }
 ```
@@ -251,18 +250,20 @@ sequenceDiagram
 ```
 
 **Debounce Implementation**:
+
 ```typescript
 const debouncedSearch = useMemo(
-  () => debounce((value: string) => {
-    onSearch(value);
-  }, 300),
+  () =>
+    debounce((value: string) => {
+      onSearch(value);
+    }, 300),
   [onSearch]
 );
 
 const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
   const value = e.target.value;
-  setSearchValue(value);        // Immediate UI update
-  debouncedSearch(value);       // Debounced API call
+  setSearchValue(value); // Immediate UI update
+  debouncedSearch(value); // Debounced API call
 };
 ```
 
@@ -293,12 +294,13 @@ sequenceDiagram
 ```
 
 **Multi-Select SQL**:
+
 ```typescript
 // Frontend: Array to string
-const platformParam = selectedPlatforms.join(',');  // "Flash,HTML5"
+const platformParam = selectedPlatforms.join(','); // "Flash,HTML5"
 
 // Backend: Parse back
-const platforms = query.platform?.split(',').filter(Boolean);  // ["Flash", "HTML5"]
+const platforms = query.platform?.split(',').filter(Boolean); // ["Flash", "HTML5"]
 
 // SQL: Dynamic placeholders
 if (platforms?.length > 0) {
@@ -366,14 +368,15 @@ graph TB
 ```
 
 **Stale-While-Revalidate**:
+
 ```typescript
 useQuery({
   queryKey: ['games', filters],
   queryFn: () => gamesApi.search(filters),
-  staleTime: 5 * 60 * 1000,         // 5 min - fresh
-  cacheTime: 10 * 60 * 1000,        // 10 min - in memory
-  refetchOnWindowFocus: true,       // Refresh on tab focus
-  keepPreviousData: true            // Show old while fetching new
+  staleTime: 5 * 60 * 1000, // 5 min - fresh
+  cacheTime: 10 * 60 * 1000, // 10 min - in memory
+  refetchOnWindowFocus: true, // Refresh on tab focus
+  keepPreviousData: true, // Show old while fetching new
 });
 ```
 
diff --git a/docs/02-architecture/game-launch-flow.md b/docs/02-architecture/game-launch-flow.md
index a01d129..90d7e5b 100644
--- a/docs/02-architecture/game-launch-flow.md
+++ b/docs/02-architecture/game-launch-flow.md
@@ -2,7 +2,9 @@
 
 ## Overview
 
-Game launch orchestrates multiple services: frontend requests launch data, backend mounts ZIPs, and frontend loads content directly from game-service into Ruffle or iframe.
+Game launch orchestrates multiple services: frontend requests launch data,
+backend mounts ZIPs, and frontend loads content directly from game-service into
+Ruffle or iframe.
 
 ## Architecture
 
@@ -102,6 +104,7 @@ sequenceDiagram
 ```
 
 **Launch Data Response**:
+
 ```typescript
 interface GameLaunchData {
   gameId: string;
@@ -152,6 +155,7 @@ sequenceDiagram
 ```
 
 **ZIP Manager Implementation**:
+
 ```typescript
 class ZipManager {
   private mounts: Map<string, StreamZip.StreamZipAsync> = new Map();
@@ -307,6 +311,7 @@ graph TB
 ```
 
 **Implementation**:
+
 ```typescript
 app.get('*', async (req, res) => {
   try {
@@ -319,15 +324,26 @@ app.get('*', async (req, res) => {
     const htdocsPath = join(config.htdocsPath, domain, path);
     if (fs.existsSync(htdocsPath)) {
       return res.sendFile(htdocsPath, {
-        headers: { 'Content-Type': getMimeType(htdocsPath), 'Access-Control-Allow-Origin': '*' }
+        headers: {
+          'Content-Type': getMimeType(htdocsPath),
+          'Access-Control-Allow-Origin': '*',
+        },
       });
     }
 
     // 2. Check game data directory
-    const gameDataPath = join(process.env.FLASHPOINT_PATH, 'Data', domain, path);
+    const gameDataPath = join(
+      process.env.FLASHPOINT_PATH,
+      'Data',
+      domain,
+      path
+    );
     if (fs.existsSync(gameDataPath)) {
       return res.sendFile(gameDataPath, {
-        headers: { 'Content-Type': getMimeType(gameDataPath), 'Access-Control-Allow-Origin': '*' }
+        headers: {
+          'Content-Type': getMimeType(gameDataPath),
+          'Access-Control-Allow-Origin': '*',
+        },
       });
     }
 
@@ -336,7 +352,7 @@ app.get('*', async (req, res) => {
     if (zipFile) {
       return res.send(zipFile).set({
         'Content-Type': getMimeType(path),
-        'Access-Control-Allow-Origin': '*'
+        'Access-Control-Allow-Origin': '*',
       });
     }
 
@@ -344,11 +360,13 @@ app.get('*', async (req, res) => {
     for (const cdnBase of process.env.EXTERNAL_FALLBACK_URLS.split(',')) {
       try {
         const cdnUrl = `${cdnBase}/${domain}${path}`;
-        const response = await axios.get(cdnUrl, { responseType: 'arraybuffer' });
+        const response = await axios.get(cdnUrl, {
+          responseType: 'arraybuffer',
+        });
         await cacheFile(htdocsPath, response.data);
         return res.send(response.data).set({
           'Content-Type': response.headers['content-type'],
-          'Access-Control-Allow-Origin': '*'
+          'Access-Control-Allow-Origin': '*',
         });
       } catch (cdnError) {
         continue;
@@ -381,7 +399,7 @@ function getMimeType(filePath: string): string {
     '.mp3': 'audio/mpeg',
     '.mp4': 'video/mp4',
     '.pdf': 'application/pdf',
-    '.zip': 'application/zip'
+    '.zip': 'application/zip',
   };
 
   return mimeTypes[ext] || 'application/octet-stream';
@@ -446,7 +464,8 @@ export const RufflePlayer: React.FC<{ gameUrl: string; gameTitle: string }> = ({
 2. Frontend: `GET /api/games/abc-123-def-456/launch`
 3. Backend queries database, finds `presentOnDisk = 1`
 4. Backend: `POST http://localhost:22501/mount` → Mounts ZIP
-5. Backend returns: `contentUrl: http://localhost:22500/http://example.com/games/mario.swf`
+5. Backend returns:
+   `contentUrl: http://localhost:22500/http://example.com/games/mario.swf`
 6. Frontend creates Ruffle player with this URL
 7. Ruffle: `GET http://localhost:22500/http://example.com/games/mario.swf`
 8. Proxy server checks htdocs → game data → mounted ZIPs → **Found in ZIP!**
diff --git a/docs/02-architecture/play-tracking-flow.md b/docs/02-architecture/play-tracking-flow.md
index 46616c8..164716b 100644
--- a/docs/02-architecture/play-tracking-flow.md
+++ b/docs/02-architecture/play-tracking-flow.md
@@ -2,7 +2,8 @@
 
 ## Overview
 
-The play tracking system monitors user gameplay sessions, records statistics, and provides analytics.
+The play tracking system monitors user gameplay sessions, records statistics,
+and provides analytics.
 
 ## Architecture
 
@@ -81,6 +82,7 @@ sequenceDiagram
 ```
 
 **Database Schema**:
+
 ```sql
 CREATE TABLE user_game_plays (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -100,8 +102,12 @@ CREATE INDEX idx_user_game_plays_game_id ON user_game_plays(game_id);
 ```
 
 **Frontend Hook**:
+
 ```typescript
-export function usePlaySession(gameId: string | null, gameTitle: string | null) {
+export function usePlaySession(
+  gameId: string | null,
+  gameTitle: string | null
+) {
   const sessionIdRef = useRef<string | null>(null);
   const previousGameIdRef = useRef<string | null>(null);
   const hasStartedSessionRef = useRef(false);
@@ -115,7 +121,7 @@ export function usePlaySession(gameId: string | null, gameTitle: string | null)
     },
     onError: (error) => {
       hasStartedSessionRef.current = false;
-    }
+    },
   });
 
   useEffect(() => {
@@ -147,7 +153,10 @@ export function usePlaySession(gameId: string | null, gameTitle: string | null)
     };
   }, []);
 
-  return { sessionId: sessionIdRef.current, isTracking: !!sessionIdRef.current };
+  return {
+    sessionId: sessionIdRef.current,
+    isTracking: !!sessionIdRef.current,
+  };
 }
 ```
 
@@ -188,6 +197,7 @@ sequenceDiagram
 ```
 
 **Backend Service**:
+
 ```typescript
 async endPlaySession(sessionId: string): Promise<void> {
   const session = UserDatabaseService.get(
@@ -247,6 +257,7 @@ graph TB
 ```
 
 **Database Schema**:
+
 ```sql
 CREATE TABLE user_game_stats (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -263,6 +274,7 @@ CREATE TABLE user_game_stats (
 ```
 
 **Update Logic**:
+
 ```typescript
 private async updateGameStats(
   userId: number,
@@ -302,6 +314,7 @@ private async updateGameStats(
 ### Overall User Statistics
 
 **Database Schema**:
+
 ```sql
 CREATE TABLE user_stats (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -355,6 +368,7 @@ private async updateFlashpointGameStats(
 ## 4. Statistics Retrieval
 
 **API Endpoints**:
+
 ```http
 GET /api/play/stats
 GET /api/play/top-games?limit=10
@@ -363,6 +377,7 @@ GET /api/play/history?limit=50&offset=0
 ```
 
 **Response Examples**:
+
 ```json
 {
   "userId": 1,
@@ -376,7 +391,8 @@ GET /api/play/history?limit=50&offset=0
 
 ## 5. Abandoned Session Cleanup
 
-Runs every 6 hours. Sessions inactive for 24+ hours are marked as ended with 4-hour duration cap.
+Runs every 6 hours. Sessions inactive for 24+ hours are marked as ended with
+4-hour duration cap.
 
 ```mermaid
 sequenceDiagram
@@ -401,6 +417,7 @@ sequenceDiagram
 ```
 
 **Implementation**:
+
 ```typescript
 async cleanupAbandonedSessions(): Promise<void> {
   const abandoned = UserDatabaseService.all(
@@ -432,6 +449,7 @@ async cleanupAbandonedSessions(): Promise<void> {
 ```
 
 **Scheduler Setup**:
+
 ```typescript
 import { schedule } from 'node-cron';
 
@@ -445,6 +463,7 @@ schedule('0 */6 * * *', async () => {
 ## 6. Frontend Components
 
 **User Stats Panel**:
+
 ```typescript
 export const UserStatsPanel = () => {
   const { data: stats, isLoading } = useUserStats();
@@ -468,6 +487,7 @@ export const UserStatsPanel = () => {
 ## Performance Optimization
 
 **Database Indexing**:
+
 ```sql
 CREATE INDEX idx_user_game_plays_user_id ON user_game_plays(user_id);
 CREATE INDEX idx_user_game_plays_game_id ON user_game_plays(game_id);
@@ -478,11 +498,12 @@ CREATE INDEX idx_user_game_stats_playtime ON user_game_stats(user_id, total_play
 **Query Optimization**: Use JOINs instead of N+1 queries.
 
 **Frontend Caching**:
+
 ```typescript
 useQuery({
   queryKey: ['playStats'],
   queryFn: () => playTrackingApi.getStats(),
-  staleTime: 5 * 60 * 1000  // Cache for 5 minutes
+  staleTime: 5 * 60 * 1000, // Cache for 5 minutes
 });
 ```
 
@@ -492,4 +513,5 @@ useQuery({
 
 **Data Export**: Allow users to export play history as CSV.
 
-**Aggregation Verification**: Periodic verification job compares calculated stats with stored stats and recalculates on mismatch.
+**Aggregation Verification**: Periodic verification job compares calculated
+stats with stored stats and recalculates on mismatch.
diff --git a/docs/02-architecture/service-communication.md b/docs/02-architecture/service-communication.md
index e9645ec..95d6165 100644
--- a/docs/02-architecture/service-communication.md
+++ b/docs/02-architecture/service-communication.md
@@ -2,7 +2,8 @@
 
 ## Overview
 
-Flashpoint Web uses HTTP-based communication between three services. Frontend communicates with backend, which proxies game file requests to game-service.
+Flashpoint Web uses HTTP-based communication between three services. Frontend
+communicates with backend, which proxies game file requests to game-service.
 
 ## Communication Architecture
 
@@ -49,10 +50,11 @@ graph TB
 **Protocol**: HTTP/1.1 with JSON, JWT Bearer authentication
 
 **API Client Configuration**:
+
 ```typescript
 const api = axios.create({
   baseURL: '/api',
-  headers: { 'Content-Type': 'application/json' }
+  headers: { 'Content-Type': 'application/json' },
 });
 
 // Request interceptor adds JWT
@@ -116,6 +118,7 @@ PATCH /api/users/me/settings {theme_mode, primary_color}
 ```
 
 **Error Response Format**:
+
 ```json
 {
   "error": "Error message description",
@@ -127,11 +130,13 @@ PATCH /api/users/me/settings {theme_mode, primary_color}
 ## Backend ↔ Game Service Communication
 
 Backend does NOT directly proxy game files. Instead:
+
 1. Returns launch URLs pointing to game service
 2. Frontend loads content directly from game service
 3. Backend mounts ZIPs when needed via internal API
 
 **Mount Game ZIP**:
+
 ```http
 POST http://localhost:22501/mount
 { "gameId": "uuid", "zipPath": "D:/Flashpoint/Data/Games/A/uuid.zip" }
@@ -139,6 +144,7 @@ Response: { "success": true, "mountPoint": "/gamedata/uuid" }
 ```
 
 **Unmount Game ZIP**:
+
 ```http
 POST http://localhost:22501/unmount
 { "gameId": "uuid" }
@@ -170,6 +176,7 @@ sequenceDiagram
 **Request**: `GET /http://example.com/path/game.swf`
 
 **Fallback Chain**:
+
 1. Local htdocs: `D:/Flashpoint/Legacy/htdocs/example.com/path/game.swf`
 2. Game data directory
 3. Mounted ZIPs (via zip-manager)
@@ -177,6 +184,7 @@ sequenceDiagram
 5. Cache downloaded content locally
 
 **Response Headers**:
+
 ```
 Content-Type: application/x-shockwave-flash
 Access-Control-Allow-Origin: *
@@ -204,14 +212,14 @@ export default defineConfig({
     proxy: {
       '/api': {
         target: 'http://localhost:3100',
-        changeOrigin: true
+        changeOrigin: true,
       },
       '/proxy': {
         target: 'http://localhost:22500',
-        changeOrigin: true
-      }
-    }
-  }
+        changeOrigin: true,
+      },
+    },
+  },
 });
 ```
 
@@ -229,8 +237,8 @@ await queryClient.invalidateQueries({ queryKey: ['playStats'] });
 useQuery({
   queryKey: ['games'],
   queryFn: fetchGames,
-  staleTime: 5 * 60 * 1000,      // 5 minutes
-  cacheTime: 10 * 60 * 1000      // 10 minutes
+  staleTime: 5 * 60 * 1000, // 5 minutes
+  cacheTime: 10 * 60 * 1000, // 10 minutes
 });
 ```
 
@@ -245,7 +253,7 @@ const mutation = useMutation({
 
     queryClient.setQueryData(['playlist', playlistId], (old) => ({
       ...old,
-      games: [...old.games, gameId]
+      games: [...old.games, gameId],
     }));
 
     return { previous };
@@ -255,45 +263,49 @@ const mutation = useMutation({
   },
   onSettled: () => {
     queryClient.invalidateQueries(['playlist', playlistId]);
-  }
+  },
 });
 ```
 
 ## Rate Limiting
 
 **Backend**:
+
 ```typescript
 const limiter = rateLimit({
   windowMs: 15 * 60 * 1000,
   max: 100,
-  message: 'Too many requests'
+  message: 'Too many requests',
 });
 
 const authLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
   max: 5,
-  skipSuccessfulRequests: true
+  skipSuccessfulRequests: true,
 });
 
 app.use('/api/', limiter);
 app.post('/api/auth/login', authLimiter, loginHandler);
 ```
 
-**Frontend**: TanStack Query deduplication prevents duplicate concurrent requests.
+**Frontend**: TanStack Query deduplication prevents duplicate concurrent
+requests.
 
 ## Error Handling
 
 **Frontend**:
+
 ```typescript
 useQuery({
   queryKey: ['games'],
   queryFn: fetchGames,
   retry: 3,
-  retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000)
+  retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
 });
 ```
 
 **Backend**:
+
 ```typescript
 router.get('/:id', async (req, res, next) => {
   try {
@@ -317,37 +329,45 @@ app.use((err, req, res, next) => {
 ## Performance Optimization
 
 **Response Compression**:
+
 ```typescript
 import compression from 'compression';
 app.use(compression());
 ```
 
-**Connection Pooling**: BetterSqlite3 uses single connection (optimized for SQLite).
+**Connection Pooling**: BetterSqlite3 uses single connection (optimized for
+SQLite).
 
 ## Security Considerations
 
 **CORS Configuration**:
+
 ```typescript
 // Backend
-app.use(cors({
-  origin: process.env.DOMAIN || 'http://localhost:5173',
-  credentials: true,
-  allowedHeaders: ['Content-Type', 'Authorization']
-}));
+app.use(
+  cors({
+    origin: process.env.DOMAIN || 'http://localhost:5173',
+    credentials: true,
+    allowedHeaders: ['Content-Type', 'Authorization'],
+  })
+);
 
 // Game Service (wide open for cross-domain content)
-app.use(cors({
-  origin: '*',
-  methods: ['GET', 'HEAD', 'OPTIONS']
-}));
+app.use(
+  cors({
+    origin: '*',
+    methods: ['GET', 'HEAD', 'OPTIONS'],
+  })
+);
 ```
 
 **Request Validation**:
+
 ```typescript
 const searchQuerySchema = z.object({
   search: z.string().optional(),
   page: z.coerce.number().int().min(1).default(1),
-  limit: z.coerce.number().int().min(1).max(100).default(50)
+  limit: z.coerce.number().int().min(1).max(100).default(50),
 });
 
 const query = searchQuerySchema.parse(req.query);
@@ -366,14 +386,18 @@ const game = DatabaseService.get(`SELECT * FROM game WHERE id = '${gameId}'`);
 ## Monitoring
 
 **Request Logging**:
+
 ```typescript
 import morgan from 'morgan';
-app.use(morgan('combined', {
-  stream: { write: (message) => logger.info(message.trim()) }
-}));
+app.use(
+  morgan('combined', {
+    stream: { write: (message) => logger.info(message.trim()) },
+  })
+);
 ```
 
 **Activity Tracking**:
+
 ```typescript
 export const logActivity = (action: string, targetType: string) => {
   return async (req, res, next) => {
@@ -382,7 +406,7 @@ export const logActivity = (action: string, targetType: string) => {
       action,
       targetType,
       targetId: req.params.id,
-      ipAddress: req.ip
+      ipAddress: req.ip,
     });
     next();
   };
diff --git a/docs/02-architecture/system-architecture.md b/docs/02-architecture/system-architecture.md
index eee44aa..00952e8 100644
--- a/docs/02-architecture/system-architecture.md
+++ b/docs/02-architecture/system-architecture.md
@@ -2,7 +2,9 @@
 
 ## Overview
 
-Flashpoint Web is a monorepo containing three independent microservices: frontend (React UI), backend (Express API), and game-service (game file proxy). Services communicate via HTTP with clean separation of concerns.
+Flashpoint Web is a monorepo containing three independent microservices:
+frontend (React UI), backend (Express API), and game-service (game file proxy).
+Services communicate via HTTP with clean separation of concerns.
 
 ## Architecture Diagram
 
@@ -92,15 +94,18 @@ graph TB
 
 **Purpose**: React single-page application for user interface
 
-**Technology**: React 18, TypeScript, Vite, React Router, TanStack Query, Zustand, Tailwind CSS, Ruffle
+**Technology**: React 18, TypeScript, Vite, React Router, TanStack Query,
+Zustand, Tailwind CSS, Ruffle
 
 **State Management**:
+
 - **Server State** (TanStack Query): Games, playlists, user data
 - **UI State** (Zustand): Sidebar, view modes, auth state
 - **URL State** (React Router): Search params, filters
 - **Local Storage**: Auth tokens, preferences
 
-**Key Features**: Game browsing, search, filtering, play tracking, favorites, playlists
+**Key Features**: Game browsing, search, filtering, play tracking, favorites,
+playlists
 
 ### Backend Service (Port 3100)
 
@@ -109,6 +114,7 @@ graph TB
 **Technology**: Express.js, TypeScript, BetterSqlite3, JWT, Bcrypt, Zod
 
 **Key Responsibilities**:
+
 - Game metadata queries
 - User management and authentication
 - Role-based access control (RBAC)
@@ -117,6 +123,7 @@ graph TB
 - Database hot-reloading for Flashpoint Launcher updates
 
 **Databases**:
+
 - **flashpoint.sqlite**: Read-only with file watcher
 - **user.db**: Read-write with schema migrations
 
@@ -127,6 +134,7 @@ graph TB
 **Purpose**: Game file serving and ZIP mounting
 
 **HTTP Proxy Server (22500)**:
+
 - Serves legacy web content with fallback chain:
   1. Local htdocs directory
   2. Game data directory
@@ -135,6 +143,7 @@ graph TB
   5. Local cache
 
 **GameZip Server (22501)**:
+
 - Mounts and streams ZIP archives
 - Zero-extraction design
 - LRU cache (max 100, 30-min TTL)
@@ -178,6 +187,7 @@ graph LR
 ```
 
 **Frontend → Backend**:
+
 1. User interaction triggers component action
 2. Custom hook calls API client
 3. API client adds JWT token via interceptor
@@ -185,6 +195,7 @@ graph LR
 5. Vite proxy forwards to Express (development)
 
 **Backend Processing**:
+
 1. Express route receives request
 2. Authentication middleware verifies JWT
 3. RBAC middleware checks permissions
@@ -195,6 +206,7 @@ graph LR
 8. Response sent back to client
 
 **Frontend State Update**:
+
 1. TanStack Query receives response
 2. Cache updated with new data
 3. Components re-render
@@ -209,6 +221,7 @@ graph LR
 **Hot-Reload**: FileSystem watcher detects changes and reloads connection
 
 **Key Tables**:
+
 - `game`: Game metadata (100,000+ entries)
 - `game_data`: Game file paths and launch commands
 - `platform`: Gaming platforms (Flash, HTML5, etc.)
@@ -220,22 +233,26 @@ graph LR
 **Ownership**: Application-managed with migrations
 
 **Authentication & Authorization**:
+
 - `users`: User accounts with hashed passwords (bcrypt)
 - `roles`: RBAC roles (admin, moderator, user, guest)
 - `role_permissions`: Role-permission mappings
 - `system_settings`: Global configuration
 
 **User Features**:
+
 - `user_playlists`: User-created playlists
 - `user_favorites`: Favorited games
 - `user_settings`: User preferences
 
 **Play Tracking**:
+
 - `user_game_plays`: Individual sessions
 - `user_game_stats`: Per-game aggregates
 - `user_stats`: Overall user stats
 
 **Activity Logging**:
+
 - `activity_logs`: Audit trail
 
 ## Security Architecture
@@ -266,11 +283,13 @@ sequenceDiagram
 ### Authorization
 
 **Role-Based Access Control**:
+
 ```
 User → Role → Permissions → Resources
 ```
 
 **Default Roles**:
+
 - `admin`: Full system access
 - `moderator`: Content management
 - `user`: Standard features
@@ -296,6 +315,7 @@ D:/Flashpoint/
 ```
 
 **Access Patterns**:
+
 - **Images/Logos**: Served by backend from file system
 - **Game Content**: Delegated to game-service proxy
 - **ZIPs**: Mounted by GameZip server on-demand
@@ -317,11 +337,13 @@ All services run on localhost with SQLite databases.
 ### Scaling Strategies (Future)
 
 **Horizontal**:
+
 - Frontend: Static hosting on CDN (Vercel, Netlify)
 - Backend: Multiple instances behind load balancer
 - Game Service: Region-specific replicas
 
 **Vertical**:
+
 - flashpoint.sqlite read replicas
 - user.db: PostgreSQL/MySQL for better concurrency
 - Redis for session storage and caching
@@ -341,13 +363,15 @@ All services run on localhost with SQLite databases.
 
 **Frontend**: Static build in `dist/`, minified, tree-shaken
 
-**Backend**: Compiled TypeScript, INFO logging, rate limiting, environment-specific JWT secret
+**Backend**: Compiled TypeScript, INFO logging, rate limiting,
+environment-specific JWT secret
 
 **Game Service**: Compiled TypeScript, structured logging, optimized concurrency
 
 ## Error Handling
 
 **Frontend Error Boundaries**:
+
 ```typescript
 <ErrorBoundary fallback={<ErrorPage />}>
   <GameList />
@@ -355,9 +379,13 @@ All services run on localhost with SQLite databases.
 ```
 
 **Backend**:
+
 ```typescript
 class AppError extends Error {
-  constructor(public statusCode: number, message: string) {}
+  constructor(
+    public statusCode: number,
+    message: string
+  ) {}
 }
 
 app.use((err, req, res, next) => {
@@ -373,11 +401,14 @@ app.use((err, req, res, next) => {
 
 ## Monitoring & Logging
 
-**Activity Logging**: All significant user actions logged with userId, action, targetType, targetId, timestamp
+**Activity Logging**: All significant user actions logged with userId, action,
+targetType, targetId, timestamp
 
-**Performance Metrics**: Play session durations, API response times, database query performance
+**Performance Metrics**: Play session durations, API response times, database
+query performance
 
 **Log Levels**:
+
 - `DEBUG`: Development
 - `INFO`: Normal operations
 - `WARN`: Recoverable issues
@@ -385,14 +416,21 @@ app.use((err, req, res, next) => {
 
 ## Technology Rationale
 
-**TypeScript**: Type safety, IDE support, refactoring, shared types, reduced runtime errors
+**TypeScript**: Type safety, IDE support, refactoring, shared types, reduced
+runtime errors
 
-**BetterSqlite3**: Synchronous API, performance, perfect for read-heavy workloads, WAL mode
+**BetterSqlite3**: Synchronous API, performance, perfect for read-heavy
+workloads, WAL mode
 
-**TanStack Query**: Automatic caching, invalidation, background refetching, optimistic updates
+**TanStack Query**: Automatic caching, invalidation, background refetching,
+optimistic updates
 
-**Monorepo**: Shared types, coordinated development, single deployment, consistent tooling
+**Monorepo**: Shared types, coordinated development, single deployment,
+consistent tooling
 
 ## Conclusion
 
-Flashpoint Web balances simplicity with scalability, maintaining clean service separation while enabling efficient inter-service communication. The three-service design allows independent scaling and deployment while keeping the codebase maintainable and type-safe.
+Flashpoint Web balances simplicity with scalability, maintaining clean service
+separation while enabling efficient inter-service communication. The
+three-service design allows independent scaling and deployment while keeping the
+codebase maintainable and type-safe.
diff --git a/docs/03-backend/README.md b/docs/03-backend/README.md
index c18891f..082ab53 100644
--- a/docs/03-backend/README.md
+++ b/docs/03-backend/README.md
@@ -1,6 +1,9 @@
 # Backend Service
 
-The backend is a REST API built with Express and TypeScript that serves as the central hub for the Flashpoint Web application. It manages game metadata, user accounts, authentication, and coordinates with the separate game-service for content delivery.
+The backend is a REST API built with Express and TypeScript that serves as the
+central hub for the Flashpoint Web application. It manages game metadata, user
+accounts, authentication, and coordinates with the separate game-service for
+content delivery.
 
 ## Overview
 
@@ -38,11 +41,14 @@ npm start       # Run production build
 ## Environment Variables
 
 **Required:**
-- `FLASHPOINT_PATH` - Path to Flashpoint installation (all other paths derived automatically)
+
+- `FLASHPOINT_PATH` - Path to Flashpoint installation (all other paths derived
+  automatically)
 - `GAME_SERVICE_HOST` - Game service hostname/IP (default: localhost)
 - `DOMAIN` - Frontend URL (default: http://localhost:5173)
 
-See [configuration.md](./configuration.md) for complete environment variable documentation.
+See [configuration.md](./configuration.md) for complete environment variable
+documentation.
 
 ## Core Concepts
 
@@ -76,11 +82,13 @@ See [configuration.md](./configuration.md) for complete environment variable doc
 ### Role-Based Access Control (RBAC)
 
 Three default roles:
+
 - **Admin** (priority 100): Full access
 - **User** (priority 50): Can play games, manage playlists
 - **Guest** (priority 0): Read-only access
 
-Permissions are assigned to roles, and users inherit permissions from their role.
+Permissions are assigned to roles, and users inherit permissions from their
+role.
 
 ## Project Structure
 
@@ -103,6 +111,7 @@ backend/
 ## API Routes
 
 Main route groups:
+
 - `/api/auth` - Login, register, token refresh
 - `/api/users` - User management
 - `/api/roles` - Role and permission management
@@ -112,12 +121,15 @@ Main route groups:
 - `/api/playlists` - User playlists
 - `/api/domains` - Domain management
 
-See the [API Reference](../06-api-reference/README.md) for complete API documentation.
+See the [API Reference](../06-api-reference/README.md) for complete API
+documentation.
 
 ## Services
 
-- [database-service.md](./services/database-service.md) - Flashpoint database connection with hot-reload
-- [user-database-service.md](./services/user-database-service.md) - User database with migrations
+- [database-service.md](./services/database-service.md) - Flashpoint database
+  connection with hot-reload
+- [user-database-service.md](./services/user-database-service.md) - User
+  database with migrations
 - AuthService - Authentication and JWT management
 - UserService - User CRUD operations
 - GameService - Game metadata queries
@@ -147,6 +159,7 @@ See the [API Reference](../06-api-reference/README.md) for complete API document
 ## Background Jobs
 
 **Abandoned Session Cleanup**
+
 - Runs every 6 hours
 - Ends sessions older than 24 hours
 - Updates play statistics
@@ -154,6 +167,7 @@ See the [API Reference](../06-api-reference/README.md) for complete API document
 ## Error Handling
 
 Centralized error middleware:
+
 - `AppError` class for operational errors
 - Automatic HTTP status code mapping
 - Structured error responses
@@ -162,6 +176,7 @@ Centralized error middleware:
 ## Logging
 
 Winston logger with:
+
 - Console output with colors (development)
 - File logging (production)
 - Log levels: error, warn, info, debug
@@ -201,16 +216,19 @@ npm test -- --coverage     # Coverage report
 ## Troubleshooting
 
 ### Database Locked Error
+
 - Close Flashpoint Launcher before starting backend
 - Ensure only one backend instance is running
 - Check file permissions on database files
 
 ### Authentication Failures
+
 - Verify JWT_SECRET is set correctly
 - Check token expiration time
 - Ensure user is active in database
 
 ### Game Files Not Loading
+
 - Verify game-service is running on port 22500/22501
 - Check GAME_SERVICE_HOST in .env (default: localhost)
 - Ensure FLASHPOINT_PATH is correct
@@ -230,6 +248,7 @@ NODE_ENV=production npm start
 ```
 
 Requirements:
+
 1. Set `NODE_ENV=production`
 2. Set secure `JWT_SECRET`
 3. Configure proper `DOMAIN`
@@ -240,6 +259,7 @@ Requirements:
 ## Performance Metrics
 
 Typical response times (p95):
+
 - Game search: < 100ms
 - Game details: < 50ms
 - User login: < 200ms (bcrypt hashing)
diff --git a/docs/03-backend/architecture.md b/docs/03-backend/architecture.md
index 5223aad..05869cb 100644
--- a/docs/03-backend/architecture.md
+++ b/docs/03-backend/architecture.md
@@ -1,6 +1,7 @@
 # Backend Architecture
 
-Architectural patterns and design decisions for the Flashpoint Web backend service.
+Architectural patterns and design decisions for the Flashpoint Web backend
+service.
 
 ## Architecture Overview
 
@@ -77,11 +78,14 @@ export class DatabaseService {
 Composable request processing; each middleware handles one concern.
 
 ```typescript
-router.post('/users',
-  authenticate,                      // Verify JWT
-  requirePermission('users.create'),  // Check permission
-  logActivity('create', 'users'),     // Log activity
-  async (req, res) => { /* handle */ }
+router.post(
+  '/users',
+  authenticate, // Verify JWT
+  requirePermission('users.create'), // Check permission
+  logActivity('create', 'users'), // Log activity
+  async (req, res) => {
+    /* handle */
+  }
 );
 ```
 
@@ -94,6 +98,7 @@ Abstract data access from business logic; centralized query logic.
 ### 1. Two-Database Architecture
 
 **Rationale:**
+
 - Flashpoint database managed by external Launcher
 - Prevents conflicts from simultaneous writes
 - User data needs different schema and write access
@@ -102,6 +107,7 @@ Abstract data access from business logic; centralized query logic.
 ### 2. Synchronous Database Access (better-sqlite3)
 
 **Rationale:**
+
 - SQLite is single-threaded; async provides no benefit
 - Simpler, more readable code
 - Better performance for SQLite workloads
@@ -110,17 +116,20 @@ Abstract data access from business logic; centralized query logic.
 ### 3. JWT-Based Authentication
 
 **Rationale:**
+
 - Stateless authentication (no session storage)
 - Works across multiple backend instances
 - Mobile-friendly
 
 **Implementation:**
+
 - Access token: 1 hour expiry
 - Refresh token: 30 days expiry, stored in DB
 
 ### 4. RBAC over ACL
 
 **Rationale:**
+
 - Easier to manage permissions for groups of users
 - Standard pattern for most applications
 - Simpler permission checks
@@ -129,18 +138,21 @@ Abstract data access from business logic; centralized query logic.
 ### 5. Activity Logging
 
 **Rationale:**
+
 - Audit trail for security
 - User behavior analytics
 - Debugging user issues
 - Compliance requirements
 
 **Implementation:**
+
 - Non-blocking (setImmediate)
 - Automatic cleanup (90-day retention)
 
 ### 6. Play Session Tracking
 
 **Rationale:**
+
 - Detailed play history per user
 - Calculate accurate statistics
 - Support for session duration
@@ -177,12 +189,14 @@ export class AppError extends Error {
 ### Connection Management
 
 **Flashpoint Database:**
+
 - Single read-only connection per process
 - File watcher for hot-reload
 - Automatic reconnection on file change
 - Debounced reload (500ms)
 
 **User Database:**
+
 - Single read/write connection per process
 - Foreign key enforcement enabled
 - Schema migrations on startup
@@ -192,7 +206,7 @@ export class AppError extends Error {
 - Indexes on foreign keys and frequently queried columns
 - Pagination to prevent memory issues
 - Prepared statements for reusable queries
-- Selective columns (avoid SELECT *)
+- Selective columns (avoid SELECT \*)
 
 ### Transaction Strategy
 
@@ -257,10 +271,12 @@ transaction(); // Execute atomically
 ### Caching Strategy
 
 **Currently Implemented:**
+
 - Permission caching in-memory (5-minute TTL)
 - 90%+ reduction in permission queries
 
 **Future Recommendations:**
+
 - Redis for distributed session storage
 - Cache game metadata queries
 - Cache filter options (platforms, tags)
@@ -270,6 +286,7 @@ transaction(); // Execute atomically
 ### Logging
 
 Winston logger with structured logging:
+
 ```typescript
 logger.info('User logged in', { userId, username, ipAddress });
 logger.error('Database error', { error: err.message });
@@ -278,6 +295,7 @@ logger.error('Database error', { error: err.message });
 ### Activity Logs
 
 Database-backed activity logging:
+
 - All user actions logged
 - IP address and user agent captured
 - Queryable for analytics
@@ -286,6 +304,7 @@ Database-backed activity logging:
 ### Health Checks
 
 `/health` endpoint returns:
+
 - Server status
 - Database connection status
 - Flashpoint path
@@ -322,24 +341,28 @@ Database-backed activity logging:
 ## Best Practices
 
 ### Service Methods
+
 - Return typed data (use TypeScript interfaces)
 - Throw `AppError` for business logic errors
 - Keep methods focused and single-purpose
 - Use transactions for multi-step operations
 
 ### Route Handlers
+
 - Validate input early
 - Use middleware for auth/permissions
 - Handle errors with try/catch
 - Return consistent JSON structure
 
 ### Database Queries
+
 - Use parameterized queries (prevent SQL injection)
 - Add indexes for frequently queried columns
 - Use LIMIT for potentially large results
 - Prefer prepared statements for reusable queries
 
 ### Error Handling
+
 - Use `AppError` for expected errors
 - Log unexpected errors with full stack trace
 - Never expose internal errors to clients
@@ -348,11 +371,13 @@ Database-backed activity logging:
 ## Testing Strategy
 
 ### Unit Tests
+
 - Test individual service methods
 - Mock database services
 - Focus on business logic
 
 ### Integration Tests
+
 - Test route handlers end-to-end
 - Use test database
 - Verify HTTP responses
diff --git a/docs/03-backend/configuration.md b/docs/03-backend/configuration.md
index 7e5aca0..d184de7 100644
--- a/docs/03-backend/configuration.md
+++ b/docs/03-backend/configuration.md
@@ -1,6 +1,7 @@
 # Backend Configuration
 
-This document describes all environment variables and configuration options for the Flashpoint Web backend service.
+This document describes all environment variables and configuration options for
+the Flashpoint Web backend service.
 
 ## Configuration File
 
@@ -40,6 +41,7 @@ export const config = {
 ### Server Configuration
 
 #### `NODE_ENV`
+
 - **Type**: string
 - **Default**: `development`
 - **Options**: `development`, `production`, `test`
@@ -50,6 +52,7 @@ export const config = {
   ```
 
 #### `PORT`
+
 - **Type**: number
 - **Default**: `3100`
 - **Description**: HTTP server port
@@ -59,6 +62,7 @@ export const config = {
   ```
 
 #### `HOST`
+
 - **Type**: string
 - **Default**: `0.0.0.0`
 - **Description**: Server bind address
@@ -71,6 +75,7 @@ export const config = {
 ### Flashpoint Paths
 
 #### `FLASHPOINT_PATH`
+
 - **Type**: string
 - **Default**: `D:/Flashpoint`
 - **Required**: Yes
@@ -92,39 +97,54 @@ All other Flashpoint paths are automatically derived from `FLASHPOINT_PATH`:
 - Playlists: `${FLASHPOINT_PATH}/Data/Playlists`
 - Games: `${FLASHPOINT_PATH}/Data/Games`
 
-You do not need to set environment variables for these paths - they are calculated automatically from `FLASHPOINT_PATH`.
+You do not need to set environment variables for these paths - they are
+calculated automatically from `FLASHPOINT_PATH`.
 
 ### Flashpoint Edition Auto-Detection
 
-The Flashpoint edition is **automatically detected** from `${FLASHPOINT_PATH}/version.txt` on server startup. No environment variable is needed.
+The Flashpoint edition is **automatically detected** from
+`${FLASHPOINT_PATH}/version.txt` on server startup. No environment variable is
+needed.
 
 **How it works:**
 
-1. On startup, `backend/src/config.ts` reads `version.txt` from the Flashpoint installation directory
+1. On startup, `backend/src/config.ts` reads `version.txt` from the Flashpoint
+   installation directory
 2. The file content is parsed for "Infinity" or "Ultimate" (case-insensitive)
-3. The detected edition and full version string are stored in the `config` object:
+3. The detected edition and full version string are stored in the `config`
+   object:
    - `config.flashpointEdition` — `"infinity"` or `"ultimate"`
-   - `config.flashpointVersionString` — Full version string (e.g., `"Flashpoint 14.0.3 Infinity - Kingfisher"`)
-4. Backend services (GameService, MetadataSyncService, MetadataUpdateService) read `config` directly
-5. The frontend receives edition/version via the `/api/settings/public` endpoint (injected from `config`, not stored in DB)
+   - `config.flashpointVersionString` — Full version string (e.g.,
+     `"Flashpoint 14.0.3 Infinity - Kingfisher"`)
+4. Backend services (GameService, MetadataSyncService, MetadataUpdateService)
+   read `config` directly
+5. The frontend receives edition/version via the `/api/settings/public` endpoint
+   (injected from `config`, not stored in DB)
 6. If `version.txt` is missing or unparseable, defaults to `"infinity"`
 
 **Example version.txt contents:**
+
 - Infinity: `Flashpoint 14.0.3 Infinity - Kingfisher`
 - Ultimate: `Flashpoint 14 Ultimate - Kingfisher`
 
 **Edition differences:**
-- **Infinity**: Supports metadata sync from FPFSS, game table includes `logoPath`/`screenshotPath` columns
-- **Ultimate**: No metadata sync, game table lacks `logoPath`/`screenshotPath` columns
 
-The edition is displayed as read-only information in the Settings UI (not user-configurable).
+- **Infinity**: Supports metadata sync from FPFSS, game table includes
+  `logoPath`/`screenshotPath` columns
+- **Ultimate**: No metadata sync, game table lacks `logoPath`/`screenshotPath`
+  columns
+
+The edition is displayed as read-only information in the Settings UI (not
+user-configurable).
 
 ### Game Service Configuration
 
 #### `GAME_SERVICE_HOST`
+
 - **Type**: string
 - **Default**: `localhost`
-- **Description**: Hostname/IP of game-service for constructing proxy and GameZip URLs
+- **Description**: Hostname/IP of game-service for constructing proxy and
+  GameZip URLs
 - **Usage**:
   ```bash
   GAME_SERVICE_HOST=localhost  # Development
@@ -133,6 +153,7 @@ The edition is displayed as read-only information in the Settings UI (not user-c
   ```
 
 The proxy and GameZip server URLs are automatically constructed as:
+
 - Proxy: `http://${GAME_SERVICE_HOST}:22500`
 - GameZip: `http://${GAME_SERVICE_HOST}:22501`
 
@@ -140,9 +161,11 @@ The proxy and GameZip server URLs are automatically constructed as:
 
 #### Image CDN URLs (Automatic)
 
-Image CDN URLs are automatically read from Flashpoint's preferences file. No configuration required.
+Image CDN URLs are automatically read from Flashpoint's preferences file. No
+configuration required.
 
-- **Source**: Flashpoint preferences (`onDemandBaseUrl` from `preferences.json` or `.preferences.defaults.json`)
+- **Source**: Flashpoint preferences (`onDemandBaseUrl` from `preferences.json`
+  or `.preferences.defaults.json`)
 - **Fallback**: If preferences are unavailable, defaults to:
   - `https://infinity.flashpointarchive.org/Flashpoint/Data/Images`
   - `https://infinity.unstable.life/Flashpoint/Data/Images`
@@ -150,6 +173,7 @@ Image CDN URLs are automatically read from Flashpoint's preferences file. No con
 ### Database Configuration
 
 #### `USER_DB_PATH`
+
 - **Type**: string
 - **Default**: `./user.db`
 - **Description**: Path to user database file
@@ -162,6 +186,7 @@ Image CDN URLs are automatically read from Flashpoint's preferences file. No con
 ### Security Configuration
 
 #### `JWT_SECRET`
+
 - **Type**: string
 - **Default**: `change-in-production-use-long-random-string`
 - **Required**: Yes (in production)
@@ -178,6 +203,7 @@ Image CDN URLs are automatically read from Flashpoint's preferences file. No con
   ```
 
 #### `JWT_EXPIRES_IN`
+
 - **Type**: string
 - **Default**: `1h`
 - **Description**: Access token expiration time
@@ -190,6 +216,7 @@ Image CDN URLs are automatically read from Flashpoint's preferences file. No con
   ```
 
 #### `BCRYPT_SALT_ROUNDS`
+
 - **Type**: number
 - **Default**: `10`
 - **Description**: Number of bcrypt hashing rounds
@@ -203,6 +230,7 @@ Image CDN URLs are automatically read from Flashpoint's preferences file. No con
 ### CORS Configuration
 
 #### `DOMAIN`
+
 - **Type**: string
 - **Default**: `http://localhost:5173`
 - **Required**: Yes
@@ -216,6 +244,7 @@ Image CDN URLs are automatically read from Flashpoint's preferences file. No con
 ### Rate Limiting
 
 #### `RATE_LIMIT_WINDOW_MS`
+
 - **Type**: number
 - **Default**: `60000` (1 minute)
 - **Description**: Rate limit window in milliseconds
@@ -225,6 +254,7 @@ Image CDN URLs are automatically read from Flashpoint's preferences file. No con
   ```
 
 #### `RATE_LIMIT_MAX_REQUESTS`
+
 - **Type**: number
 - **Default**: `100`
 - **Description**: Maximum requests per window
@@ -237,6 +267,7 @@ Image CDN URLs are automatically read from Flashpoint's preferences file. No con
 ### Logging Configuration
 
 #### `LOG_LEVEL`
+
 - **Type**: string
 - **Default**: `info`
 - **Options**: `error`, `warn`, `info`, `debug`
@@ -249,15 +280,18 @@ Image CDN URLs are automatically read from Flashpoint's preferences file. No con
   ```
 
 #### `LOG_FILE`
+
 - **Type**: string
 - **Default**: undefined (console only)
-- **Description**: Path to log file for persistent logging. When set, logs are written to both console and file.
+- **Description**: Path to log file for persistent logging. When set, logs are
+  written to both console and file.
 - **Features**:
   - Automatic log rotation (10MB max file size)
   - Keeps last 5 log files
   - JSON format for easy parsing
   - Directory created automatically
 - **Usage**:
+
   ```bash
   # File logging enabled
   LOG_FILE=/var/log/flashpoint-backend.log
@@ -377,9 +411,10 @@ Configuration is loaded in this order:
 3. **Default values** in `config.ts`
 
 Example:
+
 ```typescript
 // PORT comes from: process.env.PORT → .env file → default '3100'
-port: parseInt(process.env.PORT || '3100', 10)
+port: parseInt(process.env.PORT || '3100', 10);
 ```
 
 ## Security Best Practices
@@ -399,17 +434,20 @@ port: parseInt(process.env.PORT || '3100', 10)
 ### Secret Management
 
 **Development**:
+
 - Use `.env` file
 - Add `.env` to `.gitignore`
 - Share `.env.example` (without secrets)
 
 **Production**:
+
 - Use environment variables (not `.env` file)
 - Use secret management service (AWS Secrets Manager, Azure Key Vault, etc.)
 - Rotate secrets regularly
 - Never commit secrets to git
 
 **Docker**:
+
 ```bash
 # Pass secrets via environment
 docker run -e JWT_SECRET=$JWT_SECRET -e DOMAIN=$DOMAIN ...
@@ -425,13 +463,16 @@ The backend validates configuration on startup:
 ```typescript
 // Checks performed in DatabaseService.initialize()
 if (!fs.existsSync(config.flashpointDbPath)) {
-  throw new Error(`Flashpoint database not found at: ${config.flashpointDbPath}`);
+  throw new Error(
+    `Flashpoint database not found at: ${config.flashpointDbPath}`
+  );
 }
 ```
 
 ### Common Configuration Errors
 
 **Database not found**:
+
 ```
 Error: Flashpoint database not found at: D:/Flashpoint/Data/flashpoint.sqlite
 Solution: Verify FLASHPOINT_PATH environment variable points to valid Flashpoint installation
@@ -439,12 +480,14 @@ Solution: Verify FLASHPOINT_PATH environment variable points to valid Flashpoint
 ```
 
 **Port already in use**:
+
 ```
 Error: listen EADDRINUSE: address already in use :::3100
 Solution: Change PORT or stop other process using port 3100
 ```
 
 **CORS error**:
+
 ```
 Access to fetch at 'http://localhost:3100/api/games' from origin
 'http://localhost:5174' has been blocked by CORS policy
@@ -452,6 +495,7 @@ Solution: Set DOMAIN=http://localhost:5174
 ```
 
 **JWT verification failed**:
+
 ```
 Error: Invalid or expired token
 Solution: Ensure frontend and backend use same JWT_SECRET
diff --git a/docs/03-backend/database/schema.md b/docs/03-backend/database/schema.md
index 24d5520..4b5c774 100644
--- a/docs/03-backend/database/schema.md
+++ b/docs/03-backend/database/schema.md
@@ -15,7 +15,9 @@ The backend uses two separate SQLite databases:
 
 ### Purpose
 
-Contains the official Flashpoint Archive game metadata. This database is managed by the Flashpoint Launcher and should be treated as read-only (except for play statistics).
+Contains the official Flashpoint Archive game metadata. This database is managed
+by the Flashpoint Launcher and should be treated as read-only (except for play
+statistics).
 
 ### Main Tables
 
@@ -67,6 +69,7 @@ CREATE INDEX idx_game_library ON game(library);
 ```
 
 **Key Fields**:
+
 - `id`: Unique game identifier (UUID)
 - `platformName`: Platform name (Flash, HTML5, Shockwave, etc.)
 - `library`: Game library (arcade, theatre)
@@ -146,7 +149,9 @@ CREATE INDEX idx_game_data_gameId ON game_data(gameId);
 ```
 
 **Key Fields**:
-- `presentOnDisk`: Download status (NULL = no file needed, 0 = needs download, 1 = available)
+
+- `presentOnDisk`: Download status (NULL = no file needed, 0 = needs download, 1
+  = available)
 - `launchCommand`: Preferred launch command
 - `path`: File path for game content
 - `parameters`: URL parameters to append
@@ -192,7 +197,8 @@ CREATE TABLE playlist_game (
 
 ### Purpose
 
-Stores application-specific data: user accounts, authentication, roles, permissions, play tracking, and settings.
+Stores application-specific data: user accounts, authentication, roles,
+permissions, play tracking, and settings.
 
 ### Authentication Tables
 
@@ -221,6 +227,7 @@ CREATE INDEX idx_users_is_active ON users(is_active);
 ```
 
 **Default Users**:
+
 - Username: `admin`, Password: `admin123` (created on first run)
 
 ---
@@ -241,6 +248,7 @@ CREATE TABLE roles (
 ```
 
 **Default Roles**:
+
 - `admin` (id=1, priority=100): Full access
 - `user` (id=2, priority=50): Standard access
 - `guest` (id=3, priority=0): Read-only access
@@ -265,6 +273,7 @@ CREATE INDEX idx_permissions_resource_action ON permissions(resource, action);
 ```
 
 **Default Permissions**:
+
 - `games.read`, `games.play`, `games.download`
 - `playlists.read`, `playlists.create`, `playlists.update`, `playlists.delete`
 - `users.read`, `users.create`, `users.update`, `users.delete`
@@ -492,6 +501,7 @@ CREATE INDEX idx_user_settings_key ON user_settings(setting_key);
 ```
 
 **Common Settings**:
+
 - `theme_mode`: "light" | "dark" | "system"
 - `primary_color`: Color name (e.g., "blue", "green")
 - `sidebar_collapsed`: "true" | "false"
@@ -509,7 +519,8 @@ user_game_plays.game_id -> game.id (Flashpoint DB)
 user_game_stats.game_id -> game.id (Flashpoint DB)
 ```
 
-These are soft foreign keys (not enforced by SQLite) and must be maintained by application logic.
+These are soft foreign keys (not enforced by SQLite) and must be maintained by
+application logic.
 
 ### Permission Hierarchy
 
@@ -544,6 +555,7 @@ All foreign keys and frequently queried columns are indexed for performance:
 ## Data Types
 
 SQLite TEXT fields store:
+
 - **Dates/Times**: ISO 8601 format (`YYYY-MM-DDTHH:MM:SS.sssZ`)
 - **Booleans**: 0 (false) or 1 (true)
 - **JSON**: Stringified JSON objects in `details` columns
@@ -555,9 +567,11 @@ SQLite TEXT fields store:
 See [migrations.md](./migrations.md) for migration system documentation.
 
 Applied migrations:
+
 1. `001_user-schema.sql` - Initial user database schema
 2. `002_create-user-settings.sql` - Add user_settings table
-3. `003_drop-legacy-theme-columns.sql` - Remove old theme columns from users table
+3. `003_drop-legacy-theme-columns.sql` - Remove old theme columns from users
+   table
 
 ---
 
@@ -602,7 +616,9 @@ LIMIT 10;
 
 ## Related Documentation
 
-- [UserDatabaseService](../services/user-database-service.md) - Database access service
-- [DatabaseService](../services/database-service.md) - Flashpoint database service
+- [UserDatabaseService](../services/user-database-service.md) - Database access
+  service
+- [DatabaseService](../services/database-service.md) - Flashpoint database
+  service
 - [Migrations](./migrations.md) - Migration system
 - [Data Models](./data-models.md) - TypeScript types
diff --git a/docs/03-backend/services/database-service.md b/docs/03-backend/services/database-service.md
index f36fe6c..24c28c2 100644
--- a/docs/03-backend/services/database-service.md
+++ b/docs/03-backend/services/database-service.md
@@ -1,10 +1,12 @@
 # DatabaseService
 
-Manages connection to the Flashpoint game metadata database (flashpoint.sqlite) with automatic hot-reload when the database file changes.
+Manages connection to the Flashpoint game metadata database (flashpoint.sqlite)
+with automatic hot-reload when the database file changes.
 
 ## Overview
 
-Implements singleton pattern for database access with file watching and hot-reload.
+Implements singleton pattern for database access with file watching and
+hot-reload.
 
 ## Key Features
 
@@ -12,7 +14,8 @@ Implements singleton pattern for database access with file watching and hot-relo
 - **File watching**: Detects when Flashpoint Launcher updates the database
 - **Hot-reload**: Automatically reconnects when database changes
 - **Read/Write access**: Allows play statistics updates
-- **Synchronous API**: Uses better-sqlite3 for better performance than async wrappers
+- **Synchronous API**: Uses better-sqlite3 for better performance than async
+  wrappers
 
 ## Public API
 
@@ -44,10 +47,7 @@ const result = db.prepare('SELECT * FROM game WHERE id = ?').get(gameId);
 Execute a query and return the first result row.
 
 ```typescript
-const game = DatabaseService.get(
-  'SELECT * FROM game WHERE id = ?',
-  [gameId]
-);
+const game = DatabaseService.get('SELECT * FROM game WHERE id = ?', [gameId]);
 ```
 
 **Returns**: First result row or null if no results
@@ -153,7 +153,9 @@ DatabaseService.run(
 Main tables in Flashpoint database:
 
 ### game
+
 Main game metadata table:
+
 - `id` (TEXT PRIMARY KEY) - UUID
 - `title` (TEXT) - Game title
 - `developer` (TEXT) - Developer name
@@ -168,12 +170,15 @@ Main game metadata table:
 - `lastPlayed` (TEXT) - Last played timestamp
 
 ### platform
+
 Platform definitions with id and name.
 
 ### tag
+
 Tag definitions with id, name, and category.
 
 ### game_tags_tag
+
 Many-to-many relationship between games and tags.
 
 ## Error Handling
@@ -208,15 +213,18 @@ this.watcher = fs.watch(config.flashpointDbPath, (eventType) => {
 });
 ```
 
-**Debouncing**: Waits 500ms after last change to prevent excessive reloads during Launcher operations.
+**Debouncing**: Waits 500ms after last change to prevent excessive reloads
+during Launcher operations.
 
 ### Edge Cases
 
-**Launcher Lock**: When Flashpoint Launcher is updating, reload waits 500ms then retries if lock still present.
+**Launcher Lock**: When Flashpoint Launcher is updating, reload waits 500ms then
+retries if lock still present.
 
 **Rapid Changes**: Multiple rapid changes debounce to single reload.
 
-**File Deletion**: If database is deleted, error logged and service remains in error state until file restored.
+**File Deletion**: If database is deleted, error logged and service remains in
+error state until file restored.
 
 ## Performance
 
@@ -224,7 +232,7 @@ this.watcher = fs.watch(config.flashpointDbPath, (eventType) => {
 
 - Use indexed columns in WHERE clauses
 - Limit result sets with LIMIT
-- Avoid SELECT * for large tables
+- Avoid SELECT \* for large tables
 - Use prepared statements (cached by better-sqlite3)
 
 ### Connection Reuse
@@ -246,6 +254,7 @@ this.watcher = fs.watch(config.flashpointDbPath, (eventType) => {
 **Symptom**: `SQLITE_BUSY: database is locked`
 
 **Solutions**:
+
 - Close Flashpoint Launcher
 - Wait for operations to complete
 - Use shorter transactions
@@ -255,6 +264,7 @@ this.watcher = fs.watch(config.flashpointDbPath, (eventType) => {
 **Symptom**: `Flashpoint database not found at: <path>`
 
 **Solutions**:
+
 - Verify path in .env
 - Check Flashpoint installation
 - Verify file permissions
@@ -264,6 +274,7 @@ this.watcher = fs.watch(config.flashpointDbPath, (eventType) => {
 **Symptom**: Database changes not reflected
 
 **Solutions**:
+
 - Check logs for watcher start message
 - Wait 500ms+ after change
 - Manually call `reload()`
diff --git a/docs/03-backend/services/permission-cache-service.md b/docs/03-backend/services/permission-cache-service.md
index a5bf8d2..7b33c04 100644
--- a/docs/03-backend/services/permission-cache-service.md
+++ b/docs/03-backend/services/permission-cache-service.md
@@ -2,27 +2,33 @@
 
 ## Overview
 
-The PermissionCache service provides an in-memory caching layer for user and role permissions, significantly reducing database queries and improving authorization performance.
+The PermissionCache service provides an in-memory caching layer for user and
+role permissions, significantly reducing database queries and improving
+authorization performance.
 
 **Location:** `backend/src/services/PermissionCache.ts`
 
 **Type:** Singleton service (static methods)
 
-**Purpose:** Cache user permissions to avoid repeated database queries during authorization checks
+**Purpose:** Cache user permissions to avoid repeated database queries during
+authorization checks
 
 ## Performance Impact
 
 **Before Caching:**
+
 - Every authenticated request queries database for permissions
 - ~50-100ms per permission check (includes database query)
 - High database load under concurrent requests
 
 **After Caching:**
+
 - 90%+ of permission checks served from cache
 - ~1-5ms per permission check (in-memory lookup)
 - Significantly reduced database load
 
 **Example Load:**
+
 - 100 requests/second × 2 permission checks/request = 200 DB queries/second
 - With caching: ~20 DB queries/second (90% cache hit rate)
 - **10x reduction in database queries**
@@ -34,7 +40,7 @@ The PermissionCache service provides an in-memory caching layer for user and rol
 ```typescript
 interface CacheEntry<T> {
   data: T;
-  expiresAt: number;  // Unix timestamp
+  expiresAt: number; // Unix timestamp
 }
 
 class PermissionCache {
@@ -52,11 +58,13 @@ class PermissionCache {
 ### TTL (Time To Live)
 
 **User Permissions:**
+
 - TTL: 5 minutes (300,000 ms)
 - Rationale: Balance between performance and permission update latency
 - Trade-off: Permission changes may take up to 5 minutes to propagate
 
 **Role Permissions:**
+
 - TTL: 10 minutes (600,000 ms)
 - Rationale: Roles change less frequently than user-role assignments
 - Trade-off: Role permission changes may take up to 10 minutes to propagate
@@ -86,13 +94,16 @@ class PermissionCache {
 Get user permissions from cache.
 
 **Parameters:**
+
 - `userId` (number): User ID to lookup
 
 **Returns:**
+
 - `string[]`: Array of permission strings if cache hit
 - `null`: If cache miss or entry expired
 
 **Example:**
+
 ```typescript
 const cached = PermissionCache.getUserPermissions(5);
 if (cached) {
@@ -111,14 +122,17 @@ if (cached) {
 Store user permissions in cache.
 
 **Parameters:**
+
 - `userId` (number): User ID
 - `permissions` (string[]): Array of permission strings
 
 **Side Effects:**
+
 - Creates cache entry with 5-minute TTL
 - Logs debug message to console
 
 **Example:**
+
 ```typescript
 const permissions = ['games.read', 'games.play'];
 PermissionCache.setUserPermissions(5, permissions);
@@ -129,14 +143,17 @@ PermissionCache.setUserPermissions(5, permissions);
 Remove user's permission cache entry.
 
 **Parameters:**
+
 - `userId` (number): User ID to invalidate
 
 **Use Cases:**
+
 - User role changed
 - User permissions updated
 - Manual cache invalidation
 
 **Example:**
+
 ```typescript
 // After changing user role
 await userService.updateUserRole(5, 2);
@@ -148,13 +165,16 @@ PermissionCache.invalidateUser(5);
 Remove role's permission cache entry.
 
 **Parameters:**
+
 - `roleId` (number): Role ID to invalidate
 
 **Use Cases:**
+
 - Role permissions updated
 - Manual cache invalidation
 
 **Example:**
+
 ```typescript
 // After updating role permissions
 await roleService.updateRolePermissions(2, [1, 2, 3]);
@@ -166,12 +186,14 @@ PermissionCache.invalidateRole(2);
 Clear entire cache (both user and role caches).
 
 **Use Cases:**
+
 - Bulk permission changes
 - System maintenance
 - Testing/debugging
 - Admin-initiated clear via API
 
 **Example:**
+
 ```typescript
 PermissionCache.clearAll();
 logger.info('All permission caches cleared');
@@ -182,6 +204,7 @@ logger.info('All permission caches cleared');
 Get cache statistics.
 
 **Returns:**
+
 ```typescript
 {
   userCacheSize: number,      // Number of cached users
@@ -191,6 +214,7 @@ Get cache statistics.
 ```
 
 **Example:**
+
 ```typescript
 const stats = PermissionCache.getStats();
 console.log(`Cache contains ${stats.userCacheSize} users`);
@@ -201,11 +225,13 @@ console.log(`Cache contains ${stats.userCacheSize} users`);
 Start automatic cleanup interval (called on server start).
 
 **Behavior:**
+
 - Runs cleanup every 5 minutes
 - Idempotent (won't start multiple intervals)
 - Logs startup message
 
 **Example:**
+
 ```typescript
 // In server.ts
 await PermissionCache.startCleanup();
@@ -216,11 +242,13 @@ await PermissionCache.startCleanup();
 Stop automatic cleanup interval (called on server shutdown).
 
 **Behavior:**
+
 - Clears interval if running
 - Idempotent (safe to call multiple times)
 - Logs shutdown message
 
 **Example:**
+
 ```typescript
 // In graceful shutdown
 process.on('SIGTERM', () => {
@@ -321,11 +349,12 @@ async function startServer() {
 
 ## Cache Management Endpoints
 
-### GET /_cache/permissions/stats
+### GET /\_cache/permissions/stats
 
 **Admin only** - Get cache statistics.
 
 **Response:**
+
 ```json
 {
   "userCacheSize": 42,
@@ -343,11 +372,12 @@ async function startServer() {
 }
 ```
 
-### POST /_cache/permissions/clear
+### POST /\_cache/permissions/clear
 
 **Admin only** - Clear permission cache.
 
 **Request Body:**
+
 ```json
 {
   "type": "user",
@@ -356,6 +386,7 @@ async function startServer() {
 ```
 
 **Options:**
+
 - `{ "type": "user", "id": 5 }` - Clear user 5's cache
 - `{ "type": "role", "id": 2 }` - Clear role 2's cache
 - `{ "type": "all" }` - Clear all caches
@@ -365,17 +396,20 @@ async function startServer() {
 ### Logging
 
 **Cache Hits:**
+
 ```
 [PermissionCache] Cache HIT for user 5
 ```
 
 **Cache Invalidation:**
+
 ```
 [PermissionCache] Invalidated cache for user 5
 [PermissionCache] Invalidated cache for role 2
 ```
 
 **Cleanup:**
+
 ```
 [PermissionCache] Cleanup interval started
 [PermissionCache] Cleanup removed 15 expired entries
@@ -385,12 +419,14 @@ async function startServer() {
 ### Metrics to Monitor
 
 **Cache Hit Rate:**
+
 ```typescript
 const hitRate = (cacheHits / totalRequests) * 100;
 // Target: >90%
 ```
 
 **Cache Size:**
+
 ```typescript
 const stats = PermissionCache.getStats();
 // Monitor for unbounded growth
@@ -398,6 +434,7 @@ const stats = PermissionCache.getStats();
 ```
 
 **Permission Lookup Time:**
+
 ```typescript
 // Before caching: 50-100ms
 // After caching: 1-5ms
@@ -409,12 +446,14 @@ const stats = PermissionCache.getStats();
 ### Cache Invalidation
 
 **✅ DO:**
+
 - Invalidate user cache when user role changes
 - Invalidate role cache when role permissions change
 - Clear all caches after bulk permission updates
 - Use manual invalidation for critical changes
 
 **❌ DON'T:**
+
 - Rely on cache for real-time permission revocation (up to 5-minute delay)
 - Skip invalidation after permission changes
 - Invalidate unnecessarily (wastes CPU)
@@ -422,6 +461,7 @@ const stats = PermissionCache.getStats();
 ### Performance Tuning
 
 **Adjust TTL:**
+
 ```typescript
 // Lower TTL for stricter security (more DB queries)
 private static readonly USER_PERMISSIONS_TTL = 1 * 60 * 1000; // 1 minute
@@ -431,6 +471,7 @@ private static readonly USER_PERMISSIONS_TTL = 15 * 60 * 1000; // 15 minutes
 ```
 
 **Cleanup Interval:**
+
 ```typescript
 // More frequent cleanup (lower memory, higher CPU)
 setInterval(() => this.cleanup(), 1 * 60 * 1000); // 1 minute
@@ -442,16 +483,19 @@ setInterval(() => this.cleanup(), 10 * 60 * 1000); // 10 minutes
 ### Security Considerations
 
 **Cache Timing:**
+
 - Permission changes may take up to 5 minutes to propagate
 - For immediate revocation, manually clear cache
 - Critical operations should clear cache automatically
 
 **Cache Poisoning:**
+
 - Cache only stores permission strings (low risk)
 - No user input stored in cache
 - Cache automatically expires
 
 **Memory Limits:**
+
 - In-memory cache grows with user count
 - Automatic cleanup prevents unbounded growth
 - Monitor cache size in production
@@ -463,10 +507,12 @@ setInterval(() => this.cleanup(), 10 * 60 * 1000); // 10 minutes
 **Symptom:** User's permissions don't reflect recent changes
 
 **Causes:**
+
 1. Cache not invalidated after permission change
 2. TTL hasn't expired yet (up to 5 minutes)
 
 **Solutions:**
+
 ```bash
 # Manually clear user's cache
 curl -X POST http://localhost:3100/_cache/permissions/clear \
@@ -484,11 +530,13 @@ curl -X POST http://localhost:3100/_cache/permissions/clear \
 **Symptom:** Server memory usage increasing over time
 
 **Causes:**
+
 1. Cleanup interval not running
 2. Too many unique users
 3. TTL too long
 
 **Solutions:**
+
 ```typescript
 // Check cleanup is running
 PermissionCache.getStats(); // Should show reasonable size
@@ -505,11 +553,13 @@ private static readonly USER_PERMISSIONS_TTL = 2 * 60 * 1000; // 2 minutes
 **Symptom:** Low cache hit rate (<50%)
 
 **Causes:**
+
 1. TTL too short
 2. Frequent permission changes
 3. Users not making repeated requests
 
 **Solutions:**
+
 ```typescript
 // Increase TTL
 private static readonly USER_PERMISSIONS_TTL = 10 * 60 * 1000; // 10 minutes
diff --git a/docs/03-backend/services/user-database-service.md b/docs/03-backend/services/user-database-service.md
index b4c4f28..2605911 100644
--- a/docs/03-backend/services/user-database-service.md
+++ b/docs/03-backend/services/user-database-service.md
@@ -1,6 +1,8 @@
 # UserDatabaseService
 
-`UserDatabaseService` manages the connection to the user database (user.db). It provides a singleton interface for accessing user data, authentication, roles, permissions, and play tracking.
+`UserDatabaseService` manages the connection to the user database (user.db). It
+provides a singleton interface for accessing user data, authentication, roles,
+permissions, and play tracking.
 
 ## Location
 
@@ -8,7 +10,9 @@
 
 ## Overview
 
-The UserDatabaseService connects to the application-specific SQLite database for storing user accounts, sessions, and application data. Unlike DatabaseService (read-only Flashpoint data), this service has full read/write access.
+The UserDatabaseService connects to the application-specific SQLite database for
+storing user accounts, sessions, and application data. Unlike DatabaseService
+(read-only Flashpoint data), this service has full read/write access.
 
 ## Key Features
 
@@ -154,10 +158,9 @@ const db = UserDatabaseService.getDatabase();
 Execute query and return first row.
 
 ```typescript
-const user = UserDatabaseService.get(
-  'SELECT * FROM users WHERE username = ?',
-  ['admin']
-);
+const user = UserDatabaseService.get('SELECT * FROM users WHERE username = ?', [
+  'admin',
+]);
 ```
 
 **Returns**: First result row or null
@@ -199,6 +202,7 @@ const userId = result.lastInsertRowid;
 ```
 
 **Returns**: RunResult object with:
+
 - `changes`: Number of rows affected
 - `lastInsertRowid`: ID of inserted row (for INSERT)
 
@@ -293,10 +297,9 @@ const permissions = UserDatabaseService.all(
 );
 
 // Get role with permissions
-const role = UserDatabaseService.get(
-  'SELECT * FROM roles WHERE id = ?',
-  [roleId]
-);
+const role = UserDatabaseService.get('SELECT * FROM roles WHERE id = ?', [
+  roleId,
+]);
 
 const rolePermissions = UserDatabaseService.all(
   `SELECT p.* FROM permissions p
@@ -348,7 +351,15 @@ UserDatabaseService.run(
   `INSERT INTO activity_logs
    (user_id, username, action, resource, resource_id, details, ip_address)
    VALUES (?, ?, ?, ?, ?, ?, ?)`,
-  [userId, username, 'create', 'users', newUserId, JSON.stringify(details), ipAddress]
+  [
+    userId,
+    username,
+    'create',
+    'users',
+    newUserId,
+    JSON.stringify(details),
+    ipAddress,
+  ]
 );
 
 // Get recent activity
@@ -369,9 +380,11 @@ UserDatabaseService.run(
 
 ## Database Schema
 
-See [database/schema.md](../database/schema.md) for complete schema documentation.
+See [database/schema.md](../database/schema.md) for complete schema
+documentation.
 
 Main tables:
+
 - `users` - User accounts
 - `roles` - User roles (admin, user, guest)
 - `permissions` - Available permissions
@@ -415,16 +428,16 @@ const db = UserDatabaseService.getDatabase();
 
 const createUser = db.transaction((username, email, passwordHash, roleId) => {
   // Create user
-  const userResult = db.prepare(
-    'INSERT INTO users (username, email, password_hash, role_id) VALUES (?, ?, ?, ?)'
-  ).run(username, email, passwordHash, roleId);
+  const userResult = db
+    .prepare(
+      'INSERT INTO users (username, email, password_hash, role_id) VALUES (?, ?, ?, ?)'
+    )
+    .run(username, email, passwordHash, roleId);
 
   const userId = userResult.lastInsertRowid;
 
   // Initialize user stats
-  db.prepare(
-    'INSERT INTO user_stats (user_id) VALUES (?)'
-  ).run(userId);
+  db.prepare('INSERT INTO user_stats (user_id) VALUES (?)').run(userId);
 
   return userId;
 });
@@ -434,6 +447,7 @@ const userId = createUser('newuser', 'user@example.com', hash, 2);
 ```
 
 **Benefits**:
+
 - Atomic: All operations succeed or all fail
 - Consistent: Database remains in valid state
 - Fast: Single disk write for all operations
@@ -466,6 +480,7 @@ Migrations run automatically on startup.
 ### Migration File Naming
 
 Migrations are numbered sequentially:
+
 ```
 001_user-schema.sql          # Initial schema
 002_create-user-settings.sql # Add user_settings table
@@ -479,14 +494,19 @@ Migrations are numbered sequentially:
 
 ```typescript
 // Check if migration is needed
-const tables = this.db!.prepare(`
+const tables = this.db!.prepare(
+  `
   SELECT name FROM sqlite_master
   WHERE type='table' AND name='new_table'
-`).all();
+`
+).all();
 
 if (tables.length === 0) {
   logger.info('[UserDB] Running migration: 005_add-new-feature');
-  const migrationPath = path.join(__dirname, '../migrations/005_add-new-feature.sql');
+  const migrationPath = path.join(
+    __dirname,
+    '../migrations/005_add-new-feature.sql'
+  );
   const migrationSQL = fs.readFileSync(migrationPath, 'utf-8');
   this.db!.exec(migrationSQL);
   logger.info('[UserDB] Migration completed: 005_add-new-feature');
@@ -494,6 +514,7 @@ if (tables.length === 0) {
 ```
 
 3. Test on clean database:
+
 ```bash
 rm user.db
 npm run dev
@@ -513,6 +534,7 @@ npm run dev
 ### Connection Pooling
 
 Not needed - SQLite is single-threaded:
+
 - Single connection shared across requests
 - Synchronous operations are fast
 - No connection overhead
@@ -542,6 +564,7 @@ CREATE INDEX IF NOT EXISTS idx_activity_logs_user_id ON activity_logs(user_id);
 **Cause**: Another process has write lock
 
 **Solution**:
+
 - Ensure only one backend instance
 - Check for abandoned connections
 - Use shorter transactions
@@ -551,6 +574,7 @@ CREATE INDEX IF NOT EXISTS idx_activity_logs_user_id ON activity_logs(user_id);
 **Cause**: Attempting to insert/update with invalid foreign key
 
 **Solution**:
+
 - Verify referenced record exists
 - Check ON DELETE CASCADE/RESTRICT constraints
 - Ensure foreign keys are enabled
@@ -560,6 +584,7 @@ CREATE INDEX IF NOT EXISTS idx_activity_logs_user_id ON activity_logs(user_id);
 **Cause**: Migration SQL has error
 
 **Solution**:
+
 - Check migration SQL syntax
 - Test migration file in SQLite CLI
 - Review error message in logs
@@ -569,10 +594,9 @@ CREATE INDEX IF NOT EXISTS idx_activity_logs_user_id ON activity_logs(user_id);
 ### AuthService
 
 ```typescript
-const user = UserDatabaseService.get(
-  'SELECT * FROM users WHERE username = ?',
-  [username]
-);
+const user = UserDatabaseService.get('SELECT * FROM users WHERE username = ?', [
+  username,
+]);
 
 const passwordHash = await bcrypt.hash(password, config.bcryptSaltRounds);
 
diff --git a/docs/03-backend/utilities.md b/docs/03-backend/utilities.md
index 7d282f6..5216cf7 100644
--- a/docs/03-backend/utilities.md
+++ b/docs/03-backend/utilities.md
@@ -1,10 +1,12 @@
 # Backend Utilities
 
-This document describes the utility functions and middleware used throughout the backend service.
+This document describes the utility functions and middleware used throughout the
+backend service.
 
 ## Overview
 
-The backend includes several reusable utilities that eliminate code duplication and enforce consistent patterns across the application:
+The backend includes several reusable utilities that eliminate code duplication
+and enforce consistent patterns across the application:
 
 ```
 backend/src/
@@ -23,6 +25,7 @@ backend/src/
 **Location**: `backend/src/middleware/validation.ts`
 
 **Benefits**:
+
 - Eliminates 15+ instances of duplicate Zod error handling
 - Type-safe request validation
 - Consistent error messages
@@ -34,7 +37,7 @@ backend/src/
 function validateRequest<T extends z.ZodType>(
   schema: T,
   property: RequestProperty = 'body'
-): RequestHandler
+): RequestHandler;
 
 type RequestProperty = 'body' | 'query' | 'params';
 ```
@@ -48,11 +51,12 @@ import { z } from 'zod';
 // Define schema
 const loginSchema = z.object({
   username: z.string().min(3).max(50),
-  password: z.string().min(6)
+  password: z.string().min(6),
 });
 
 // Apply middleware
-router.post('/login',
+router.post(
+  '/login',
   validateRequest(loginSchema, 'body'),
   async (req, res) => {
     // req.body is now validated and typed
@@ -65,11 +69,13 @@ router.post('/login',
 **Error Handling**:
 
 When validation fails:
+
 - Returns 400 Bad Request status
 - Provides descriptive error message
 - Forwards to error handler middleware
 
 Example error response:
+
 ```json
 {
   "error": {
@@ -93,6 +99,7 @@ Example error response:
 **Location**: `backend/src/utils/queryParser.ts`
 
 **Benefits**:
+
 - Eliminates 15+ instances of duplicate pagination logic
 - Type-safe parsing with default values
 - Consistent limits and offset handling
@@ -102,9 +109,9 @@ Example error response:
 
 ```typescript
 interface PaginationDefaults {
-  limit?: number;      // Default: 50
-  maxLimit?: number;   // Default: 100
-  offset?: number;     // Default: 0
+  limit?: number; // Default: 50
+  maxLimit?: number; // Default: 100
+  offset?: number; // Default: 0
 }
 
 interface PaginationResult {
@@ -115,7 +122,7 @@ interface PaginationResult {
 function parsePaginationQuery(
   query: any,
   defaults?: PaginationDefaults
-): PaginationResult
+): PaginationResult;
 ```
 
 **Usage**:
@@ -132,14 +139,14 @@ router.get('/games', async (req, res) => {
   const { limit, offset } = parsePaginationQuery(req.query, {
     limit: 20,
     maxLimit: 50,
-    offset: 0
+    offset: 0,
   });
 
   // Query database
-  const games = DatabaseService.all(
-    'SELECT * FROM game LIMIT ? OFFSET ?',
-    [limit, offset]
-  );
+  const games = DatabaseService.all('SELECT * FROM game LIMIT ? OFFSET ?', [
+    limit,
+    offset,
+  ]);
 
   res.json({ games, limit, offset });
 });
@@ -147,13 +154,13 @@ router.get('/games', async (req, res) => {
 
 **Behavior**:
 
-| Input | Output | Notes |
-|-------|--------|-------|
-| `?limit=10` | `{ limit: 10, offset: 0 }` | Valid limit |
-| `?limit=200` | `{ limit: 100, offset: 0 }` | Clamped to maxLimit |
-| `?offset=20` | `{ limit: 50, offset: 20 }` | Custom offset |
-| `?limit=abc` | `{ limit: 50, offset: 0 }` | Invalid, uses default |
-| `?offset=-5` | `{ limit: 50, offset: 0 }` | Negative prevented |
+| Input        | Output                      | Notes                 |
+| ------------ | --------------------------- | --------------------- |
+| `?limit=10`  | `{ limit: 10, offset: 0 }`  | Valid limit           |
+| `?limit=200` | `{ limit: 100, offset: 0 }` | Clamped to maxLimit   |
+| `?offset=20` | `{ limit: 50, offset: 20 }` | Custom offset         |
+| `?limit=abc` | `{ limit: 50, offset: 0 }`  | Invalid, uses default |
+| `?offset=-5` | `{ limit: 50, offset: 0 }`  | Negative prevented    |
 
 **Type Safety**:
 
@@ -180,11 +187,17 @@ function sanitizeBody(body: any): any {
 
   const sanitized = { ...body };
   const sensitiveFields = [
-    'password', 'currentPassword', 'newPassword',
-    'token', 'refreshToken', 'secret', 'apiKey', 'accessToken'
+    'password',
+    'currentPassword',
+    'newPassword',
+    'token',
+    'refreshToken',
+    'secret',
+    'apiKey',
+    'accessToken',
   ];
 
-  sensitiveFields.forEach(field => {
+  sensitiveFields.forEach((field) => {
     if (sanitized[field]) {
       sanitized[field] = '[REDACTED]';
     }
@@ -201,16 +214,18 @@ function sanitizeBody(body: any): any {
 logger.error('[UnhandledError]', {
   message: err.message,
   stack: err.stack,
-  body: sanitizeBody(req.body)  // Passwords/tokens redacted
+  body: sanitizeBody(req.body), // Passwords/tokens redacted
 });
 ```
 
 **Protected Fields**:
+
 - `password`, `currentPassword`, `newPassword`
 - `token`, `refreshToken`, `accessToken`
 - `secret`, `apiKey`
 
 Example log output:
+
 ```json
 {
   "message": "Login failed",
@@ -228,14 +243,15 @@ Example log output:
 Use `validateRequest` for ALL endpoints that accept user input:
 
 ✅ **DO**:
+
 ```typescript
-router.post('/users',
-  validateRequest(createUserSchema),
-  async (req, res) => { /* ... */ }
-);
+router.post('/users', validateRequest(createUserSchema), async (req, res) => {
+  /* ... */
+});
 ```
 
 ❌ **DON'T**:
+
 ```typescript
 router.post('/users', async (req, res) => {
   // Manual validation (code duplication)
@@ -250,15 +266,17 @@ router.post('/users', async (req, res) => {
 Use `parsePaginationQuery` for ALL endpoints that return paginated data:
 
 ✅ **DO**:
+
 ```typescript
 const { limit, offset } = parsePaginationQuery(req.query);
-const games = DatabaseService.all(
-  'SELECT * FROM game LIMIT ? OFFSET ?',
-  [limit, offset]
-);
+const games = DatabaseService.all('SELECT * FROM game LIMIT ? OFFSET ?', [
+  limit,
+  offset,
+]);
 ```
 
 ❌ **DON'T**:
+
 ```typescript
 // Manual parsing (code duplication)
 const limit = Math.min(parseInt(req.query.limit || '50'), 100);
@@ -270,7 +288,8 @@ const offset = Math.max(parseInt(req.query.offset || '0'), 0);
 Combine utilities for robust error handling:
 
 ```typescript
-router.post('/games/:id/play',
+router.post(
+  '/games/:id/play',
   authenticate,
   validateRequest(playSessionSchema),
   async (req, res, next) => {
@@ -321,5 +340,4 @@ router.post('/games/:id/play',
 
 ---
 
-**Last Updated**: 2026-01-27
-**Review Status**: Current
+**Last Updated**: 2026-01-27 **Review Status**: Current
diff --git a/docs/04-frontend/README.md b/docs/04-frontend/README.md
index 8100087..fa4aa94 100644
--- a/docs/04-frontend/README.md
+++ b/docs/04-frontend/README.md
@@ -1,6 +1,7 @@
 # Frontend Documentation
 
-Modern React 18 single-page application (SPA) built with TypeScript, Vite, and optimized libraries.
+Modern React 18 single-page application (SPA) built with TypeScript, Vite, and
+optimized libraries.
 
 ## Tech Stack
 
@@ -21,29 +22,41 @@ Modern React 18 single-page application (SPA) built with TypeScript, Vite, and o
 ### Core Documentation
 
 - [architecture.md](./architecture.md) - Frontend architecture patterns
-- [views-routing.md](./views-routing.md) - All views, routes, and route protection
+- [views-routing.md](./views-routing.md) - All views, routes, and route
+  protection
 - [api-client.md](./api-client.md) - Axios client and API endpoints
 - [custom-hooks.md](./custom-hooks.md) - 17+ custom hooks with examples
 
 ### Components
 
-- [components/component-overview.md](./components/component-overview.md) - Component organization
-- [components/layout-components.md](./components/layout-components.md) - AppShell, Header, Sidebar
-- [components/game-components.md](./components/game-components.md) - GameCard, GameGrid, list components
-- [components/player-components.md](./components/player-components.md) - GamePlayer, RufflePlayer
-- [components/auth-components.md](./components/auth-components.md) - LoginForm, RegisterForm, ProtectedRoute
-- [components/ui-components.md](./components/ui-components.md) - Shadcn UI reference
+- [components/component-overview.md](./components/component-overview.md) -
+  Component organization
+- [components/layout-components.md](./components/layout-components.md) -
+  AppShell, Header, Sidebar
+- [components/game-components.md](./components/game-components.md) - GameCard,
+  GameGrid, list components
+- [components/player-components.md](./components/player-components.md) -
+  GamePlayer, RufflePlayer
+- [components/auth-components.md](./components/auth-components.md) - LoginForm,
+  RegisterForm, ProtectedRoute
+- [components/ui-components.md](./components/ui-components.md) - Shadcn UI
+  reference
 
 ### State Management
 
-- [state-management/zustand-stores.md](./state-management/zustand-stores.md) - useAuthStore, useThemeStore, useUIStore
-- [state-management/react-query.md](./state-management/react-query.md) - TanStack Query usage and caching
-- [state-management/url-state.md](./state-management/url-state.md) - URL-based filter state
+- [state-management/zustand-stores.md](./state-management/zustand-stores.md) -
+  useAuthStore, useThemeStore, useUIStore
+- [state-management/react-query.md](./state-management/react-query.md) -
+  TanStack Query usage and caching
+- [state-management/url-state.md](./state-management/url-state.md) - URL-based
+  filter state
 
 ### Player Implementation
 
-- [player-implementation/ruffle-player.md](./player-implementation/ruffle-player.md) - Flash game player
-- [player-implementation/html5-player.md](./player-implementation/html5-player.md) - HTML5 game iframe player
+- [player-implementation/ruffle-player.md](./player-implementation/ruffle-player.md) -
+  Flash game player
+- [player-implementation/html5-player.md](./player-implementation/html5-player.md) -
+  HTML5 game iframe player
 
 ## Quick Start
 
@@ -81,6 +94,7 @@ npm run typecheck
 ### Server State Management
 
 All server data (games, playlists, user data) managed through TanStack Query:
+
 - Automatic background refetching
 - Optimistic updates
 - Request deduplication
@@ -88,7 +102,9 @@ All server data (games, playlists, user data) managed through TanStack Query:
 
 ### UI State Management
 
-Client-side UI state (sidebar, theme, auth) uses Zustand stores with localStorage persistence:
+Client-side UI state (sidebar, theme, auth) uses Zustand stores with
+localStorage persistence:
+
 - Minimal boilerplate
 - TypeScript-first
 - DevTools support
@@ -97,6 +113,7 @@ Client-side UI state (sidebar, theme, auth) uses Zustand stores with localStorag
 ### Type Safety
 
 Fully typed with TypeScript:
+
 - Strict mode enabled
 - No implicit any
 - Comprehensive type definitions for API responses
@@ -119,9 +136,11 @@ Fully typed with TypeScript:
 
 ## Environment Variables
 
-The frontend does not require environment variables for local development. API calls are automatically proxied through Vite to the backend.
+The frontend does not require environment variables for local development. API
+calls are automatically proxied through Vite to the backend.
 
 **Optional (production builds):**
+
 ```bash
 VITE_APP_VERSION=1.0.0  # Displayed app version
 ```
@@ -152,6 +171,7 @@ frontend/
 ## Vite Configuration
 
 Dev server proxies `/api/*` to backend:
+
 ```typescript
 server: {
   proxy: {
@@ -176,7 +196,8 @@ npm run lint            # ESLint code linting
 
 ## Related Documentation
 
-- [Architecture Documentation](../02-architecture/README.md) - System architecture
+- [Architecture Documentation](../02-architecture/README.md) - System
+  architecture
 - [Backend Documentation](../03-backend/README.md) - Backend API reference
 - [API Reference](../06-api-reference/README.md) - Complete API documentation
 - [Development Workflow](../08-development/setup-guide.md) - Setup guide
diff --git a/docs/04-frontend/api-client.md b/docs/04-frontend/api-client.md
index abd5a09..a85df1f 100644
--- a/docs/04-frontend/api-client.md
+++ b/docs/04-frontend/api-client.md
@@ -1,10 +1,12 @@
 # API Client
 
-Complete documentation of the Axios-based API client and all available endpoints.
+Complete documentation of the Axios-based API client and all available
+endpoints.
 
 ## Overview
 
-The API client is a centralized Axios instance with request/response interceptors for authentication and error handling.
+The API client is a centralized Axios instance with request/response
+interceptors for authentication and error handling.
 
 **Location:** `frontend/src/lib/api.ts`
 
@@ -14,8 +16,8 @@ The API client is a centralized Axios instance with request/response interceptor
 const api = axios.create({
   baseURL: '/api',
   headers: {
-    'Content-Type': 'application/json'
-  }
+    'Content-Type': 'application/json',
+  },
 });
 ```
 
@@ -26,15 +28,13 @@ const api = axios.create({
 Automatically adds JWT token to all requests:
 
 ```typescript
-api.interceptors.request.use(
-  (config) => {
-    const token = useAuthStore.getState().accessToken;
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
+api.interceptors.request.use((config) => {
+  const token = useAuthStore.getState().accessToken;
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
   }
-);
+  return config;
+});
 ```
 
 ### Response Interceptor
diff --git a/docs/04-frontend/architecture.md b/docs/04-frontend/architecture.md
index a5ae236..60aaab3 100644
--- a/docs/04-frontend/architecture.md
+++ b/docs/04-frontend/architecture.md
@@ -1,10 +1,12 @@
 # Frontend Architecture
 
-This document describes the architectural patterns, design decisions, and technical implementation details of the Flashpoint Web frontend.
+This document describes the architectural patterns, design decisions, and
+technical implementation details of the Flashpoint Web frontend.
 
 ## Architecture Overview
 
-The frontend follows a modern React architecture with clear separation of concerns:
+The frontend follows a modern React architecture with clear separation of
+concerns:
 
 ```
 ┌─────────────────────────────────────────────────────────────┐
@@ -77,6 +79,7 @@ The application uses a **three-tier state management approach**:
 All server-side data (games, playlists, users) is managed by TanStack Query:
 
 **Benefits:**
+
 - Automatic caching with configurable stale times
 - Background refetching
 - Request deduplication
@@ -89,12 +92,12 @@ All server-side data (games, playlists, users) is managed by TanStack Query:
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 5 * 60 * 1000,  // 5 minutes
+      staleTime: 5 * 60 * 1000, // 5 minutes
       cacheTime: 10 * 60 * 1000, // 10 minutes
       refetchOnWindowFocus: false,
-      retry: 1
-    }
-  }
+      retry: 1,
+    },
+  },
 });
 ```
 
@@ -106,7 +109,7 @@ export function useGames(filters: GameFilters) {
   return useQuery({
     queryKey: ['games', filters],
     queryFn: () => gamesApi.search(filters),
-    staleTime: 5 * 60 * 1000
+    staleTime: 5 * 60 * 1000,
   });
 }
 ```
@@ -116,6 +119,7 @@ export function useGames(filters: GameFilters) {
 Client-side UI state (authentication, theme, sidebar) uses Zustand:
 
 **Benefits:**
+
 - Minimal boilerplate
 - No providers needed
 - Built-in TypeScript support
@@ -142,11 +146,15 @@ persist(
         // Guest sessions use sessionStorage
         // Authenticated sessions use localStorage
       },
-      setItem: (name, value) => { /* ... */ },
-      removeItem: (name) => { /* ... */ }
-    }))
+      setItem: (name, value) => {
+        /* ... */
+      },
+      removeItem: (name) => {
+        /* ... */
+      },
+    })),
   }
-)
+);
 ```
 
 #### Tier 3: URL State (React Router)
@@ -154,6 +162,7 @@ persist(
 Filter state and pagination are stored in URL search params:
 
 **Benefits:**
+
 - Shareable URLs
 - Browser back/forward support
 - No client-side state management needed
@@ -221,9 +230,9 @@ Routes are defined in `App.tsx` with nested routing structure:
 ```typescript
 interface ProtectedRouteProps {
   children: React.ReactNode;
-  requireAuth?: boolean;            // Default: true
-  requirePermission?: string;       // Optional permission check
-  requireAnyPermission?: string[];  // Any of these permissions
+  requireAuth?: boolean; // Default: true
+  requirePermission?: string; // Optional permission check
+  requireAnyPermission?: string[]; // Any of these permissions
   requireAllPermissions?: string[]; // All of these permissions
 }
 ```
@@ -244,8 +253,8 @@ Centralized API client in `lib/api.ts`:
 const api = axios.create({
   baseURL: '/api',
   headers: {
-    'Content-Type': 'application/json'
-  }
+    'Content-Type': 'application/json',
+  },
 });
 ```
 
@@ -254,15 +263,13 @@ const api = axios.create({
 Automatically adds JWT token to all requests:
 
 ```typescript
-api.interceptors.request.use(
-  (config) => {
-    const token = useAuthStore.getState().accessToken;
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
+api.interceptors.request.use((config) => {
+  const token = useAuthStore.getState().accessToken;
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
   }
-);
+  return config;
+});
 ```
 
 #### Response Interceptor
@@ -331,7 +338,8 @@ All types are defined in `src/types/`:
 
 #### Code Splitting
 
-**Route-level lazy loading** - All views use React.lazy for optimal bundle splitting:
+**Route-level lazy loading** - All views use React.lazy for optimal bundle
+splitting:
 
 ```typescript
 // App.tsx - Lazy load all views
@@ -377,25 +385,31 @@ export const GameCard = memo(GameCardComponent, (prevProps, nextProps) => {
   if (prevProps.game.id !== nextProps.game.id) return false;
 
   // Or if favorite status changed
-  const prevIsFavorited = prevProps.favoriteGameIds?.has(prevProps.game.id) ?? false;
-  const nextIsFavorited = nextProps.favoriteGameIds?.has(nextProps.game.id) ?? false;
+  const prevIsFavorited =
+    prevProps.favoriteGameIds?.has(prevProps.game.id) ?? false;
+  const nextIsFavorited =
+    nextProps.favoriteGameIds?.has(nextProps.game.id) ?? false;
   if (prevIsFavorited !== nextIsFavorited) return false;
 
   // Or if button visibility changed
-  if (prevProps.showFavoriteButton !== nextProps.showFavoriteButton ||
-      prevProps.showRemoveButton !== nextProps.showRemoveButton) return false;
+  if (
+    prevProps.showFavoriteButton !== nextProps.showFavoriteButton ||
+    prevProps.showRemoveButton !== nextProps.showRemoveButton
+  )
+    return false;
 
   return true; // Don't re-render
 });
 ```
 
-**Impact**: In a 50-card grid, only 1 card re-renders when favoriting instead of all 50 (49 prevented renders = 98% reduction)
+**Impact**: In a 50-card grid, only 1 card re-renders when favoriting instead of
+all 50 (49 prevented renders = 98% reduction)
 
 **useMemo()** for computed values:
 
 ```typescript
 const filteredGames = useMemo(
-  () => games.filter(game => game.platform === selectedPlatform),
+  () => games.filter((game) => game.platform === selectedPlatform),
   [games, selectedPlatform]
 );
 ```
@@ -403,9 +417,12 @@ const filteredGames = useMemo(
 **useCallback()** for event handlers:
 
 ```typescript
-const handleFavorite = useCallback((gameId: string) => {
-  favoriteMutation.mutate(gameId);
-}, [favoriteMutation]);
+const handleFavorite = useCallback(
+  (gameId: string) => {
+    favoriteMutation.mutate(gameId);
+  },
+  [favoriteMutation]
+);
 ```
 
 #### Image Optimization
@@ -445,6 +462,7 @@ try {
 ```
 
 **Benefits**:
+
 - Type-safe error handling
 - Consistent error message extraction
 - Handles Axios errors, Error objects, and unknown types
@@ -492,7 +510,7 @@ All API calls are wrapped in custom hooks:
 export function useGames(filters: GameFilters) {
   return useQuery({
     queryKey: ['games', filters],
-    queryFn: () => gamesApi.search(filters)
+    queryFn: () => gamesApi.search(filters),
   });
 }
 
@@ -539,8 +557,8 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': 'http://localhost:3100',
-      '/proxy': 'http://localhost:3100'
-    }
+      '/proxy': 'http://localhost:3100',
+    },
   },
   build: {
     outDir: 'dist',
@@ -548,12 +566,12 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
-          'vendor': ['react', 'react-dom', 'react-router-dom'],
-          'ui': ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu']
-        }
-      }
-    }
-  }
+          vendor: ['react', 'react-dom', 'react-router-dom'],
+          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
+        },
+      },
+    },
+  },
 });
 ```
 
@@ -564,6 +582,7 @@ npm run build
 ```
 
 Outputs:
+
 - Minified JavaScript bundles
 - Code-split chunks
 - Optimized CSS
diff --git a/docs/04-frontend/components/auth-components.md b/docs/04-frontend/components/auth-components.md
index 659f1d3..38b1728 100644
--- a/docs/04-frontend/components/auth-components.md
+++ b/docs/04-frontend/components/auth-components.md
@@ -13,10 +13,10 @@ Route wrapper component that handles authorization and route protection.
 ```typescript
 interface ProtectedRouteProps {
   children: React.ReactNode;
-  requireAuth?: boolean;               // Default: true
-  requirePermission?: string;          // Single permission
-  requireAnyPermission?: string[];     // Any of these permissions
-  requireAllPermissions?: string[];    // All of these permissions
+  requireAuth?: boolean; // Default: true
+  requirePermission?: string; // Single permission
+  requireAnyPermission?: string[]; // Any of these permissions
+  requireAllPermissions?: string[]; // All of these permissions
 }
 ```
 
@@ -118,9 +118,9 @@ Component wrapper that conditionally renders based on permissions.
 ```typescript
 interface RoleGuardProps {
   children: React.ReactNode;
-  permission?: string;          // Single permission
-  permissions?: string[];       // Any of these
-  requireAll?: boolean;         // Require all permissions
+  permission?: string; // Single permission
+  permissions?: string[]; // Any of these
+  requireAll?: boolean; // Require all permissions
 }
 ```
 
diff --git a/docs/04-frontend/components/component-overview.md b/docs/04-frontend/components/component-overview.md
index da66450..a7dbf33 100644
--- a/docs/04-frontend/components/component-overview.md
+++ b/docs/04-frontend/components/component-overview.md
@@ -1,6 +1,7 @@
 # Component Overview
 
-This document provides an overview of the component architecture and organization in the Flashpoint Web frontend.
+This document provides an overview of the component architecture and
+organization in the Flashpoint Web frontend.
 
 ## Component Organization
 
@@ -41,7 +42,8 @@ Located in `components/auth/`
 
 Located in `components/common/`
 
-- **FormattedDate** - Reusable date/time formatting component with user preferences
+- **FormattedDate** - Reusable date/time formatting component with user
+  preferences
 - **CardSizeControl** - Control for adjusting card size in grid views
 - **ConfirmDialog** - Generic confirmation dialog for destructive actions
 - **ErrorBoundary** - Error boundary wrapper for graceful error handling
@@ -57,14 +59,20 @@ Located in `components/common/`
 
 Located in `components/playlist/`
 
-- **SharePlaylistDialog** - Dialog for sharing playlists via URL. Admin users see a domain selector dropdown to choose which domain to use for the share link. Non-admin users use the default domain from public settings. Share URLs are constructed client-side via the `buildShareUrl()` utility.
+- **SharePlaylistDialog** - Dialog for sharing playlists via URL. Admin users
+  see a domain selector dropdown to choose which domain to use for the share
+  link. Non-admin users use the default domain from public settings. Share URLs
+  are constructed client-side via the `buildShareUrl()` utility.
 - Other playlist management components...
 
 ### Settings Components
 
 Located in `components/settings/`
 
-- **AppSettingsTab** - Application settings including Site Name, Maintenance Mode, Theme, and **Domain Settings**. The Domain Settings card allows admins to add/delete domains and set a default via radio buttons, with hostname validation.
+- **AppSettingsTab** - Application settings including Site Name, Maintenance
+  Mode, Theme, and **Domain Settings**. The Domain Settings card allows admins
+  to add/delete domains and set a default via radio buttons, with hostname
+  validation.
 - Other settings tabs...
 
 ### Layout Components
@@ -97,9 +105,12 @@ Located in `components/player/`
 
 Located in `components/ui/`
 
-The application uses [Shadcn UI](https://ui.shadcn.com/) - a collection of re-usable components built with Radix UI and Tailwind CSS. These are copied into the project and can be customized.
+The application uses [Shadcn UI](https://ui.shadcn.com/) - a collection of
+re-usable components built with Radix UI and Tailwind CSS. These are copied into
+the project and can be customized.
 
 **40+ components including:**
+
 - Button, Input, Textarea, Select, Checkbox, Switch
 - Dialog, Alert Dialog, Sheet, Popover, Dropdown Menu
 - Card, Badge, Avatar, Separator, Skeleton
@@ -195,10 +206,14 @@ export function GameCardSkeleton() {
 
 ```typescript
 // Named export (preferred for main components)
-export function GameCard({ game }: GameCardProps) { /* ... */ }
+export function GameCard({ game }: GameCardProps) {
+  /* ... */
+}
 
 // Default export (used for views/pages)
-export default function BrowseView() { /* ... */ }
+export default function BrowseView() {
+  /* ... */
+}
 ```
 
 ## Component Props Best Practices
@@ -213,9 +228,9 @@ interface GamePlayerProps {
   canPlayInBrowser: boolean;
 
   // Optional props with defaults
-  allowFullscreen?: boolean;  // Default: true
-  showControls?: boolean;     // Default: true
-  height?: string;            // Default: 'calc(100vh - 220px)'
+  allowFullscreen?: boolean; // Default: true
+  showControls?: boolean; // Default: true
+  height?: string; // Default: 'calc(100vh - 220px)'
 
   // Optional callbacks
   onFullscreenChange?: (isFullscreen: boolean) => void;
@@ -394,9 +409,14 @@ const sortedGames = useMemo(() => {
 Memoize callback functions:
 
 ```typescript
-const handleAddToPlaylist = useCallback((gameId: string) => {
-  // Add to playlist logic
-}, [/* dependencies */]);
+const handleAddToPlaylist = useCallback(
+  (gameId: string) => {
+    // Add to playlist logic
+  },
+  [
+    /* dependencies */
+  ]
+);
 ```
 
 ### Lazy Loading
diff --git a/docs/04-frontend/components/game-components.md b/docs/04-frontend/components/game-components.md
index 2471ce9..9ee9c18 100644
--- a/docs/04-frontend/components/game-components.md
+++ b/docs/04-frontend/components/game-components.md
@@ -23,7 +23,8 @@ interface GameCardProps {
 ### Features
 
 - **Image Display** - Shows game logo or screenshot with lazy loading
-- **Availability Indicator** - Green checkmark (available) or yellow download icon (needs download)
+- **Availability Indicator** - Green checkmark (available) or yellow download
+  icon (needs download)
 - **Platform Badge** - Platform logo and name
 - **Hover Actions** - Add to playlist, toggle favorite (shown on hover)
 - **Loading States** - Blur placeholder while image loads
@@ -51,7 +52,7 @@ Responsive grid layout for game cards.
 ```typescript
 interface GameGridProps {
   games: Game[];
-  cardSize?: CardSize;  // 'small' | 'medium' | 'large'
+  cardSize?: CardSize; // 'small' | 'medium' | 'large'
   onAddToPlaylist?: (gameId: string) => void;
   onToggleFavorite?: (gameId: string) => void;
   favoritedGames?: string[];
@@ -60,9 +61,12 @@ interface GameGridProps {
 
 ### Grid Breakpoints
 
-- Small cards: `grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8`
-- Medium cards: `grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6`
-- Large cards: `grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5`
+- Small cards:
+  `grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8`
+- Medium cards:
+  `grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6`
+- Large cards:
+  `grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5`
 
 ## GameList
 
diff --git a/docs/04-frontend/components/layout-components.md b/docs/04-frontend/components/layout-components.md
index 9a52328..53bb9c9 100644
--- a/docs/04-frontend/components/layout-components.md
+++ b/docs/04-frontend/components/layout-components.md
@@ -1,6 +1,7 @@
 # Layout Components
 
-This document describes the layout components that form the structure of the Flashpoint Web application.
+This document describes the layout components that form the structure of the
+Flashpoint Web application.
 
 ## Component Hierarchy
 
@@ -26,9 +27,11 @@ AppShell
 Main application layout container that wraps all pages.
 
 ### Location
+
 `D:\Repositories\Personal\flashpoint-web\frontend\src\components\layout\AppShell.tsx`
 
 ### Purpose
+
 Provides the main application structure with header and sidebar navigation.
 
 ### Props
@@ -86,6 +89,7 @@ export function AppShell({ children }: AppShellProps) {
 Top navigation bar with search, theme controls, and user menu.
 
 ### Location
+
 `D:\Repositories\Personal\flashpoint-web\frontend\src\components\layout\Header.tsx`
 
 ### Features
@@ -236,6 +240,7 @@ No props - reads state from Zustand stores.
 Collapsible navigation sidebar with route highlighting.
 
 ### Location
+
 `D:\Repositories\Personal\flashpoint-web\frontend\src\components\layout\Sidebar.tsx`
 
 ### Props
@@ -277,8 +282,16 @@ interface SidebarProps {
 
 ```typescript
 const gameNavItems: NavItem[] = [
-  { path: '/flash-games', iconImage: '/images/Flash.png', label: 'Flash Games' },
-  { path: '/html5-games', iconImage: '/images/HTML5.png', label: 'HTML5 Games' },
+  {
+    path: '/flash-games',
+    iconImage: '/images/Flash.png',
+    label: 'Flash Games',
+  },
+  {
+    path: '/html5-games',
+    iconImage: '/images/HTML5.png',
+    label: 'HTML5 Games',
+  },
   { path: '/animations', icon: Film, label: 'Animations' },
   { path: '/browse', icon: Gamepad2, label: 'Browse' },
 ];
@@ -338,7 +351,9 @@ const isNavItemActive = (item: NavItem) => {
 
   if (itemQuery) {
     // Exact match including query params
-    return location.pathname === itemPath && location.search === `?${itemQuery}`;
+    return (
+      location.pathname === itemPath && location.search === `?${itemQuery}`
+    );
   }
 
   // Special case: Home (/) should highlight Flash Games
@@ -361,7 +376,7 @@ const sidebarRef = useSwipeGesture<HTMLElement>({
       setSidebarOpen(false);
     }
   },
-  minSwipeDistance: 50
+  minSwipeDistance: 50,
 });
 ```
 
@@ -406,6 +421,7 @@ useEffect(() => {
 ### Collapsed State Behavior
 
 When `sidebarCollapsed` is true:
+
 - Width: 64px (w-16)
 - Icons only (no text)
 - Tooltips on hover (via `title` attribute)
@@ -433,15 +449,17 @@ UI state is persisted to localStorage:
 
 ```typescript
 persist(
-  (set) => ({ /* ... */ }),
+  (set) => ({
+    /* ... */
+  }),
   {
     name: 'flashpoint-ui-state',
     partialize: (state) => ({
       sidebarCollapsed: state.sidebarCollapsed,
       // sidebarOpen is intentionally not persisted (session-only)
-    })
+    }),
   }
-)
+);
 ```
 
 ## Styling and Theming
@@ -449,6 +467,7 @@ persist(
 ### Tailwind Classes
 
 Layout components use Tailwind utility classes:
+
 - `bg-card` - Card background color (theme-aware)
 - `border-border` - Border color (theme-aware)
 - `text-foreground` - Text color (theme-aware)
@@ -457,6 +476,7 @@ Layout components use Tailwind utility classes:
 ### Custom CSS Variables
 
 Applied via ThemeStore:
+
 - `--primary` - Primary theme color
 - `--background` - Background color
 - `--foreground` - Text color
diff --git a/docs/04-frontend/components/player-components.md b/docs/04-frontend/components/player-components.md
index 5d51c45..ec98096 100644
--- a/docs/04-frontend/components/player-components.md
+++ b/docs/04-frontend/components/player-components.md
@@ -1,6 +1,7 @@
 # Player Components
 
-This document describes the game player components used to render Flash and HTML5 games.
+This document describes the game player components used to render Flash and
+HTML5 games.
 
 ## Component Overview
 
@@ -14,6 +15,7 @@ The player architecture consists of two main components:
 Universal game player component that handles Flash (Ruffle) and HTML5 games.
 
 ### Location
+
 `D:\Repositories\Personal\flashpoint-web\frontend\src\components\player\GamePlayer.tsx`
 
 ### Props
@@ -257,6 +259,7 @@ allow="
 Flash emulator component using Ruffle WebAssembly.
 
 ### Location
+
 `D:\Repositories\Personal\flashpoint-web\frontend\src\components\player\RufflePlayer.tsx`
 
 ### Props
@@ -313,7 +316,7 @@ useEffect(() => {
 
     try {
       // Wait for any previous cleanup
-      await new Promise(resolve => setTimeout(resolve, 100));
+      await new Promise((resolve) => setTimeout(resolve, 100));
 
       if (!mounted) return;
 
@@ -328,12 +331,14 @@ useEffect(() => {
           oldPlayer.remove();
         }
 
-        await new Promise(resolve => setTimeout(resolve, 200));
+        await new Promise((resolve) => setTimeout(resolve, 200));
       }
 
       // Load Ruffle script if not already loaded
       if (!(window as any).RufflePlayer) {
-        const existingScript = document.querySelector('script[src="/ruffle/ruffle.js"]');
+        const existingScript = document.querySelector(
+          'script[src="/ruffle/ruffle.js"]'
+        );
 
         if (!existingScript) {
           const script = document.createElement('script');
@@ -341,14 +346,15 @@ useEffect(() => {
 
           await new Promise<void>((resolve, reject) => {
             script.onload = () => resolve();
-            script.onerror = () => reject(new Error('Failed to load Ruffle script'));
+            script.onerror = () =>
+              reject(new Error('Failed to load Ruffle script'));
             document.head.appendChild(script);
           });
         }
       }
 
       // Wait for Ruffle to initialize
-      await new Promise(resolve => setTimeout(resolve, 200));
+      await new Promise((resolve) => setTimeout(resolve, 200));
 
       // Create player
       const RufflePlayer = (window as any).RufflePlayer;
@@ -427,22 +433,22 @@ useEffect(() => {
 
 ```typescript
 player.config = {
-  autoplay: 'auto',              // Auto-start playback
-  backgroundColor: '#000000',     // Black background
-  letterbox: 'on',               // Letterbox for aspect ratio
-  unmuteOverlay: 'visible',      // Show unmute button if needed
-  contextMenu: true,             // Enable right-click menu
-  showSwfDownload: false,        // Hide download option
+  autoplay: 'auto', // Auto-start playback
+  backgroundColor: '#000000', // Black background
+  letterbox: 'on', // Letterbox for aspect ratio
+  unmuteOverlay: 'visible', // Show unmute button if needed
+  contextMenu: true, // Enable right-click menu
+  showSwfDownload: false, // Hide download option
   upgradeToHttps: window.location.protocol === 'https:',
   warnOnUnsupportedContent: true,
-  logLevel: 'error',             // Only log errors
-  publicPath: '/ruffle/',        // Path to Ruffle files
-  scale: 'showAll',              // Show all content, maintain aspect
-  forceScale: true,              // Prevent runtime scale changes
-  quality: 'high',               // High quality rendering
+  logLevel: 'error', // Only log errors
+  publicPath: '/ruffle/', // Path to Ruffle files
+  scale: 'showAll', // Show all content, maintain aspect
+  forceScale: true, // Prevent runtime scale changes
+  quality: 'high', // High quality rendering
   allowScriptAccess: 'sameDomain',
-  salign: '',                    // Center alignment
-  wmode: 'opaque',               // Opaque mode
+  salign: '', // Center alignment
+  wmode: 'opaque', // Opaque mode
 };
 ```
 
@@ -450,14 +456,16 @@ player.config = {
 
 Ruffle supports multiple scale modes (configured via `scale` option):
 
-- **showAll** (Default) - Show entire content, maintain aspect ratio, add letterboxing if needed
+- **showAll** (Default) - Show entire content, maintain aspect ratio, add
+  letterboxing if needed
 - **noscale** - No scaling, 1:1 pixel mapping
 - **exactfit** - Scale to fill container, ignore aspect ratio
 - **noborder** - Scale to fill, maintain aspect, crop if needed
 
 ### Cleanup Strategy
 
-The component implements a robust cleanup strategy to prevent memory leaks and stale instances:
+The component implements a robust cleanup strategy to prevent memory leaks and
+stale instances:
 
 1. **Mount Flag** - Track if component is mounted
 2. **Initialization Lock** - Prevent multiple simultaneous initializations
diff --git a/docs/04-frontend/components/ui-components.md b/docs/04-frontend/components/ui-components.md
index c0c13b7..04ce7de 100644
--- a/docs/04-frontend/components/ui-components.md
+++ b/docs/04-frontend/components/ui-components.md
@@ -4,13 +4,15 @@ Documentation for Shadcn UI components used in the application.
 
 ## Overview
 
-The application uses [Shadcn UI](https://ui.shadcn.com/) - a collection of beautifully designed, accessible, and customizable components built with:
+The application uses [Shadcn UI](https://ui.shadcn.com/) - a collection of
+beautifully designed, accessible, and customizable components built with:
 
 - **Radix UI** - Unstyled, accessible component primitives
 - **Tailwind CSS** - Utility-first styling
 - **CVA** (Class Variance Authority) - Component variants
 
-All components are located in `frontend/src/components/ui/` and can be customized directly.
+All components are located in `frontend/src/components/ui/` and can be
+customized directly.
 
 ## Core Components
 
@@ -32,6 +34,7 @@ import { Button } from '@/components/ui/button';
 ```
 
 **Variants:**
+
 - `default` - Primary action button
 - `destructive` - Dangerous actions (delete, remove)
 - `outline` - Secondary actions
@@ -168,7 +171,7 @@ toast.warning('Warning message');
 toast.promise(asyncFunction, {
   loading: 'Loading...',
   success: 'Success!',
-  error: 'Failed'
+  error: 'Failed',
 });
 ```
 
@@ -291,7 +294,9 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 ## Customization
 
-All components can be customized by editing files in `frontend/src/components/ui/`. They use Tailwind CSS classes and CSS variables for theming.
+All components can be customized by editing files in
+`frontend/src/components/ui/`. They use Tailwind CSS classes and CSS variables
+for theming.
 
 ### Theme Variables
 
diff --git a/docs/04-frontend/custom-hooks.md b/docs/04-frontend/custom-hooks.md
index 6582ff4..c207c79 100644
--- a/docs/04-frontend/custom-hooks.md
+++ b/docs/04-frontend/custom-hooks.md
@@ -1,6 +1,7 @@
 # Custom Hooks
 
-Comprehensive documentation of all custom React hooks in the Flashpoint Web frontend.
+Comprehensive documentation of all custom React hooks in the Flashpoint Web
+frontend.
 
 ## Overview
 
@@ -8,8 +9,10 @@ The application uses 18+ custom hooks organized by functionality:
 
 - **Data Fetching** - useGames, usePlaylists, useUsers, useRoles, useActivities
 - **Authentication** - useAuth
-- **UI** - useDebounce, useSwipeGesture, useMountEffect, useToast, useDateTimeFormat
-- **Game Data** - useFilterOptions, useTags, usePlatforms, useStatistics, useDownload
+- **UI** - useDebounce, useSwipeGesture, useMountEffect, useToast,
+  useDateTimeFormat
+- **Game Data** - useFilterOptions, useTags, usePlatforms, useStatistics,
+  useDownload
 - **Play Tracking** - usePlayTracking
 - **Community** - useCommunityPlaylists
 
@@ -39,6 +42,7 @@ const { data: launchData } = useGameLaunchData(id: string);
 ```
 
 **Example:**
+
 ```typescript
 function BrowseView() {
   const [filters, setFilters] = useState<GameFilters>({
@@ -95,7 +99,8 @@ const fallback = buildShareUrl(null, shareToken);
 // => "{window.location.origin}/playlists/shared/{token}"
 ```
 
-All mutations automatically invalidate the `['system-settings', 'public']` cache so the default domain updates across the app.
+All mutations automatically invalidate the `['system-settings', 'public']` cache
+so the default domain updates across the app.
 
 ## Authentication Hook
 
@@ -112,7 +117,11 @@ const { login, logout, register } = useAuth();
 await login({ username: 'user', password: 'pass' });
 
 // Register
-await register({ username: 'newuser', email: 'email@example.com', password: 'pass' });
+await register({
+  username: 'newuser',
+  email: 'email@example.com',
+  password: 'pass',
+});
 
 // Logout
 await logout();
@@ -165,19 +174,21 @@ Date and time formatting hook with user-configurable formats.
 
 **Location:** `frontend/src/hooks/useDateTimeFormat.ts`
 
-**Purpose:** Provides consistent date/time formatting across the application using user-selected format preferences from system settings.
+**Purpose:** Provides consistent date/time formatting across the application
+using user-selected format preferences from system settings.
 
 ```typescript
 const {
-  dateFormat,      // Current date format string (e.g., 'MM/dd/yyyy')
-  timeFormat,      // Current time format string (e.g., 'hh:mm a')
-  formatDate,      // Function to format dates
-  formatTime,      // Function to format times
-  formatDateTime   // Function to format date + time
+  dateFormat, // Current date format string (e.g., 'MM/dd/yyyy')
+  timeFormat, // Current time format string (e.g., 'hh:mm a')
+  formatDate, // Function to format dates
+  formatTime, // Function to format times
+  formatDateTime, // Function to format date + time
 } = useDateTimeFormat();
 ```
 
 **Available Date Formats:**
+
 - `MM/dd/yyyy` - US format (01/24/2026)
 - `dd/MM/yyyy` - European format (24/01/2026)
 - `yyyy-MM-dd` - ISO 8601 format (2026-01-24)
@@ -187,6 +198,7 @@ const {
 - `dd MMMM yyyy` - Day-first full month (24 January 2026)
 
 **Available Time Formats:**
+
 - `hh:mm a` - 12-hour with AM/PM (02:30 PM)
 - `HH:mm` - 24-hour (14:30)
 - `hh:mm:ss a` - 12-hour with seconds (02:30:45 PM)
@@ -226,13 +238,15 @@ function GameStats() {
 ```
 
 **Features:**
+
 - Automatically fetches user's format preferences from system settings
 - Caches settings with 5-minute staleTime
 - Handles Date objects, ISO strings, and timestamps
 - Falls back to defaults if settings not loaded
 - Uses date-fns for reliable formatting
 
-**See Also:** [Date & Time Formatting Feature](../../10-features/10-date-time-formatting.md)
+**See Also:**
+[Date & Time Formatting Feature](../../10-features/10-date-time-formatting.md)
 
 ### useFilterOptions
 
@@ -268,12 +282,12 @@ All hooks use TanStack Query with these defaults:
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 5 * 60 * 1000,      // 5 minutes
-      cacheTime: 10 * 60 * 1000,     // 10 minutes
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      cacheTime: 10 * 60 * 1000, // 10 minutes
       refetchOnWindowFocus: false,
-      retry: 1
-    }
-  }
+      retry: 1,
+    },
+  },
 });
 ```
 
diff --git a/docs/04-frontend/player-implementation/html5-player.md b/docs/04-frontend/player-implementation/html5-player.md
index 89d950a..505c92b 100644
--- a/docs/04-frontend/player-implementation/html5-player.md
+++ b/docs/04-frontend/player-implementation/html5-player.md
@@ -4,7 +4,9 @@ Documentation for HTML5 game iframe player.
 
 ## Overview
 
-HTML5 games are rendered using a sandboxed iframe for security and isolation. Unlike Flash games that require emulation, HTML5 games run natively in the browser.
+HTML5 games are rendered using a sandboxed iframe for security and isolation.
+Unlike Flash games that require emulation, HTML5 games run natively in the
+browser.
 
 **Location:** `frontend/src/components/player/GamePlayer.tsx` (HTML5 branch)
 
@@ -66,6 +68,7 @@ allow="
 ### What's Blocked
 
 Without explicit permission, the iframe CANNOT:
+
 - Access parent window (except via postMessage)
 - Navigate top window
 - Access local storage (unless same-origin)
@@ -76,6 +79,7 @@ Without explicit permission, the iframe CANNOT:
 ### What's Allowed
 
 With current sandbox settings:
+
 - Run JavaScript
 - Make network requests (same-origin)
 - Use Canvas and WebGL
@@ -93,11 +97,13 @@ http://localhost:22500/[relativePath]
 ```
 
 Example:
+
 ```
 http://localhost:22500/Games/HTML5/example-game/index.html
 ```
 
 The game-service handles:
+
 - Serving index.html
 - Serving game assets (JS, CSS, images)
 - CORS headers
@@ -143,16 +149,19 @@ const [iframeError, setIframeError] = useState<string | null>(null);
 ### Common Issues
 
 **Issue: Game doesn't load**
+
 - Check browser console for CORS errors
 - Verify content URL is correct
 - Ensure game-service is running
 
 **Issue: Game loads but doesn't work**
+
 - Check if game requires additional permissions
 - Verify sandbox attributes allow required features
 - Check browser console for JavaScript errors
 
 **Issue: Game can't access resources**
+
 - CORS may be blocking cross-origin requests
 - Game may need same-origin access
 - Check game-service proxy configuration
@@ -160,6 +169,7 @@ const [iframeError, setIframeError] = useState<string | null>(null);
 ## Performance
 
 HTML5 games generally perform better than Flash:
+
 - No emulation overhead
 - Native browser rendering
 - Direct access to WebGL
@@ -190,10 +200,13 @@ Games can communicate with the parent window using postMessage:
 
 ```javascript
 // Inside game iframe
-window.parent.postMessage({
-  type: 'GAME_LOADED',
-  data: { gameId: '123' }
-}, '*');
+window.parent.postMessage(
+  {
+    type: 'GAME_LOADED',
+    data: { gameId: '123' },
+  },
+  '*'
+);
 
 // In parent window
 window.addEventListener('message', (event) => {
@@ -206,6 +219,7 @@ window.addEventListener('message', (event) => {
 ## Browser Compatibility
 
 HTML5 games work in all modern browsers:
+
 - Chrome/Edge (Chromium) - Best performance
 - Firefox - Good performance
 - Safari - Good performance (some WebGL limitations)
diff --git a/docs/04-frontend/player-implementation/ruffle-player.md b/docs/04-frontend/player-implementation/ruffle-player.md
index 04e3693..d4c467e 100644
--- a/docs/04-frontend/player-implementation/ruffle-player.md
+++ b/docs/04-frontend/player-implementation/ruffle-player.md
@@ -4,7 +4,8 @@ Comprehensive documentation for the Ruffle Flash emulator component.
 
 ## Overview
 
-Ruffle is a Flash Player emulator written in Rust and compiled to WebAssembly. It allows Flash (.swf) content to run in modern browsers without plugins.
+Ruffle is a Flash Player emulator written in Rust and compiled to WebAssembly.
+It allows Flash (.swf) content to run in modern browsers without plugins.
 
 **Location:** `frontend/src/components/player/RufflePlayer.tsx`
 
@@ -51,12 +52,12 @@ console.log('✅ Ruffle files copied to public/ruffle/');
 
 ```typescript
 export interface RufflePlayerProps {
-  swfUrl: string;                    // URL to .swf file
-  width?: string | number;           // Player width (default: '100%')
-  height?: string | number;          // Player height (default: '100%')
-  className?: string;                // Additional CSS classes
-  onLoadError?: (error: Error) => void;    // Error callback
-  onLoadSuccess?: () => void;        // Success callback
+  swfUrl: string; // URL to .swf file
+  width?: string | number; // Player width (default: '100%')
+  height?: string | number; // Player height (default: '100%')
+  className?: string; // Additional CSS classes
+  onLoadError?: (error: Error) => void; // Error callback
+  onLoadSuccess?: () => void; // Success callback
 }
 ```
 
@@ -64,22 +65,22 @@ export interface RufflePlayerProps {
 
 ```typescript
 player.config = {
-  autoplay: 'auto',              // Auto-start playback
-  backgroundColor: '#000000',     // Black background
-  letterbox: 'on',               // Add letterboxing for aspect ratio
-  unmuteOverlay: 'visible',      // Show unmute button if needed
-  contextMenu: true,             // Enable right-click menu
-  showSwfDownload: false,        // Hide download option
+  autoplay: 'auto', // Auto-start playback
+  backgroundColor: '#000000', // Black background
+  letterbox: 'on', // Add letterboxing for aspect ratio
+  unmuteOverlay: 'visible', // Show unmute button if needed
+  contextMenu: true, // Enable right-click menu
+  showSwfDownload: false, // Hide download option
   upgradeToHttps: window.location.protocol === 'https:',
   warnOnUnsupportedContent: true,
-  logLevel: 'error',             // Only log errors
-  publicPath: '/ruffle/',        // Path to Ruffle files
-  scale: 'showAll',              // Show all content, maintain aspect
-  forceScale: true,              // Prevent runtime scale changes
-  quality: 'high',               // High quality rendering
+  logLevel: 'error', // Only log errors
+  publicPath: '/ruffle/', // Path to Ruffle files
+  scale: 'showAll', // Show all content, maintain aspect
+  forceScale: true, // Prevent runtime scale changes
+  quality: 'high', // High quality rendering
   allowScriptAccess: 'sameDomain',
-  salign: '',                    // Center alignment
-  wmode: 'opaque',               // Opaque mode
+  salign: '', // Center alignment
+  wmode: 'opaque', // Opaque mode
 };
 ```
 
@@ -88,22 +89,26 @@ player.config = {
 Ruffle supports multiple scale modes:
 
 ### showAll (Default)
+
 - Shows entire content
 - Maintains aspect ratio
 - Adds letterboxing if needed
 - **Best for most games**
 
 ### noscale
+
 - No scaling
 - 1:1 pixel mapping
 - May cut off content
 
 ### exactfit
+
 - Scales to fill container
 - Ignores aspect ratio
 - May distort content
 
 ### noborder
+
 - Scales to fill container
 - Maintains aspect ratio
 - Crops content if needed
@@ -113,6 +118,7 @@ Ruffle supports multiple scale modes:
 The component implements a robust cleanup strategy to prevent memory leaks:
 
 ### 1. Mount Flag
+
 ```typescript
 let mounted = true;
 
@@ -127,6 +133,7 @@ useEffect(() => {
 ```
 
 ### 2. Initialization Lock
+
 ```typescript
 const isInitializingRef = useRef(false);
 
@@ -139,14 +146,16 @@ isInitializingRef.current = true;
 ```
 
 ### 3. Delay Before Initialization
+
 ```typescript
 // Wait for any previous cleanup to complete
-await new Promise(resolve => setTimeout(resolve, 100));
+await new Promise((resolve) => setTimeout(resolve, 100));
 
 if (!mounted) return;
 ```
 
 ### 4. Cleanup Existing Player
+
 ```typescript
 if (rufflePlayerRef.current) {
   const oldPlayer = rufflePlayerRef.current;
@@ -159,11 +168,12 @@ if (rufflePlayerRef.current) {
   }
 
   // Wait for Ruffle's internal cleanup
-  await new Promise(resolve => setTimeout(resolve, 200));
+  await new Promise((resolve) => setTimeout(resolve, 200));
 }
 ```
 
 ### 5. Unmount Cleanup
+
 ```typescript
 return () => {
   mounted = false;
@@ -191,6 +201,7 @@ return () => {
 ## Loading States
 
 ### Loading UI
+
 ```typescript
 {isLoading && (
   <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-10">
@@ -204,6 +215,7 @@ return () => {
 ```
 
 ### Error UI
+
 ```typescript
 {error && (
   <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 z-10">
@@ -249,15 +261,19 @@ function FlashGame() {
 ## Common Issues
 
 ### Issue: Game doesn't scale properly
+
 **Solution:** Use `scale: 'showAll'` and `forceScale: true`
 
 ### Issue: Multiple player instances
+
 **Solution:** Component includes cleanup delays and initialization locks
 
 ### Issue: Memory leaks on navigation
+
 **Solution:** Component destroys player and clears container on unmount
 
 ### Issue: Black screen on load
+
 **Solution:** Check browser console for errors, ensure SWF URL is correct
 
 ## Browser Console Logging
@@ -284,6 +300,7 @@ The component includes extensive logging for debugging:
 ## Ruffle Limitations
 
 Not all Flash content is supported:
+
 - Some ActionScript 3 features are incomplete
 - 3D content may have issues
 - Video playback may be limited
diff --git a/docs/04-frontend/state-management/react-query.md b/docs/04-frontend/state-management/react-query.md
index 9fa3a0f..2364b4a 100644
--- a/docs/04-frontend/state-management/react-query.md
+++ b/docs/04-frontend/state-management/react-query.md
@@ -4,7 +4,8 @@ Documentation for server state management using TanStack Query v5.
 
 ## Overview
 
-TanStack Query handles all server-side data (games, playlists, users) with automatic caching, background refetching, and request deduplication.
+TanStack Query handles all server-side data (games, playlists, users) with
+automatic caching, background refetching, and request deduplication.
 
 **Version:** 5.62.7
 
@@ -44,7 +45,7 @@ export function useGames(filters: GameFilters) {
   return useQuery({
     queryKey: ['games', filters],
     queryFn: () => gamesApi.search(filters),
-    staleTime: 5 * 60 * 1000
+    staleTime: 5 * 60 * 1000,
   });
 }
 ```
@@ -55,16 +56,16 @@ Query keys determine caching and invalidation:
 
 ```typescript
 // Simple key
-queryKey: ['games']
+queryKey: ['games'];
 
 // With parameters
-queryKey: ['games', filters]
+queryKey: ['games', filters];
 
 // Nested resources
-queryKey: ['game', gameId, 'related']
+queryKey: ['game', gameId, 'related'];
 
 // Complex keys
-queryKey: ['users', { page, limit, search }]
+queryKey: ['users', { page, limit, search }];
 ```
 
 ## Mutations
@@ -86,7 +87,7 @@ export function useCreatePlaylist() {
     },
     onError: (error) => {
       toast.error('Failed to create playlist');
-    }
+    },
   });
 }
 ```
@@ -122,7 +123,7 @@ export function useToggleFavorite() {
     onSettled: () => {
       // Refetch after mutation
       queryClient.invalidateQueries({ queryKey: ['favorites'] });
-    }
+    },
   });
 }
 ```
@@ -140,14 +141,14 @@ Different data has different stale times:
 useQuery({
   queryKey: ['games', id],
   queryFn: () => gamesApi.getById(id),
-  staleTime: 5 * 60 * 1000  // 5 minutes
+  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // Short stale time for dynamic data
 useQuery({
   queryKey: ['stats'],
   queryFn: () => statsApi.get(),
-  staleTime: 30 * 1000  // 30 seconds
+  staleTime: 30 * 1000, // 30 seconds
 });
 ```
 
@@ -159,7 +160,7 @@ Conditional query execution:
 useQuery({
   queryKey: ['game', id],
   queryFn: () => gamesApi.getById(id),
-  enabled: !!id  // Only run if id exists
+  enabled: !!id, // Only run if id exists
 });
 ```
 
@@ -170,10 +171,11 @@ For pagination:
 ```typescript
 useInfiniteQuery({
   queryKey: ['games', filters],
-  queryFn: ({ pageParam = 1 }) => gamesApi.search({ ...filters, page: pageParam }),
+  queryFn: ({ pageParam = 1 }) =>
+    gamesApi.search({ ...filters, page: pageParam }),
   getNextPageParam: (lastPage) => {
     return lastPage.page < lastPage.totalPages ? lastPage.page + 1 : undefined;
-  }
+  },
 });
 ```
 
diff --git a/docs/04-frontend/state-management/url-state.md b/docs/04-frontend/state-management/url-state.md
index fe5bdac..a49acbb 100644
--- a/docs/04-frontend/state-management/url-state.md
+++ b/docs/04-frontend/state-management/url-state.md
@@ -5,11 +5,13 @@ Documentation for managing filter and pagination state in URL search params.
 ## Overview
 
 The application uses URL search parameters (query strings) to manage:
+
 - Filters (platform, tags, search, etc.)
 - Pagination (page, limit)
 - Sort options
 
 **Benefits:**
+
 - Shareable URLs
 - Browser back/forward support
 - Bookmark-able search results
@@ -64,7 +66,7 @@ Filters in URL sync with TanStack Query:
 const { data, isLoading } = useGames({
   platform: searchParams.get('platform'),
   search: searchParams.get('search'),
-  page: parseInt(searchParams.get('page') || '1')
+  page: parseInt(searchParams.get('page') || '1'),
 });
 ```
 
@@ -77,6 +79,7 @@ const { data, isLoading } = useGames({
 ```
 
 Parameters:
+
 - `platform` - Filter by platform (Flash, HTML5, etc.)
 - `search` - Search query
 - `page` - Current page number
@@ -115,7 +118,7 @@ function getFiltersFromURL(searchParams: URLSearchParams): GameFilters {
     order: searchParams.get('order') || undefined,
     tags: searchParams.get('tags')?.split(',') || undefined,
     playMode: searchParams.get('playMode') || undefined,
-    library: searchParams.get('library') || undefined
+    library: searchParams.get('library') || undefined,
   };
 }
 ```
@@ -180,6 +183,7 @@ function Pagination({ total, page, limit }: PaginationProps) {
 ### Shareable Links
 
 Users can share exact search results:
+
 ```
 https://flashpoint.app/browse?platform=Flash&search=pokemon&sort=title
 ```
@@ -187,6 +191,7 @@ https://flashpoint.app/browse?platform=Flash&search=pokemon&sort=title
 ### Browser Navigation
 
 Back/forward buttons work naturally:
+
 - Back: Previous filter state
 - Forward: Next filter state
 
@@ -199,6 +204,7 @@ Users can bookmark specific searches and return to exact state.
 ### URL Length Limits
 
 Be cautious with very long filter combinations. Consider:
+
 - Limiting number of tags
 - Using shortened parameter names
 - Storing complex filters server-side
diff --git a/docs/04-frontend/state-management/zustand-stores.md b/docs/04-frontend/state-management/zustand-stores.md
index 2f05532..0b3e027 100644
--- a/docs/04-frontend/state-management/zustand-stores.md
+++ b/docs/04-frontend/state-management/zustand-stores.md
@@ -1,22 +1,26 @@
 # Zustand Stores
 
-This document describes the Zustand stores used for client-side state management in the Flashpoint Web frontend.
+This document describes the Zustand stores used for client-side state management
+in the Flashpoint Web frontend.
 
 ## Overview
 
-The application uses three main Zustand stores for different aspects of UI state:
+The application uses three main Zustand stores for different aspects of UI
+state:
 
 1. **useAuthStore** - Authentication state, JWT tokens, user permissions
 2. **useThemeStore** - Theme mode (light/dark/system), primary color
 3. **useUIStore** - Sidebar visibility, view modes, card sizes
 
-All stores use the `persist` middleware to save state to localStorage (or sessionStorage for guest mode).
+All stores use the `persist` middleware to save state to localStorage (or
+sessionStorage for guest mode).
 
 ## useAuthStore
 
 Manages authentication state, user information, and JWT tokens.
 
 ### Location
+
 `D:\Repositories\Personal\flashpoint-web\frontend\src\store\auth.ts`
 
 ### State
@@ -77,7 +81,7 @@ const handleLogin = async (credentials) => {
   const response = await authApi.login(credentials);
   setAuth(response.user, {
     accessToken: response.accessToken,
-    refreshToken: response.refreshToken
+    refreshToken: response.refreshToken,
   });
 };
 ```
@@ -169,7 +173,8 @@ if (hasAllPermissions(['users.read', 'users.write', 'users.delete'])) {
 
 ### Persistence Strategy
 
-The auth store uses a custom storage strategy that separates guest and authenticated sessions:
+The auth store uses a custom storage strategy that separates guest and
+authenticated sessions:
 
 ```typescript
 storage: createJSONStorage(() => ({
@@ -199,18 +204,20 @@ storage: createJSONStorage(() => ({
   removeItem: (name) => {
     localStorage.removeItem(name);
     sessionStorage.removeItem(name);
-  }
-}))
+  },
+}));
 ```
 
 **Benefits:**
+
 - Guest sessions cleared on browser close (sessionStorage)
 - Authenticated sessions persist across browser restarts (localStorage)
 - Prevents guest data from polluting localStorage
 
 ### Theme Loading on Login
 
-After successful login, the auth store automatically loads theme settings from the server:
+After successful login, the auth store automatically loads theme settings from
+the server:
 
 ```typescript
 setAuth: (user: User, tokens: AuthTokens) => {
@@ -219,7 +226,7 @@ setAuth: (user: User, tokens: AuthTokens) => {
     accessToken: tokens.accessToken,
     refreshToken: tokens.refreshToken,
     isAuthenticated: true,
-    isGuest: false
+    isGuest: false,
   });
 
   // Load theme settings from server
@@ -227,7 +234,7 @@ setAuth: (user: User, tokens: AuthTokens) => {
   themeStore.loadThemeFromServer().catch((error) => {
     console.debug('Failed to load theme settings after login:', error);
   });
-}
+};
 ```
 
 ## useThemeStore
@@ -235,14 +242,15 @@ setAuth: (user: User, tokens: AuthTokens) => {
 Manages theme mode (light/dark/system) and primary color selection.
 
 ### Location
+
 `D:\Repositories\Personal\flashpoint-web\frontend\src\store\theme.ts`
 
 ### State
 
 ```typescript
 interface ThemeState {
-  mode: ThemeMode;  // 'light' | 'dark' | 'system'
-  primaryColor: PrimaryColor;  // 21 color options
+  mode: ThemeMode; // 'light' | 'dark' | 'system'
+  primaryColor: PrimaryColor; // 21 color options
   isLoading: boolean;
 
   setMode: (mode: ThemeMode) => void;
@@ -258,19 +266,42 @@ interface ThemeState {
 
 ```typescript
 export type PrimaryColor =
-  | 'blue'      // Default
-  | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
-  | 'red' | 'orange' | 'amber' | 'yellow'
-  | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan'
-  | 'sky' | 'indigo' | 'violet' | 'purple'
-  | 'fuchsia' | 'pink' | 'rose';
+  | 'blue' // Default
+  | 'slate'
+  | 'gray'
+  | 'zinc'
+  | 'neutral'
+  | 'stone'
+  | 'red'
+  | 'orange'
+  | 'amber'
+  | 'yellow'
+  | 'lime'
+  | 'green'
+  | 'emerald'
+  | 'teal'
+  | 'cyan'
+  | 'sky'
+  | 'indigo'
+  | 'violet'
+  | 'purple'
+  | 'fuchsia'
+  | 'pink'
+  | 'rose';
 ```
 
 Each color has light and dark mode variants stored as HSL values:
 
 ```typescript
-export const colorPalette: Record<PrimaryColor, { light: string; dark: string; label: string }> = {
-  blue: { light: '221.2 83.2% 53.3%', dark: '217.2 91.2% 59.8%', label: 'Blue' },
+export const colorPalette: Record<
+  PrimaryColor,
+  { light: string; dark: string; label: string }
+> = {
+  blue: {
+    light: '221.2 83.2% 53.3%',
+    dark: '217.2 91.2% 59.8%',
+    label: 'Blue',
+  },
   red: { light: '0 72.2% 50.6%', dark: '0 72.2% 60.6%', label: 'Red' },
   // ... 19 more colors
 };
@@ -303,10 +334,11 @@ Changes theme mode and applies to document:
 ```typescript
 const { setMode } = useThemeStore();
 
-setMode('dark');  // Immediately applies dark theme
+setMode('dark'); // Immediately applies dark theme
 ```
 
 Automatically:
+
 - Updates CSS classes on `<html>` element
 - Reapplies primary color for new theme
 - Syncs to server (if authenticated)
@@ -318,10 +350,11 @@ Changes primary color and applies to CSS variables:
 ```typescript
 const { setPrimaryColor } = useThemeStore();
 
-setPrimaryColor('emerald');  // Applies emerald color theme
+setPrimaryColor('emerald'); // Applies emerald color theme
 ```
 
 Automatically:
+
 - Updates `--primary` and `--ring` CSS variables
 - Syncs to server (if authenticated)
 
@@ -336,6 +369,7 @@ await loadThemeFromServer();
 ```
 
 Called automatically:
+
 - After successful login
 - On app rehydration (if authenticated)
 
@@ -350,6 +384,7 @@ await syncThemeToServer();
 ```
 
 Called automatically:
+
 - When mode changes
 - When primary color changes
 - Silent failure if not authenticated
@@ -393,13 +428,15 @@ const applyPrimaryColor = (color: PrimaryColor, currentMode: ThemeMode) => {
 Listens for system theme changes when in 'system' mode:
 
 ```typescript
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-  const state = useThemeStore.getState();
-  if (state.mode === 'system') {
-    applyTheme('system');
-    applyPrimaryColor(state.primaryColor, 'system');
-  }
-});
+window
+  .matchMedia('(prefers-color-scheme: dark)')
+  .addEventListener('change', () => {
+    const state = useThemeStore.getState();
+    if (state.mode === 'system') {
+      applyTheme('system');
+      applyPrimaryColor(state.primaryColor, 'system');
+    }
+  });
 ```
 
 ### Persistence
@@ -408,12 +445,14 @@ Theme state is persisted to localStorage:
 
 ```typescript
 persist(
-  (set, get) => ({ /* ... */ }),
+  (set, get) => ({
+    /* ... */
+  }),
   {
     name: 'flashpoint-theme-settings',
     partialize: (state) => ({
       mode: state.mode,
-      primaryColor: state.primaryColor
+      primaryColor: state.primaryColor,
     }),
     onRehydrateStorage: () => (state) => {
       if (state) {
@@ -426,9 +465,9 @@ persist(
           console.debug('Failed to load theme from server:', error);
         });
       }
-    }
+    },
   }
-)
+);
 ```
 
 ## useUIStore
@@ -436,6 +475,7 @@ persist(
 Manages UI state like sidebar visibility, view modes, and display preferences.
 
 ### Location
+
 `D:\Repositories\Personal\flashpoint-web\frontend\src\store\ui.ts`
 
 ### State
@@ -444,10 +484,10 @@ Manages UI state like sidebar visibility, view modes, and display preferences.
 interface UIState {
   sidebarOpen: boolean;
   sidebarCollapsed: boolean;
-  viewMode: ViewMode;  // 'grid' | 'list'
+  viewMode: ViewMode; // 'grid' | 'list'
   selectedGameId: string | null;
-  cardSize: CardSize;  // 'small' | 'medium' | 'large'
-  listColumns: ListColumns;  // 1 | 2 | 3 | 4
+  cardSize: CardSize; // 'small' | 'medium' | 'large'
+  listColumns: ListColumns; // 1 | 2 | 3 | 4
 
   toggleSidebar: () => void;
   setSidebarOpen: (open: boolean) => void;
@@ -496,7 +536,7 @@ const {
   setSidebarOpen,
   sidebarCollapsed,
   toggleSidebarCollapsed,
-  setSidebarCollapsed
+  setSidebarCollapsed,
 } = useUIStore();
 
 // Toggle sidebar open/closed (mobile)
@@ -514,8 +554,8 @@ toggleSidebarCollapsed();
 ```typescript
 const { viewMode, setViewMode } = useUIStore();
 
-setViewMode('grid');  // Switch to grid view
-setViewMode('list');  // Switch to list view
+setViewMode('grid'); // Switch to grid view
+setViewMode('list'); // Switch to list view
 ```
 
 #### Card Size Actions
@@ -523,9 +563,9 @@ setViewMode('list');  // Switch to list view
 ```typescript
 const { cardSize, setCardSize } = useUIStore();
 
-setCardSize('small');   // Smaller cards
-setCardSize('medium');  // Medium cards (default)
-setCardSize('large');   // Larger cards
+setCardSize('small'); // Smaller cards
+setCardSize('medium'); // Medium cards (default)
+setCardSize('large'); // Larger cards
 ```
 
 #### List Columns Actions
@@ -533,10 +573,10 @@ setCardSize('large');   // Larger cards
 ```typescript
 const { listColumns, setListColumns } = useUIStore();
 
-setListColumns(1);  // Single column
-setListColumns(2);  // Two columns
-setListColumns(3);  // Three columns
-setListColumns(4);  // Four columns
+setListColumns(1); // Single column
+setListColumns(2); // Two columns
+setListColumns(3); // Three columns
+setListColumns(4); // Four columns
 ```
 
 ### Default Values
@@ -558,7 +598,9 @@ UI state is persisted to localStorage:
 
 ```typescript
 persist(
-  (set) => ({ /* ... */ }),
+  (set) => ({
+    /* ... */
+  }),
   {
     name: 'flashpoint-ui-settings',
     partialize: (state) => ({
@@ -566,11 +608,11 @@ persist(
       sidebarCollapsed: state.sidebarCollapsed,
       cardSize: state.cardSize,
       viewMode: state.viewMode,
-      listColumns: state.listColumns
+      listColumns: state.listColumns,
       // selectedGameId is intentionally not persisted
-    })
+    }),
   }
-)
+);
 ```
 
 ## Best Practices
@@ -601,7 +643,7 @@ const token = useAuthStore.getState().accessToken;
 Zustand automatically batches state updates:
 
 ```typescript
-setAuth(user, tokens);  // Single update, single re-render
+setAuth(user, tokens); // Single update, single re-render
 ```
 
 ### 4. DevTools Integration
@@ -612,10 +654,7 @@ Enable Redux DevTools for debugging:
 import { devtools } from 'zustand/middleware';
 
 export const useAuthStore = create<AuthState>()(
-  devtools(
-    persist(/* ... */),
-    { name: 'Auth Store' }
-  )
+  devtools(persist(/* ... */), { name: 'Auth Store' })
 );
 ```
 
diff --git a/docs/04-frontend/views-routing.md b/docs/04-frontend/views-routing.md
index 518bee2..58f1181 100644
--- a/docs/04-frontend/views-routing.md
+++ b/docs/04-frontend/views-routing.md
@@ -1,6 +1,7 @@
 # Views and Routing
 
-Complete documentation of all views, routes, and route protection in the Flashpoint Web frontend.
+Complete documentation of all views, routes, and route protection in the
+Flashpoint Web frontend.
 
 ## Route Structure
 
@@ -42,16 +43,17 @@ All routes use the `ProtectedRoute` component for authorization:
 ```typescript
 interface ProtectedRouteProps {
   children: React.ReactNode;
-  requireAuth?: boolean;               // Default: true
-  requirePermission?: string;          // Single permission
-  requireAnyPermission?: string[];     // Any of these
-  requireAllPermissions?: string[];    // All of these
+  requireAuth?: boolean; // Default: true
+  requirePermission?: string; // Single permission
+  requireAnyPermission?: string[]; // Any of these
+  requireAllPermissions?: string[]; // All of these
 }
 ```
 
 ### Protection Levels
 
 **1. Public Routes** - `requireAuth={false}`
+
 ```typescript
 <Route path="/browse" element={
   <ProtectedRoute requireAuth={false}>
@@ -61,6 +63,7 @@ interface ProtectedRouteProps {
 ```
 
 **2. Authenticated Routes** - Default behavior
+
 ```typescript
 <Route path="/dashboard" element={
   <ProtectedRoute>
@@ -70,6 +73,7 @@ interface ProtectedRouteProps {
 ```
 
 **3. Permission-Based Routes**
+
 ```typescript
 <Route path="/games/:id/play" element={
   <ProtectedRoute requirePermission="games.play">
@@ -85,6 +89,7 @@ interface ProtectedRouteProps {
 Pre-filtered game browsing views.
 
 **Features:**
+
 - Platform-specific filtering
 - Grid/List view toggle
 - Pagination
@@ -95,6 +100,7 @@ Pre-filtered game browsing views.
 Main game browsing view with full filtering.
 
 **Features:**
+
 - Multi-filter sidebar (Platform, Tags, Play Mode, Library)
 - Search bar
 - Sort options
@@ -107,6 +113,7 @@ Main game browsing view with full filtering.
 Detailed game information page.
 
 **Features:**
+
 - Game metadata (title, developer, publisher, release date)
 - Screenshots and logos
 - Tags and categories
@@ -119,6 +126,7 @@ Detailed game information page.
 Full-screen game player.
 
 **Features:**
+
 - Flash/HTML5 game rendering
 - Fullscreen mode
 - Play session tracking
@@ -130,6 +138,7 @@ Full-screen game player.
 User statistics dashboard.
 
 **Features:**
+
 - Total games played
 - Total playtime
 - Top games chart
@@ -142,6 +151,7 @@ User statistics dashboard.
 User playlists management.
 
 **Features:**
+
 - Create new playlists
 - Browse community playlists
 - Delete playlists
@@ -152,6 +162,7 @@ User playlists management.
 Admin management views.
 
 **Features:**
+
 - User management (create, edit, delete, change password)
 - Role management with permission assignment
 - Activity logs with filtering
diff --git a/docs/05-game-service/README.md b/docs/05-game-service/README.md
index bd9d4fa..46ef3a2 100644
--- a/docs/05-game-service/README.md
+++ b/docs/05-game-service/README.md
@@ -1,12 +1,15 @@
 # Game Service
 
-The Game Service is an independent Node.js service that provides game content delivery with intelligent fallback mechanisms for legacy web content and ZIP archive serving.
+The Game Service is an independent Node.js service that provides game content
+delivery with intelligent fallback mechanisms for legacy web content and ZIP
+archive serving.
 
 ## Overview
 
 The game-service runs two HTTP servers:
 
-1. **HTTP Proxy Server** (Port 22500) - Legacy web content serving with fallback chain
+1. **HTTP Proxy Server** (Port 22500) - Legacy web content serving with fallback
+   chain
 2. **GameZip Server** (Port 22501) - ZIP archive streaming
 
 ## Architecture
@@ -27,7 +30,8 @@ The game-service runs two HTTP servers:
 
 ## Key Features
 
-- **Multi-source fallback**: Local htdocs → Game data → ZIP archives → External CDN
+- **Multi-source fallback**: Local htdocs → Game data → ZIP archives → External
+  CDN
 - **Zero-extraction ZIP serving**: Files streamed directly from archives
 - **MIME type detection**: 199+ file types including legacy formats
 - **HTML polyfill injection**: Automatic compatibility fixes
@@ -74,29 +78,31 @@ curl -X POST http://localhost:22501/mount/game-123 \
 ## Service Ports
 
 | Port  | Service        | Purpose                          |
-|-------|----------------|----------------------------------|
+| ----- | -------------- | -------------------------------- |
 | 22500 | HTTP Proxy     | Legacy web content and fallbacks |
 | 22501 | GameZip Server | ZIP archive file serving         |
 
 ## Environment Variables
 
-| Variable                | Default                     | Description              |
-|-------------------------|------------------------------|--------------------------|
-| PROXY_PORT              | 22500                        | HTTP proxy server port   |
-| GAMEZIPSERVER_PORT      | 22501                        | GameZip server port      |
-| FLASHPOINT_PATH         | D:/Flashpoint                | Flashpoint installation  |
-| EXTERNAL_FALLBACK_URLS  | infinity.flashpointarchive   | CDN URLs (comma-separated)|
-| LOG_LEVEL               | info                         | Logging verbosity        |
+| Variable               | Default                    | Description                |
+| ---------------------- | -------------------------- | -------------------------- |
+| PROXY_PORT             | 22500                      | HTTP proxy server port     |
+| GAMEZIPSERVER_PORT     | 22501                      | GameZip server port        |
+| FLASHPOINT_PATH        | D:/Flashpoint              | Flashpoint installation    |
+| EXTERNAL_FALLBACK_URLS | infinity.flashpointarchive | CDN URLs (comma-separated) |
+| LOG_LEVEL              | info                       | Logging verbosity          |
 
 ## Request Flow
 
 ### HTTP Proxy (Port 22500)
+
 1. Try GameZip server (if ZIP mounted)
 2. Try local htdocs
 3. Try external CDN fallback
 4. Return 404 if not found
 
 ### GameZip Server (Port 22501)
+
 1. Mount ZIP via POST /mount/game-id
 2. Request file: GET /http://domain.com/path/file.swf
 3. Search mounted ZIPs for content
@@ -113,6 +119,7 @@ curl -X POST http://localhost:22501/mount/game-123 \
 ## Integration with Backend
 
 The backend delegates file serving to game-service:
+
 - Backend returns launch URLs pointing to proxy server
 - Frontend loads game content from game-service URLs
 - Game-service operates independently without backend communication
@@ -127,6 +134,7 @@ The backend delegates file serving to game-service:
 ## Troubleshooting
 
 ### Port Already in Use
+
 ```bash
 # Find process using port (Windows)
 netstat -ano | findstr :22500
@@ -136,12 +144,14 @@ PROXY_PORT=22510
 ```
 
 ### File Not Found
+
 1. Verify Flashpoint path is correct
 2. Check if file exists in htdocs directory
 3. Verify external fallback URLs are accessible
 4. Ensure ZIP is mounted via GameZip API
 
 ### CORS Errors
+
 - Verify `ALLOW_CROSS_DOMAIN=true` in `.env`
 - Check response headers: `curl -I <url>`
 - Ensure error responses include CORS headers
@@ -159,7 +169,8 @@ docker-compose up -d game-service
 docker-compose logs -f game-service
 ```
 
-Set `FLASHPOINT_HOST_PATH` environment variable to point to your Flashpoint installation.
+Set `FLASHPOINT_HOST_PATH` environment variable to point to your Flashpoint
+installation.
 
 ## Production Deployment
 
diff --git a/docs/05-game-service/architecture.md b/docs/05-game-service/architecture.md
index a74ed81..89fce42 100644
--- a/docs/05-game-service/architecture.md
+++ b/docs/05-game-service/architecture.md
@@ -1,15 +1,20 @@
 # Game Service Architecture
 
-This document describes the architectural design and implementation patterns of the Flashpoint Game Service.
+This document describes the architectural design and implementation patterns of
+the Flashpoint Game Service.
 
 ## System Overview
 
-The game-service is designed as a standalone microservice that handles all game content delivery, replacing the original Go-based FlashpointGameServer with a TypeScript/Node.js implementation.
+The game-service is designed as a standalone microservice that handles all game
+content delivery, replacing the original Go-based FlashpointGameServer with a
+TypeScript/Node.js implementation.
 
 ### Design Principles
 
-1. **Separation of Concerns**: Game content serving separated from metadata management
-2. **Zero Extraction**: ZIP files served via streaming, no disk extraction required
+1. **Separation of Concerns**: Game content serving separated from metadata
+   management
+2. **Zero Extraction**: ZIP files served via streaming, no disk extraction
+   required
 3. **Fallback Chain**: Multi-level fallback ensures content availability
 4. **Performance**: Streaming, connection pooling, and caching for optimal speed
 5. **Compatibility**: 199+ MIME types and HTML polyfills for legacy content
@@ -64,11 +69,13 @@ The game-service is designed as a standalone microservice that handles all game
 **Purpose**: Serve legacy web content with intelligent fallback chain
 
 **Components**:
+
 - `http-proxy-server.ts`: Express server setup and configuration
 - `proxy-request-handler.ts`: Request routing and response handling
 - `legacy-server.ts`: Fallback chain implementation
 
 **Request Flow**:
+
 ```
 Request
   ↓
@@ -84,6 +91,7 @@ Return response with CORS headers
 ```
 
 **Key Features**:
+
 - Supports three URL formats: proxy-style, path-based, standard
 - Automatic subdomain variation matching (www, core, cdn, etc.)
 - External CDN fallback with local caching
@@ -94,10 +102,12 @@ Return response with CORS headers
 **Purpose**: Mount and serve files from ZIP archives without extraction
 
 **Components**:
+
 - `gamezipserver.ts`: GameZip server implementation
 - `zip-manager.ts`: ZIP mounting, indexing, and file access
 
 **API Endpoints**:
+
 ```
 POST   /mount/:id        Mount a ZIP file
 DELETE /mount/:id        Unmount a ZIP file
@@ -106,6 +116,7 @@ GET    /*                Serve file from mounted ZIP
 ```
 
 **Request Flow**:
+
 ```
 Mount Request
   ↓
@@ -131,6 +142,7 @@ Return with MIME type + CORS
 ```
 
 **Key Features**:
+
 - Zero-extraction ZIP access using node-stream-zip
 - Multi-ZIP search with path variation handling
 - Streaming for large files
@@ -141,19 +153,22 @@ Return with MIME type + CORS
 **Purpose**: Centralized configuration from environment and proxySettings.json
 
 **Sources** (in priority order):
+
 1. Environment variables (.env)
 2. proxySettings.json (Flashpoint standard config)
 3. Hardcoded defaults
 
 **Configuration Loading**:
+
 ```typescript
 class ConfigManager {
-  static async loadConfig(flashpointPath: string): Promise<ServerSettings>
-  static getSettings(): ServerSettings
+  static async loadConfig(flashpointPath: string): Promise<ServerSettings>;
+  static getSettings(): ServerSettings;
 }
 ```
 
 **Settings Managed**:
+
 - Server ports
 - File paths (htdocs, games, CGI)
 - External fallback URLs
@@ -165,6 +180,7 @@ class ConfigManager {
 **Purpose**: Implement multi-level fallback for legacy content serving
 
 **Fallback Chain**:
+
 ```
 1. Local htdocs (exact hostname + path)
    ↓ Not found
@@ -186,6 +202,7 @@ class ConfigManager {
 ```
 
 **Path Resolution Algorithm**:
+
 ```typescript
 buildPathCandidates(relPath, urlPath):
   // 1. Exact paths
@@ -211,33 +228,37 @@ buildPathCandidates(relPath, urlPath):
 **Hostname Variation Matching**:
 
 For a request to `mochibot.com/file.swf`, try:
+
 1. `mochibot.com/file.swf`
 2. `www.mochibot.com/file.swf`
 3. `core.mochibot.com/file.swf`
 4. `cdn.mochibot.com/file.swf`
 5. ... (12 common subdomain prefixes)
 
-This handles cases where Flashpoint stores files with subdomain prefixes but games request without them.
+This handles cases where Flashpoint stores files with subdomain prefixes but
+games request without them.
 
 ### 5. ZIP Manager
 
 **Purpose**: Manage ZIP mounting and provide file access without extraction
 
 **Architecture**:
+
 ```typescript
 class ZipManager {
-  private mountedZips: LRUCache<string, MountedZip>
+  private mountedZips: LRUCache<string, MountedZip>;
 
-  async mount(id: string, zipPath: string): void
-  async unmount(id: string): Promise<boolean>
-  async getFile(id: string, filePath: string): Promise<Buffer | null>
-  async findFile(relPath: string): Promise<{data, mountId} | null>
+  async mount(id: string, zipPath: string): void;
+  async unmount(id: string): Promise<boolean>;
+  async getFile(id: string, filePath: string): Promise<Buffer | null>;
+  async findFile(relPath: string): Promise<{ data; mountId } | null>;
 }
 ```
 
 **Performance Optimization - LRU Cache**:
 
-The ZIP manager uses an LRU (Least Recently Used) cache to prevent memory leaks and manage resources:
+The ZIP manager uses an LRU (Least Recently Used) cache to prevent memory leaks
+and manage resources:
 
 ```typescript
 constructor() {
@@ -256,6 +277,7 @@ constructor() {
 ```
 
 **Benefits**:
+
 - Prevents unlimited ZIP mounts (bounded at 100)
 - Automatic cleanup of old mounts after 30 minutes
 - Resource leak prevention via disposal callback
@@ -263,6 +285,7 @@ constructor() {
 - Graceful eviction when limit reached
 
 **Mounting Process**:
+
 ```
 1. Check if already mounted (prevent duplicates)
 2. Verify ZIP file exists on disk
@@ -272,6 +295,7 @@ constructor() {
 ```
 
 **File Access**:
+
 ```
 1. Normalize file path (remove leading slash)
 2. Look up mounted ZIP by ID
@@ -280,6 +304,7 @@ constructor() {
 ```
 
 **Multi-ZIP Search**:
+
 ```
 Try path variations in order:
   - content/{relPath}       (most common)
@@ -297,6 +322,7 @@ For each variation:
 **Purpose**: Provide accurate content-type headers for 199+ file types
 
 **Architecture**:
+
 ```typescript
 CUSTOM_MIME_TYPES: 199 legacy formats
 STANDARD_MIME_TYPES: Common web formats
@@ -309,16 +335,18 @@ getMimeType(ext: string): string {
 ```
 
 **Priority**:
+
 1. Custom MIME types (Flashpoint legacy formats)
 2. Standard MIME types (web formats)
 3. Default: application/octet-stream
 
 **Special Cases**:
+
 - Director files (.dcr, .dir, .dxr) → application/x-director
 - Shockwave Flash (.swf) → application/x-shockwave-flash
 - Unity3D (.unity3d) → application/vnd.unity
 - VRML (.wrl) → model/vrml
-- Chemical formats (.pdb, .mol) → chemical/x-*
+- Chemical formats (.pdb, .mol) → chemical/x-\*
 
 ### 7. CORS Utilities
 
@@ -327,6 +355,7 @@ getMimeType(ext: string): string {
 **Location**: `game-service/src/utils/cors.ts`
 
 **Benefits**:
+
 - Eliminates 6+ instances of duplicate CORS header setting
 - Consistent CORS configuration across both servers
 - Reusable functions for standard and preflight requests
@@ -339,14 +368,14 @@ interface CorsSettings {
 }
 
 // Standard CORS headers
-function setCorsHeaders(res: ServerResponse, settings: CorsSettings): void
+function setCorsHeaders(res: ServerResponse, settings: CorsSettings): void;
 
 // CORS headers with max-age (for OPTIONS preflight)
 function setCorsHeadersWithMaxAge(
   res: ServerResponse,
   settings: CorsSettings,
   maxAge: number = 86400
-): void
+): void;
 ```
 
 **Usage**:
@@ -372,14 +401,17 @@ if (req.method === 'OPTIONS') {
 
 **Security Justification**:
 
-The game-service uses wildcard CORS (`Access-Control-Allow-Origin: *`) which is justified because:
+The game-service uses wildcard CORS (`Access-Control-Allow-Origin: *`) which is
+justified because:
+
 - Serves public, read-only game content only
 - No sensitive data exposure
 - No authentication required
 - Supports game embedding across different domains
 - Backend service maintains restrictive CORS for sensitive operations
 
-See `docs/12-reference/cors-security-decision.md` for detailed security rationale.
+See `docs/12-reference/cors-security-decision.md` for detailed security
+rationale.
 
 ### 8. HTML Polyfill Injector
 
@@ -397,6 +429,7 @@ See `docs/12-reference/cors-security-decision.md` for detailed security rational
    - `AudioContext` polyfill - WebKit prefix handling
 
 **Injection Algorithm**:
+
 ```
 1. Detect if HTML file (check for <html> or <head>)
 2. Analyze content for Unity indicators
@@ -408,6 +441,7 @@ See `docs/12-reference/cors-security-decision.md` for detailed security rational
 ```
 
 **Detection Patterns**:
+
 ```typescript
 needsUnityPolyfills(html: string): boolean {
   const indicators = [
@@ -526,10 +560,12 @@ needsUnityPolyfills(html: string): boolean {
 ### Horizontal Scaling
 
 Current limitations:
+
 - ZIP mounts are in-memory per process
 - No shared state between instances
 
 Future improvements:
+
 - Redis for mount registry
 - Consistent hashing for ZIP distribution
 - Load balancer for multiple instances
@@ -537,23 +573,27 @@ Future improvements:
 ### Performance Tuning
 
 **Memory**:
+
 - ZIP indexes are loaded into memory
 - Large ZIPs (>1GB) take ~500MB RAM for index
 - Solution: Lazy loading, LRU cache for ZIP handles
 
 **CPU**:
+
 - MIME type lookup: O(1) hash map
 - Path candidates: O(n) where n = variations
 - ZIP search: O(m × p) where m = mounted ZIPs, p = path variations
 - Solution: Cache results, reduce variations
 
 **Network**:
+
 - External downloads: 45s timeout
 - Concurrent limit: 10 requests
 - Keep-alive: 65s
 - Solution: Increase timeouts for slow connections
 
 **Disk I/O**:
+
 - ZIP reads: Random access via node-stream-zip
 - Local cache: Sequential writes
 - Solution: SSD recommended, RAM disk for cache
@@ -584,18 +624,19 @@ try {
   // Try operation
 } catch (error) {
   if (isRecoverable(error)) {
-    logger.warn('Recoverable error, trying next source', error)
-    continue // Try next fallback
+    logger.warn('Recoverable error, trying next source', error);
+    continue; // Try next fallback
   } else {
-    logger.error('Fatal error', error)
-    throw error // Return 500
+    logger.error('Fatal error', error);
+    throw error; // Return 500
   }
 }
 ```
 
 ### CORS Error Handling
 
-**Critical**: CORS headers MUST be set even for error responses, otherwise browsers show CORS error instead of actual error.
+**Critical**: CORS headers MUST be set even for error responses, otherwise
+browsers show CORS error instead of actual error.
 
 ```typescript
 import { setCorsHeaders } from '../utils/cors';
@@ -612,7 +653,8 @@ private sendError(res: Response, status: number, message: string) {
 
 ### Request Body Size Limits
 
-**DoS Protection**: The GameZip server limits request body sizes to prevent memory exhaustion attacks:
+**DoS Protection**: The GameZip server limits request body sizes to prevent
+memory exhaustion attacks:
 
 ```typescript
 // gamezipserver.ts
@@ -633,6 +675,7 @@ private readBody(req: http.IncomingMessage, maxSize: number = 1024 * 1024): Prom
 ```
 
 **Protection**:
+
 - 1MB maximum request size by default
 - Connection destroyed immediately on overflow
 - Prevents memory exhaustion attacks
@@ -641,33 +684,45 @@ private readBody(req: http.IncomingMessage, maxSize: number = 1024 * 1024): Prom
 ### Path Traversal Prevention
 
 All file paths are normalized:
+
 ```typescript
-path.normalize(filePath).toLowerCase()
+path.normalize(filePath).toLowerCase();
 ```
 
 **ZIP Mount ID Validation**:
+
 ```typescript
 // Reject IDs with path traversal sequences
-if (id.includes('/') || id.includes('\\') ||
-    id.includes('..') || id.includes('\0')) {
+if (
+  id.includes('/') ||
+  id.includes('\\') ||
+  id.includes('..') ||
+  id.includes('\0')
+) {
   this.sendError(res, 400, 'Invalid mount ID');
   return;
 }
 ```
 
 **ZIP Path Validation**:
+
 ```typescript
 // Ensure ZIP files are within allowed directory
 const resolvedZipPath = path.resolve(normalizedZipPath);
 const resolvedGamesPath = path.resolve(allowedGamesPath);
 
 if (!resolvedZipPath.startsWith(resolvedGamesPath)) {
-  this.sendError(res, 403, 'Forbidden: ZIP file must be within games directory');
+  this.sendError(
+    res,
+    403,
+    'Forbidden: ZIP file must be within games directory'
+  );
   return;
 }
 ```
 
 Prevents attacks like:
+
 - `../../../etc/passwd`
 - `..\\..\\windows\\system32`
 - Null byte injection (`file.txt\0.jpg`)
@@ -698,12 +753,14 @@ Prevents attacks like:
 ### Logging Strategy
 
 **Levels**:
+
 - DEBUG: Path candidates, ZIP searches, file access
 - INFO: Requests, mounts, file serves, sources
 - WARN: Fallback attempts, missing files
 - ERROR: Server errors, mount failures, fatal errors
 
 **Log Format**:
+
 ```
 [Component] Message
 [HTTPProxyServer] GET http://domain.com/file.swf
@@ -715,6 +772,7 @@ Prevents attacks like:
 ### Metrics (Future)
 
 Potential metrics to track:
+
 - Requests per second
 - Response time percentiles (p50, p95, p99)
 - Cache hit rate
@@ -725,6 +783,7 @@ Potential metrics to track:
 ### Health Checks
 
 Endpoint suggestions:
+
 ```
 GET /health        Basic health check
 GET /metrics       Prometheus metrics
diff --git a/docs/05-game-service/configuration.md b/docs/05-game-service/configuration.md
index 8a4798d..3766191 100644
--- a/docs/05-game-service/configuration.md
+++ b/docs/05-game-service/configuration.md
@@ -1,6 +1,7 @@
 # Configuration
 
-The game-service configuration system uses environment variables and `proxySettings.json` to provide flexible deployment options.
+The game-service configuration system uses environment variables and
+`proxySettings.json` to provide flexible deployment options.
 
 ## Configuration Sources
 
@@ -27,14 +28,12 @@ HTTP Proxy Server port.
 PROXY_PORT=22500
 ```
 
-**Default**: 22500
-**Type**: Integer
-**Range**: 1024-65535
-**Required**: No
+**Default**: 22500 **Type**: Integer **Range**: 1024-65535 **Required**: No
 
 **Use case**: Change if port conflict occurs
 
 **Examples**:
+
 ```bash
 PROXY_PORT=22500  # Default
 PROXY_PORT=8080   # Alternative HTTP port
@@ -49,10 +48,7 @@ GameZip Server port.
 GAMEZIPSERVER_PORT=22501
 ```
 
-**Default**: 22501
-**Type**: Integer
-**Range**: 1024-65535
-**Required**: No
+**Default**: 22501 **Type**: Integer **Range**: 1024-65535 **Required**: No
 
 **Use case**: Change if port conflict occurs
 
@@ -66,13 +62,13 @@ Flashpoint installation root directory.
 FLASHPOINT_PATH=D:/Flashpoint
 ```
 
-**Default**: D:/Flashpoint
-**Type**: Absolute path
-**Required**: Yes (for production)
+**Default**: D:/Flashpoint **Type**: Absolute path **Required**: Yes (for
+production)
 
 **Use case**: Point to Flashpoint installation
 
 **Platform-specific**:
+
 ```bash
 # Windows
 FLASHPOINT_PATH=D:/Flashpoint
@@ -94,7 +90,8 @@ All other Flashpoint paths are automatically derived from `FLASHPOINT_PATH`:
 - HTDOCS: `${FLASHPOINT_PATH}/Legacy/htdocs`
 - Games: `${FLASHPOINT_PATH}/Data/Games`
 
-You do not need to set environment variables for these paths - they are calculated automatically from `FLASHPOINT_PATH`.
+You do not need to set environment variables for these paths - they are
+calculated automatically from `FLASHPOINT_PATH`.
 
 ### Proxy Settings
 
@@ -106,12 +103,11 @@ Streaming chunk size in bytes.
 PROXY_CHUNK_SIZE=8192
 ```
 
-**Default**: 8192 (8KB)
-**Type**: Integer
-**Range**: 1024-1048576 (1KB-1MB)
+**Default**: 8192 (8KB) **Type**: Integer **Range**: 1024-1048576 (1KB-1MB)
 **Required**: No
 
 **Performance tuning**:
+
 ```bash
 PROXY_CHUNK_SIZE=4096    # Low memory, high CPU
 PROXY_CHUNK_SIZE=8192    # Balanced (default)
@@ -119,6 +115,7 @@ PROXY_CHUNK_SIZE=65536   # High memory, low CPU
 ```
 
 **Trade-offs**:
+
 - Smaller chunks: Lower memory, higher CPU, more I/O calls
 - Larger chunks: Higher memory, lower CPU, fewer I/O calls
 
@@ -130,19 +127,19 @@ Enable CORS headers.
 ALLOW_CROSS_DOMAIN=true
 ```
 
-**Default**: true
-**Type**: Boolean (true/false)
-**Required**: No
+**Default**: true **Type**: Boolean (true/false) **Required**: No
 
 **Use case**: Disable for internal networks
 
 **Values**:
+
 ```bash
 ALLOW_CROSS_DOMAIN=true   # Enable CORS (default)
 ALLOW_CROSS_DOMAIN=false  # Disable CORS
 ```
 
 **Impact**:
+
 - `true`: Adds `Access-Control-Allow-Origin: *`
 - `false`: No CORS headers, cross-domain requests blocked
 
@@ -156,18 +153,19 @@ Comma-separated list of external CDN URLs.
 EXTERNAL_FALLBACK_URLS=http://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs,http://infinity.unstable.life/Flashpoint/Legacy/htdocs/
 ```
 
-**Default**: infinity.flashpointarchive.org
-**Type**: Comma-separated URLs
+**Default**: infinity.flashpointarchive.org **Type**: Comma-separated URLs
 **Required**: No
 
 **Use case**: Add backup CDNs
 
 **Format**:
+
 ```bash
 EXTERNAL_FALLBACK_URLS=https://cdn1.example.com,https://cdn2.example.com,https://cdn3.example.com
 ```
 
 **Notes**:
+
 - HTTP URLs auto-upgraded to HTTPS
 - Tried in order
 - First successful response used
@@ -182,12 +180,11 @@ Logging verbosity level.
 LOG_LEVEL=info
 ```
 
-**Default**: info
-**Type**: String
-**Values**: error, warn, info, debug
+**Default**: info **Type**: String **Values**: error, warn, info, debug
 **Required**: No
 
 **Levels**:
+
 ```bash
 LOG_LEVEL=error  # Errors only
 LOG_LEVEL=warn   # Warnings and errors
@@ -196,6 +193,7 @@ LOG_LEVEL=debug  # Verbose logging
 ```
 
 **Impact**:
+
 - `error`: Minimal logs, production recommended
 - `warn`: Important messages
 - `info`: Request logging, file serves
@@ -209,14 +207,13 @@ Node.js environment mode.
 NODE_ENV=development
 ```
 
-**Default**: development
-**Type**: String
-**Values**: development, production, test
-**Required**: No
+**Default**: development **Type**: String **Values**: development, production,
+test **Required**: No
 
 **Use case**: Production optimization
 
 **Values**:
+
 ```bash
 NODE_ENV=development  # Development mode (default)
 NODE_ENV=production   # Production optimizations
@@ -233,9 +230,7 @@ Enable CGI script execution.
 ENABLE_CGI=false
 ```
 
-**Default**: false
-**Type**: Boolean
-**Required**: No
+**Default**: false **Type**: Boolean **Required**: No
 
 **Use case**: Execute PHP/Perl scripts
 
@@ -249,9 +244,7 @@ Enable .htaccess file parsing.
 ENABLE_HTACCESS=false
 ```
 
-**Default**: false
-**Type**: Boolean
-**Required**: No
+**Default**: false **Type**: Boolean **Required**: No
 
 **Use case**: Apache-style directory configuration
 
@@ -295,12 +288,12 @@ Override directories in htdocs.
 "legacyOverridePaths": ["custom", "fixes", "overrides"]
 ```
 
-**Default**: []
-**Type**: Array of strings
+**Default**: [] **Type**: Array of strings
 
 **Use case**: Patch broken games with fixed versions
 
 **Path resolution**:
+
 ```
 Request: www.example.com/game.swf
 Override: htdocs/custom/www.example.com/game.swf
@@ -315,8 +308,7 @@ Primary external CDN URL.
 "infinityServerURL": "https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs/"
 ```
 
-**Default**: https://infinity.flashpointarchive.org/...
-**Type**: String (URL)
+**Default**: https://infinity.flashpointarchive.org/... **Type**: String (URL)
 
 **Use case**: Change primary CDN
 
@@ -331,8 +323,7 @@ Additional external CDN URLs.
 ]
 ```
 
-**Default**: []
-**Type**: Array of URLs
+**Default**: [] **Type**: Array of URLs
 
 **Use case**: Add backup CDNs
 
@@ -344,8 +335,7 @@ Enable MAD4FP content sources.
 "mad4fpEnabled": false
 ```
 
-**Default**: false
-**Type**: Boolean
+**Default**: false **Type**: Boolean
 
 **Use case**: Access MAD4FP community content
 
@@ -359,8 +349,7 @@ MAD4FP content URLs.
 ]
 ```
 
-**Default**: []
-**Type**: Array of URLs
+**Default**: [] **Type**: Array of URLs
 
 **Use case**: MAD4FP CDN locations
 
@@ -456,8 +445,8 @@ Maximum security (breaks most games).
 export class ConfigManager {
   private static settings: ServerSettings | null = null;
 
-  static async loadConfig(flashpointPath: string): Promise<ServerSettings>
-  static getSettings(): ServerSettings
+  static async loadConfig(flashpointPath: string): Promise<ServerSettings>;
+  static getSettings(): ServerSettings;
 }
 ```
 
@@ -465,7 +454,11 @@ export class ConfigManager {
 
 ```typescript
 // 1. Load from proxySettings.json
-const proxySettingsPath = path.join(flashpointPath, 'Server', 'proxySettings.json');
+const proxySettingsPath = path.join(
+  flashpointPath,
+  'Server',
+  'proxySettings.json'
+);
 const proxySettings = JSON.parse(await fs.readFile(proxySettingsPath, 'utf-8'));
 
 // 2. Derive paths automatically from FLASHPOINT_PATH
@@ -619,6 +612,7 @@ ENV GAMEZIPSERVER_PORT=${GAMEZIPSERVER_PORT}
 **Symptom**: Using default values instead of configured values
 
 **Debug steps**:
+
 1. Check .env file exists in correct location
 2. Verify dotenv is loading: `console.log(process.env.PROXY_PORT)`
 3. Check for typos in variable names
@@ -631,6 +625,7 @@ ENV GAMEZIPSERVER_PORT=${GAMEZIPSERVER_PORT}
 **Symptom**: `Flashpoint path not found: D:/Flashpoint`
 
 **Debug steps**:
+
 1. Verify path exists: `dir D:\Flashpoint` (Windows) or `ls /flashpoint` (Linux)
 2. Check path format (forward slashes on all platforms)
 3. Verify permissions (read access required)
@@ -643,6 +638,7 @@ ENV GAMEZIPSERVER_PORT=${GAMEZIPSERVER_PORT}
 **Symptom**: `Port 22500 already in use`
 
 **Debug steps**:
+
 1. Find process: `netstat -ano | findstr :22500`
 2. Kill process or change port
 3. Check for multiple game-service instances
@@ -654,6 +650,7 @@ ENV GAMEZIPSERVER_PORT=${GAMEZIPSERVER_PORT}
 **Symptom**: Files not found from external sources
 
 **Debug steps**:
+
 1. Test URL manually: `curl https://infinity.flashpointarchive.org/...`
 2. Check EXTERNAL_FALLBACK_URLS format
 3. Verify network connectivity
@@ -691,21 +688,25 @@ LOG_LEVEL=error  # Minimal logging overhead
 ## Security Best Practices
 
 1. **Disable CGI in production**:
+
    ```bash
    ENABLE_CGI=false
    ```
 
 2. **Restrict CORS if internal**:
+
    ```bash
    ALLOW_CROSS_DOMAIN=false  # Internal networks only
    ```
 
 3. **Use HTTPS for external URLs**:
+
    ```bash
    EXTERNAL_FALLBACK_URLS=https://cdn.example.com  # HTTPS only
    ```
 
 4. **Minimal logging in production**:
+
    ```bash
    LOG_LEVEL=warn  # Don't log sensitive paths
    ```
@@ -733,6 +734,8 @@ Planned configuration options:
 ## References
 
 - dotenv documentation: https://github.com/motdotla/dotenv
-- Node.js environment variables: https://nodejs.org/api/process.html#process_process_env
+- Node.js environment variables:
+  https://nodejs.org/api/process.html#process_process_env
 - Flashpoint proxySettings.json specification
-- Docker environment configuration: https://docs.docker.com/compose/environment-variables/
+- Docker environment configuration:
+  https://docs.docker.com/compose/environment-variables/
diff --git a/docs/05-game-service/gamezip-server.md b/docs/05-game-service/gamezip-server.md
index 21560bd..57a41e8 100644
--- a/docs/05-game-service/gamezip-server.md
+++ b/docs/05-game-service/gamezip-server.md
@@ -1,10 +1,12 @@
 # GameZip Server (Port 22501)
 
-The GameZip Server mounts ZIP archives in-memory and serves files directly using streaming, eliminating disk extraction needs.
+The GameZip Server mounts ZIP archives in-memory and serves files directly using
+streaming, eliminating disk extraction needs.
 
 ## Overview
 
-Mounts ZIP archives and serves files using `node-stream-zip` for streaming without extraction. This saves disk space and improves performance.
+Mounts ZIP archives and serves files using `node-stream-zip` for streaming
+without extraction. This saves disk space and improves performance.
 
 ## Architecture
 
@@ -34,11 +36,13 @@ Content-Type: application/json
 ```
 
 **Response:**
+
 ```json
-{"success": true, "id": "game-123", "zipPath": "..."}
+{ "success": true, "id": "game-123", "zipPath": "..." }
 ```
 
 **Errors:**
+
 - `400`: Missing mount ID or zipPath
 - `500`: ZIP file not found or mount failed
 
@@ -49,8 +53,9 @@ DELETE /mount/:id HTTP/1.1
 ```
 
 **Response:**
+
 ```json
-{"success": true, "id": "game-123"}
+{ "success": true, "id": "game-123" }
 ```
 
 ### List Mounted ZIPs
@@ -60,6 +65,7 @@ GET /mounts HTTP/1.1
 ```
 
 **Response:**
+
 ```json
 {
   "mounts": [
@@ -86,6 +92,7 @@ GET /http://www.example.com/path/file.swf HTTP/1.1
 ```
 
 **Response:**
+
 ```http
 HTTP/1.1 200 OK
 Content-Type: application/x-shockwave-flash
@@ -100,6 +107,7 @@ Access-Control-Allow-Origin: *
 ### URL Format Support
 
 GameZip supports three URL formats:
+
 1. **Proxy-style**: `GET http://domain.com/path`
 2. **Path-based**: `GET /http://domain.com/path`
 3. **Standard**: `GET /path` with Host header
@@ -107,6 +115,7 @@ GameZip supports three URL formats:
 ### Path Search Strategy
 
 For request `www.example.com/path/file.swf`, tries:
+
 1. `content/www.example.com/path/file.swf` (most common)
 2. `htdocs/www.example.com/path/file.swf` (standard)
 3. `www.example.com/path/file.swf` (no prefix)
@@ -134,6 +143,7 @@ async getFile(id: string, filePath: string): Promise<Buffer | null> {
 ```
 
 **Benefits:**
+
 - No disk extraction required
 - No temporary files created
 - Direct memory buffer access
@@ -146,6 +156,7 @@ Detected from file extensions with 199+ supported types.
 ## Response Headers
 
 ### Standard Headers
+
 ```http
 Content-Type: application/x-shockwave-flash
 Content-Length: 123456
@@ -155,6 +166,7 @@ Connection: keep-alive
 ```
 
 ### CORS Headers
+
 ```http
 Access-Control-Allow-Origin: *
 Access-Control-Allow-Methods: GET, POST, OPTIONS
@@ -164,12 +176,14 @@ Access-Control-Allow-Headers: *
 ## HTML Polyfill Injection
 
 HTML files are automatically processed to inject compatibility polyfills:
+
 - Unity WebGL support
 - General browser compatibility shims
 
 ## Integration with Backend
 
 **Workflow:**
+
 1. Backend mounts ZIP: `POST /mount/{game.id}`
 2. Backend returns launch config with gameZip URLs
 3. Frontend loads game from proxy server
@@ -179,16 +193,17 @@ HTML files are automatically processed to inject compatibility polyfills:
 ## Error Handling
 
 **Mount Errors:**
+
 - `ZIP file not found` - Invalid zip path
 - `ZIP already mounted` - Silent success (returns immediately)
 - `Corrupted ZIP` - File read error
 
 **File Access Errors:**
+
 - `File not in ZIP` - Returns 404
 - `No ZIPs mounted` - Returns 404
 
-**Graceful Degradation:**
-If GameZip fails, proxy server continues without it.
+**Graceful Degradation:** If GameZip fails, proxy server continues without it.
 
 ## Testing
 
@@ -214,22 +229,26 @@ curl -X DELETE http://localhost:22501/mount/test-game
 ## Troubleshooting
 
 ### Port Already in Use
+
 ```bash
 GAMEZIPSERVER_PORT=22502
 ```
 
 ### ZIP Mount Fails
+
 1. Verify path is absolute
 2. Check file permissions
 3. Ensure ZIP file exists
 
 ### File Not Found in ZIP
+
 1. List mounted ZIPs: `curl http://localhost:22501/mounts`
 2. Check if correct ZIP is mounted
 3. Verify file exists in ZIP (extract and check)
 4. Check ZIP structure (content/, htdocs/, or root?)
 
 ### Memory Issues
+
 1. Limit number of mounted ZIPs
 2. Implement auto-unmount for inactive ZIPs
 3. Add file size limits
@@ -238,20 +257,24 @@ GAMEZIPSERVER_PORT=22502
 ## Security
 
 ### Path Traversal Prevention
+
 File paths are normalized and validated to prevent directory traversal.
 
 ### Mount Access Control
+
 Only explicitly mounted ZIPs are accessible. No arbitrary ZIP path access.
 
 ## Performance
 
 ### Memory Usage
+
 - Small ZIP (~100 files): ~1MB RAM
 - Medium ZIP (~1,000 files): ~5MB RAM
 - Large ZIP (~10,000 files): ~50MB RAM
 - Each request loads file into memory
 
 ### Access Speed
+
 - Index lookup: O(1) hash table
 - File read: Random access, depends on position
 - Typical: Small files 2-5ms, medium 10-50ms, large 50-500ms
diff --git a/docs/05-game-service/html-polyfills.md b/docs/05-game-service/html-polyfills.md
index f3af85c..d23c7df 100644
--- a/docs/05-game-service/html-polyfills.md
+++ b/docs/05-game-service/html-polyfills.md
@@ -1,10 +1,13 @@
 # HTML Polyfills
 
-The game-service automatically injects JavaScript polyfills into HTML files to improve compatibility with Unity WebGL and other game engines.
+The game-service automatically injects JavaScript polyfills into HTML files to
+improve compatibility with Unity WebGL and other game engines.
 
 ## Overview
 
-Many legacy games expect certain browser APIs and global functions to exist. The HTML Polyfill Injector detects game engines and automatically adds compatibility shims to prevent errors and improve stability.
+Many legacy games expect certain browser APIs and global functions to exist. The
+HTML Polyfill Injector detects game engines and automatically adds compatibility
+shims to prevent errors and improve stability.
 
 ## Architecture
 
@@ -33,15 +36,15 @@ Injected when Unity game is detected.
 ```typescript
 function needsUnityPolyfills(html: string): boolean {
   const unityIndicators = [
-    /UnityProgress/i,           // Unity 5.x progress callback
-    /UnityLoader/i,             // Unity loader script
-    /createUnityInstance/i,     // Unity 2020+ API
-    /unityFramework\.js/i,      // Unity framework
-    /Build\/.*\.loader\.js/i,   // Unity build files
-    /UnityEngine/i              // Unity namespace
+    /UnityProgress/i, // Unity 5.x progress callback
+    /UnityLoader/i, // Unity loader script
+    /createUnityInstance/i, // Unity 2020+ API
+    /unityFramework\.js/i, // Unity framework
+    /Build\/.*\.loader\.js/i, // Unity build files
+    /UnityEngine/i, // Unity namespace
   ];
 
-  return unityIndicators.some(pattern => pattern.test(html));
+  return unityIndicators.some((pattern) => pattern.test(html));
 }
 ```
 
@@ -53,39 +56,45 @@ function needsUnityPolyfills(html: string): boolean {
 // Unity WebGL Polyfills
 
 // 1. UnityProgress - Progress callback for Unity 5.x
-window.UnityProgress = window.UnityProgress || function(gameInstance, progress) {
-  if (!gameInstance.Module) return;
-  if (!gameInstance.progress) {
-    gameInstance.progress = { loaded: 0, total: 1 };
-  }
-  gameInstance.progress.loaded = progress;
-  if (progress === 1) {
-    console.log('[Unity] Game loaded successfully');
-  }
-};
+window.UnityProgress =
+  window.UnityProgress ||
+  function (gameInstance, progress) {
+    if (!gameInstance.Module) return;
+    if (!gameInstance.progress) {
+      gameInstance.progress = { loaded: 0, total: 1 };
+    }
+    gameInstance.progress.loaded = progress;
+    if (progress === 1) {
+      console.log('[Unity] Game loaded successfully');
+    }
+  };
 
 // 2. createUnityInstance - Unity 2020+ loader API
-window.createUnityInstance = window.createUnityInstance || function(canvas, config) {
-  return new Promise((resolve) => {
-    console.log('[Unity] createUnityInstance called - using polyfill');
-    resolve({
-      Module: {},
-      SetFullscreen: function() {},
-      SendMessage: function() {},
-      Quit: function() { return Promise.resolve(); }
+window.createUnityInstance =
+  window.createUnityInstance ||
+  function (canvas, config) {
+    return new Promise((resolve) => {
+      console.log('[Unity] createUnityInstance called - using polyfill');
+      resolve({
+        Module: {},
+        SetFullscreen: function () {},
+        SendMessage: function () {},
+        Quit: function () {
+          return Promise.resolve();
+        },
+      });
     });
-  });
-};
+  };
 
 // 3. UnityLoader2020 - Error handler
 if (typeof UnityLoader2020 === 'undefined') {
   window.UnityLoader2020 = {
     Error: {
-      handler: function(message, filename, lineno) {
+      handler: function (message, filename, lineno) {
         console.warn('[Unity] Error:', message, 'at', filename + ':' + lineno);
         return true; // Prevent default error handling
-      }
-    }
+      },
+    },
   };
 }
 ```
@@ -103,7 +112,10 @@ if (typeof window.external === 'undefined') {
 }
 
 // 2. AudioContext - WebKit prefix polyfill
-if (typeof AudioContext === 'undefined' && typeof webkitAudioContext !== 'undefined') {
+if (
+  typeof AudioContext === 'undefined' &&
+  typeof webkitAudioContext !== 'undefined'
+) {
   window.AudioContext = webkitAudioContext;
 }
 ```
@@ -151,32 +163,36 @@ const headMatch = htmlString.match(/<head[^>]*>/i);
 if (headMatch) {
   const headOpenTag = headMatch[0];
   const insertPosition = htmlString.indexOf(headOpenTag) + headOpenTag.length;
-  htmlString = htmlString.slice(0, insertPosition) +
-               polyfillsToInject +
-               htmlString.slice(insertPosition);
-}
-else {
+  htmlString =
+    htmlString.slice(0, insertPosition) +
+    polyfillsToInject +
+    htmlString.slice(insertPosition);
+} else {
   // No <head> tag, try to inject after <html>
   const htmlMatch = htmlString.match(/<html[^>]*>/i);
   if (htmlMatch) {
     const htmlOpenTag = htmlMatch[0];
     const insertPosition = htmlString.indexOf(htmlOpenTag) + htmlOpenTag.length;
-    htmlString = htmlString.slice(0, insertPosition) +
-                 '<head>' + polyfillsToInject + '</head>' +
-                 htmlString.slice(insertPosition);
-  }
-  else {
+    htmlString =
+      htmlString.slice(0, insertPosition) +
+      '<head>' +
+      polyfillsToInject +
+      '</head>' +
+      htmlString.slice(insertPosition);
+  } else {
     // No <html> or <head> tag, wrap entire content
-    htmlString = '<!DOCTYPE html><html><head>' +
-                 polyfillsToInject +
-                 '</head><body>' +
-                 htmlString +
-                 '</body></html>';
+    htmlString =
+      '<!DOCTYPE html><html><head>' +
+      polyfillsToInject +
+      '</head><body>' +
+      htmlString +
+      '</body></html>';
   }
 }
 ```
 
 **Injection priority**:
+
 1. After `<head>` opening tag (best)
 2. Create `<head>` after `<html>` (fallback)
 3. Wrap entire content in HTML structure (last resort)
@@ -188,20 +204,23 @@ else {
 **Purpose**: Legacy Unity 5.x games call this to report loading progress
 
 **Without polyfill**:
+
 ```javascript
 UnityProgress(gameInstance, 0.5);
 // Error: UnityProgress is not defined
 ```
 
 **With polyfill**:
+
 ```javascript
 UnityProgress(gameInstance, 0.5);
 // Works: Updates progress, logs completion
 ```
 
 **Implementation**:
+
 ```javascript
-window.UnityProgress = function(gameInstance, progress) {
+window.UnityProgress = function (gameInstance, progress) {
   if (!gameInstance.Module) return;
 
   // Initialize progress tracking
@@ -224,33 +243,37 @@ window.UnityProgress = function(gameInstance, progress) {
 **Purpose**: Unity 2020+ uses this to instantiate games
 
 **Without polyfill**:
+
 ```javascript
-createUnityInstance(canvas, config).then(instance => {
+createUnityInstance(canvas, config).then((instance) => {
   // Error: createUnityInstance is not defined
 });
 ```
 
 **With polyfill**:
+
 ```javascript
-createUnityInstance(canvas, config).then(instance => {
+createUnityInstance(canvas, config).then((instance) => {
   // Works: Returns mock instance
 });
 ```
 
 **Implementation**:
+
 ```javascript
-window.createUnityInstance = function(canvas, config) {
+window.createUnityInstance = function (canvas, config) {
   return new Promise((resolve) => {
     console.log('[Unity] createUnityInstance called - using polyfill');
 
     // Return mock Unity instance
     resolve({
-      Module: {},                      // Unity WebAssembly module
-      SetFullscreen: function() {},    // Fullscreen API
-      SendMessage: function() {},      // Unity-to-JS messaging
-      Quit: function() {               // Cleanup
+      Module: {}, // Unity WebAssembly module
+      SetFullscreen: function () {}, // Fullscreen API
+      SendMessage: function () {}, // Unity-to-JS messaging
+      Quit: function () {
+        // Cleanup
         return Promise.resolve();
-      }
+      },
     });
   });
 };
@@ -261,25 +284,28 @@ window.createUnityInstance = function(canvas, config) {
 **Purpose**: Suppress Unity framework errors
 
 **Without polyfill**:
+
 ```
 Uncaught ReferenceError: UnityLoader2020 is not defined
 ```
 
 **With polyfill**:
+
 ```
 [Unity] Error: ... (logged but not thrown)
 ```
 
 **Implementation**:
+
 ```javascript
 if (typeof UnityLoader2020 === 'undefined') {
   window.UnityLoader2020 = {
     Error: {
-      handler: function(message, filename, lineno) {
+      handler: function (message, filename, lineno) {
         console.warn('[Unity] Error:', message, 'at', filename + ':' + lineno);
         return true; // Prevent default error handling
-      }
-    }
+      },
+    },
   };
 }
 ```
@@ -291,18 +317,21 @@ if (typeof UnityLoader2020 === 'undefined') {
 **Purpose**: Legacy ActiveX/IE games expect `window.external`
 
 **Without polyfill**:
+
 ```javascript
 window.external.someMethod();
 // Error: Cannot read property 'someMethod' of undefined
 ```
 
 **With polyfill**:
+
 ```javascript
 window.external.someMethod();
 // Error: someMethod is not a function (better than undefined)
 ```
 
 **Implementation**:
+
 ```javascript
 if (typeof window.external === 'undefined') {
   window.external = {};
@@ -314,20 +343,26 @@ if (typeof window.external === 'undefined') {
 **Purpose**: Older browsers use `webkitAudioContext`
 
 **Without polyfill**:
+
 ```javascript
 const audioContext = new AudioContext();
 // Error: AudioContext is not defined (in older Safari/Chrome)
 ```
 
 **With polyfill**:
+
 ```javascript
 const audioContext = new AudioContext();
 // Works: Uses webkitAudioContext
 ```
 
 **Implementation**:
+
 ```javascript
-if (typeof AudioContext === 'undefined' && typeof webkitAudioContext !== 'undefined') {
+if (
+  typeof AudioContext === 'undefined' &&
+  typeof webkitAudioContext !== 'undefined'
+) {
   window.AudioContext = webkitAudioContext;
 }
 ```
@@ -372,15 +407,15 @@ Create test HTML file:
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Unity Game</title>
-</head>
-<body>
-  <script src="Build/game.loader.js"></script>
-  <script>
-    createUnityInstance(canvas, config);
-  </script>
-</body>
+  <head>
+    <title>Unity Game</title>
+  </head>
+  <body>
+    <script src="Build/game.loader.js"></script>
+    <script>
+      createUnityInstance(canvas, config);
+    </script>
+  </body>
 </html>
 ```
 
@@ -395,20 +430,21 @@ Expected output (excerpt):
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Unity Game</title>
-  <script>
-  // Unity WebGL Polyfills
-  window.UnityProgress = ...
-  window.createUnityInstance = ...
-  </script>
-  <script>
-  // General game compatibility polyfills
-  if (typeof window.external === 'undefined') {
-    window.external = {};
-  }
-  </script>
-</head>
+  <head>
+    <title>Unity Game</title>
+    <script>
+      // Unity WebGL Polyfills
+      window.UnityProgress = ...
+      window.createUnityInstance = ...
+    </script>
+    <script>
+      // General game compatibility polyfills
+      if (typeof window.external === 'undefined') {
+        window.external = {};
+      }
+    </script>
+  </head>
+</html>
 ```
 
 ### Test Non-Unity HTML
@@ -418,12 +454,12 @@ Create test HTML file:
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Regular Game</title>
-</head>
-<body>
-  <p>Regular content</p>
-</body>
+  <head>
+    <title>Regular Game</title>
+  </head>
+  <body>
+    <p>Regular content</p>
+  </body>
 </html>
 ```
 
@@ -438,13 +474,14 @@ Expected output (excerpt):
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Regular Game</title>
-  <script>
-  // General game compatibility polyfills
-  // (Unity polyfills NOT injected)
-  </script>
-</head>
+  <head>
+    <title>Regular Game</title>
+    <script>
+      // General game compatibility polyfills
+      // (Unity polyfills NOT injected)
+    </script>
+  </head>
+</html>
 ```
 
 ### Test Non-HTML File
@@ -458,22 +495,23 @@ Expected: No polyfills injected (binary file returned as-is)
 ## Browser Compatibility
 
 Polyfills tested on:
+
 - Chrome 90+
 - Firefox 88+
 - Safari 14+
 - Edge 90+
 
 **Legacy browser support**:
+
 - IE 11: Limited support (some polyfills may not work)
 - Chrome < 50: AudioContext polyfill helps
 - Safari < 10: WebKit prefix polyfills help
 
 ## Performance Impact
 
-**HTML parsing**: ~1-5ms for typical game HTML
-**Regex matching**: <1ms for detection
-**String manipulation**: ~1-5ms for injection
-**Total overhead**: ~5-10ms per HTML file
+**HTML parsing**: ~1-5ms for typical game HTML **Regex matching**: <1ms for
+detection **String manipulation**: ~1-5ms for injection **Total overhead**:
+~5-10ms per HTML file
 
 **Memory impact**: Negligible (polyfills add ~2KB to HTML)
 
@@ -484,6 +522,7 @@ Polyfills tested on:
 ### No Unsafe Code
 
 Polyfills only add safe, read-only functions:
+
 - No eval()
 - No innerHTML manipulation
 - No DOM modifications
@@ -492,6 +531,7 @@ Polyfills only add safe, read-only functions:
 ### Injection Safety
 
 HTML is treated as string, not parsed as DOM:
+
 - No XSS risk from polyfill injection
 - Original content preserved
 - Only `<head>` tag modified
@@ -499,6 +539,7 @@ HTML is treated as string, not parsed as DOM:
 ### Console Logging
 
 Polyfills log to console for debugging:
+
 - No sensitive information logged
 - Helps developers troubleshoot issues
 - Can be disabled in production (future)
@@ -510,6 +551,7 @@ Polyfills log to console for debugging:
 **Symptom**: Unity game fails, no polyfills in HTML
 
 **Debug steps**:
+
 1. Check if Content-Type is `text/html`
 2. Verify HTML has `<head>` or `<html>` tag
 3. Check logs for injection message
@@ -522,6 +564,7 @@ Polyfills log to console for debugging:
 **Symptom**: Polyfills injected but game still fails
 
 **Debug steps**:
+
 1. Open browser console
 2. Check for errors before polyfills load
 3. Verify polyfill code is executed
@@ -534,6 +577,7 @@ Polyfills log to console for debugging:
 **Symptom**: Unity polyfills injected for non-Unity game
 
 **Debug steps**:
+
 1. Check HTML for Unity indicators
 2. Verify detection regex patterns
 3. Add exclusion pattern if needed
@@ -561,11 +605,8 @@ window.NewEngine = window.NewEngine || {
 
 ```typescript
 function needsNewEnginePolyfills(html: string): boolean {
-  const indicators = [
-    /NewEngine/i,
-    /newengine\.js/i
-  ];
-  return indicators.some(p => p.test(html));
+  const indicators = [/NewEngine/i, /newengine\.js/i];
+  return indicators.some((p) => p.test(html));
 }
 ```
 
@@ -610,7 +651,10 @@ curl http://localhost:22500/test-new.html | grep "NewEngine"
 
 ## References
 
-- Unity WebGL API: https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html
+- Unity WebGL API:
+  https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html
 - MDN Polyfills: https://developer.mozilla.org/en-US/docs/Glossary/Polyfill
-- WebKit AudioContext: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext
-- window.external: https://developer.mozilla.org/en-US/docs/Web/API/Window/external
+- WebKit AudioContext:
+  https://developer.mozilla.org/en-US/docs/Web/API/AudioContext
+- window.external:
+  https://developer.mozilla.org/en-US/docs/Web/API/Window/external
diff --git a/docs/05-game-service/legacy-server.md b/docs/05-game-service/legacy-server.md
index 28fb495..9481715 100644
--- a/docs/05-game-service/legacy-server.md
+++ b/docs/05-game-service/legacy-server.md
@@ -1,10 +1,12 @@
 # Legacy Server and Fallback Chain
 
-The Legacy Server implements a comprehensive fallback chain for serving legacy web content from multiple sources, ensuring maximum content availability.
+The Legacy Server implements a comprehensive fallback chain for serving legacy
+web content from multiple sources, ensuring maximum content availability.
 
 ## Overview
 
-Multi-level fallback system that checks local directories, external CDNs, and override paths for game files.
+Multi-level fallback system that checks local directories, external CDNs, and
+override paths for game files.
 
 ## Fallback Chain
 
@@ -56,6 +58,7 @@ private buildPathCandidates(relPath: string): Array<{path, type}> {
 ## Hostname Variations
 
 For hostname `mochibot.com`, tries:
+
 1. `mochibot.com` (original)
 2. `www.mochibot.com`
 3. `core.mochibot.com`
@@ -63,7 +66,8 @@ For hostname `mochibot.com`, tries:
 5. `cdn.mochibot.com`
 6. ... (12 more standard subdomains)
 
-**Why?** Games may request `mochibot.com` but Flashpoint stores it as `core.mochibot.com`.
+**Why?** Games may request `mochibot.com` but Flashpoint stores it as
+`core.mochibot.com`.
 
 ## Query String Handling
 
@@ -74,6 +78,7 @@ const pathWithoutQuery = relPath.split('?')[0];
 ```
 
 **Example:**
+
 - Request: `file.swf?v=123&cache=false`
 - Try: `file.swf?v=123` (exact match)
 - Try: `file.swf` (common case)
@@ -85,6 +90,7 @@ Files stored without query strings, so both are attempted.
 Override paths are special directories that take precedence over normal paths.
 
 **Configuration** (proxySettings.json):
+
 ```json
 {
   "legacyOverridePaths": ["custom", "fixes", "overrides"]
@@ -92,11 +98,13 @@ Override paths are special directories that take precedence over normal paths.
 ```
 
 **Example:**
+
 - Request: `www.example.com/game.swf`
 - Normal: `D:/Flashpoint/Legacy/htdocs/www.example.com/game.swf`
 - Override: `D:/Flashpoint/Legacy/htdocs/custom/www.example.com/game.swf`
 
 **Use cases:**
+
 - Patched game files
 - Fixed versions of broken content
 - Custom modifications
@@ -106,7 +114,7 @@ Override paths are special directories that take precedence over normal paths.
 ### Infinity Server (Primary CDN)
 
 ```typescript
-infinityServerURL: 'https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs/'
+infinityServerURL: 'https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs/';
 ```
 
 Official Flashpoint CDN for missing local files.
@@ -116,8 +124,8 @@ Official Flashpoint CDN for missing local files.
 ```typescript
 externalFilePaths: [
   'https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs',
-  'https://infinity.unstable.life/Flashpoint/Legacy/htdocs/'
-]
+  'https://infinity.unstable.life/Flashpoint/Legacy/htdocs/',
+];
 ```
 
 Backup CDNs tried in order.
@@ -138,6 +146,7 @@ private async tryExternalSource(baseUrl: string, relPath: string) {
 ```
 
 **Features:**
+
 - HTTPS enforced (HTTP auto-upgraded)
 - 45 second timeout
 - 5 redirect limit
@@ -155,28 +164,30 @@ if (settings.enableBrotli && filePath.endsWith('.br')) {
 ```
 
 **Example:**
+
 - Stored: `file.js.br` (Brotli compressed)
 - Decompressed: `file.js`
 - MIME: `text/javascript`
 
 ## Error Handling
 
-**File Not Found:**
-If no source has the file, returns 404 after all sources exhausted.
+**File Not Found:** If no source has the file, returns 404 after all sources
+exhausted.
 
-**Network Errors:**
-External downloads may fail (404, 403, timeout). Service continues to next source without aborting.
+**Network Errors:** External downloads may fail (404, 403, timeout). Service
+continues to next source without aborting.
 
-**Disk Errors:**
-Local file access failures (permissions, not found) continue to next candidate.
+**Disk Errors:** Local file access failures (permissions, not found) continue to
+next candidate.
 
-**Graceful Degradation:**
-Failures don't abort the chain; next source is tried.
+**Graceful Degradation:** Failures don't abort the chain; next source is tried.
 
 ## Performance Optimization
 
 ### Early Exit
+
 Stop as soon as file is found:
+
 ```typescript
 for (const candidate of pathCandidates) {
   const stats = await fs.stat(candidate.path);
@@ -191,12 +202,14 @@ Typically only 1-3 paths checked before finding file.
 ## Logging
 
 ### Path Resolution
+
 ```
 [LegacyServer] Trying: D:/Flashpoint/Legacy/htdocs/www.example.com/game.swf (exact)
 [LegacyServer] ✓ Found file: D:/Flashpoint/Legacy/htdocs/www.example.com/game.swf
 ```
 
 ### External Fallback
+
 ```
 [LegacyServer] File not found locally, trying external sources...
 [LegacyServer] Downloading: https://infinity.flashpointarchive.org/.../game.swf
@@ -219,7 +232,9 @@ EXTERNAL_FALLBACK_URLS=https://infinity.flashpointarchive.org/...,https://backup
 {
   "legacyOverridePaths": ["custom", "fixes"],
   "infinityServerURL": "https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs/",
-  "externalFilePaths": ["https://infinity.unstable.life/Flashpoint/Legacy/htdocs/"],
+  "externalFilePaths": [
+    "https://infinity.unstable.life/Flashpoint/Legacy/htdocs/"
+  ],
   "enableBrotli": true,
   "enableCGI": false
 }
@@ -241,12 +256,15 @@ curl http://localhost:22500/http://test.com/index.html
 ## Security
 
 ### Path Validation
+
 All paths normalized to prevent directory traversal:
+
 - Blocks `../../../etc/passwd`
 - Blocks absolute path escapes
 - Blocks URL-encoded traversal
 
 ### External CDN
+
 - HTTPS enforced
 - Timeouts prevent DoS
 - User-Agent header for tracking
diff --git a/docs/05-game-service/mime-types.md b/docs/05-game-service/mime-types.md
index 57440de..c8236ca 100644
--- a/docs/05-game-service/mime-types.md
+++ b/docs/05-game-service/mime-types.md
@@ -1,10 +1,12 @@
 # MIME Types
 
-The game-service supports 199+ MIME types for legacy web content, ensuring proper Content-Type headers for all file formats used in Flashpoint games.
+The game-service supports 199+ MIME types for legacy web content, ensuring
+proper Content-Type headers for all file formats used in Flashpoint games.
 
 ## Overview
 
 Accurate MIME type detection is critical for:
+
 - Browser rendering (HTML, CSS, JavaScript)
 - Plugin activation (Flash, Shockwave, Unity)
 - Media playback (audio, video)
@@ -35,11 +37,13 @@ export function getMimeType(extension: string): string {
 ```
 
 **Priority order**:
+
 1. Custom (Flashpoint legacy formats) - 199 types
 2. Standard (modern web formats) - 33 types
 3. Default (unknown types) - application/octet-stream
 
-**Rationale**: Custom types take priority because legacy formats (Flash, Director) may conflict with modern web standards.
+**Rationale**: Custom types take priority because legacy formats (Flash,
+Director) may conflict with modern web standards.
 
 ## Custom MIME Types
 
@@ -102,7 +106,8 @@ tgf: 'chemical/x-mdl-tgf',
 xyz: 'chemical/x-xyz',                  // XYZ coordinates
 ```
 
-**Use cases**: Chemistry education software, molecular visualization, scientific simulations
+**Use cases**: Chemistry education software, molecular visualization, scientific
+simulations
 
 ### Image Formats (18 types)
 
@@ -227,7 +232,8 @@ xar: 'application/vnd.xara',
 xpg: 'text/x-xpg',
 ```
 
-**Use cases**: Flash games, Java applets, Unity games, Silverlight apps, 3D viewers
+**Use cases**: Flash games, Java applets, Unity games, Silverlight apps, 3D
+viewers
 
 ### Compressed Formats (3 types)
 
@@ -419,6 +425,7 @@ res.end(fileData);
 ### Browser-Rendered Content
 
 Types that browsers render natively:
+
 - `text/html` - HTML pages
 - `text/css` - Stylesheets
 - `text/javascript` - Scripts
@@ -429,6 +436,7 @@ Types that browsers render natively:
 ### Plugin-Required Content
 
 Types that require browser plugins:
+
 - `application/x-shockwave-flash` - Flash
 - `application/x-director` - Shockwave
 - `application/java-archive` - Java
@@ -438,6 +446,7 @@ Types that require browser plugins:
 ### Download-Only Content
 
 Types that trigger downloads:
+
 - `application/octet-stream` - Binary files
 - `application/zip` - Archives
 - `application/pdf` - Documents (unless viewer installed)
@@ -453,20 +462,24 @@ res.setHeader('Content-Type', getMimeType(ext));
 res.setHeader('X-Content-Type-Options', 'nosniff');
 ```
 
-**Risk**: Browsers may misinterpret file types if Content-Type is wrong or missing.
+**Risk**: Browsers may misinterpret file types if Content-Type is wrong or
+missing.
 
 ### Script Execution
 
 Be cautious with script MIME types:
+
 - `text/javascript` - Executed by browser
 - `text/html` - May contain inline scripts
 - `application/x-php` - Never send without execution
 
-**Rule**: Never serve server-side scripts with executable MIME types unless intentional.
+**Rule**: Never serve server-side scripts with executable MIME types unless
+intentional.
 
 ### Default Fallback
 
 Unknown file types default to `application/octet-stream`:
+
 - Forces browser to download
 - Prevents execution
 - Safe fallback for unknown content
@@ -571,6 +584,7 @@ if (CUSTOM_MIME_TYPES[ext]) {
 ```
 
 **Benchmarks**:
+
 - Lookup time: <0.01ms
 - Memory overhead: ~50KB for all types
 - No performance impact on file serving
@@ -587,6 +601,7 @@ if (CUSTOM_MIME_TYPES[ext]) {
 ## References
 
 - IANA Media Types: https://www.iana.org/assignments/media-types/
-- MDN MIME Types: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
+- MDN MIME Types:
+  https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
 - Flashpoint proxySettings.json MIME types
 - Apache MIME types database
diff --git a/docs/05-game-service/proxy-server.md b/docs/05-game-service/proxy-server.md
index 3ca6898..67faf69 100644
--- a/docs/05-game-service/proxy-server.md
+++ b/docs/05-game-service/proxy-server.md
@@ -1,10 +1,12 @@
 # HTTP Proxy Server (Port 22500)
 
-The HTTP Proxy Server handles all HTTP requests for game content, implementing a multi-level fallback chain to ensure content availability.
+The HTTP Proxy Server handles all HTTP requests for game content, implementing a
+multi-level fallback chain to ensure content availability.
 
 ## Overview
 
-Replicates the functionality of the original FlashpointGameServer, providing legacy web content serving with intelligent fallback mechanisms.
+Replicates the functionality of the original FlashpointGameServer, providing
+legacy web content serving with intelligent fallback mechanisms.
 
 ## Server Configuration
 
@@ -15,9 +17,11 @@ await createHTTPProxyServer({
   proxyPort: 22500,
   legacyHTDOCSPath: 'D:/Flashpoint/Legacy/htdocs',
   gameDataPath: 'D:/Flashpoint/Data/Games',
-  externalFilePaths: ['https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs'],
+  externalFilePaths: [
+    'https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs',
+  ],
   allowCrossDomain: true,
-  chunkSize: 8192
+  chunkSize: 8192,
 });
 ```
 
@@ -25,16 +29,17 @@ await createHTTPProxyServer({
 
 ```typescript
 interface ProxyServerOptions {
-  proxyPort?: number;              // Default: 22500
-  legacyHTDOCSPath: string;        // Required
-  gameDataPath?: string;           // Optional
-  externalFilePaths?: string[];    // Optional
-  allowCrossDomain?: boolean;      // Default: true
-  chunkSize?: number;              // Default: 8192 bytes
+  proxyPort?: number; // Default: 22500
+  legacyHTDOCSPath: string; // Required
+  gameDataPath?: string; // Optional
+  externalFilePaths?: string[]; // Optional
+  allowCrossDomain?: boolean; // Default: true
+  chunkSize?: number; // Default: 8192 bytes
 }
 ```
 
 Server timeouts:
+
 - `timeout: 120000` (2 minutes for slow downloads)
 - `keepAliveTimeout: 65000` (65 seconds keep-alive)
 
@@ -45,18 +50,21 @@ Server timeouts:
 The proxy supports three URL formats:
 
 **1. Proxy-Style Requests**
+
 ```http
 GET http://www.example.com/path/file.swf HTTP/1.1
 Host: localhost:22500
 ```
 
 **2. Path-Based Requests**
+
 ```http
 GET /http://www.example.com/path/file.swf HTTP/1.1
 Host: localhost:22500
 ```
 
 **3. Standard Requests**
+
 ```http
 GET /path/file.swf HTTP/1.1
 Host: www.example.com
@@ -90,6 +98,7 @@ async handleRequest(req: IncomingMessage, res: ServerResponse) {
 ## Request Routing
 
 **Routing Chain:**
+
 1. Try GameZip Server (if available) - fast path
 2. Try Legacy Server (local + external)
 3. Send response or error
@@ -114,13 +123,15 @@ handleOptionsRequest(req, res) {
 ### Response Headers
 
 All responses include CORS headers when enabled:
+
 ```http
 Access-Control-Allow-Origin: *
 Access-Control-Allow-Methods: GET, POST, OPTIONS
 Access-Control-Allow-Headers: *
 ```
 
-**Why CORS required:** Flash games and web content make cross-domain requests for assets and API calls.
+**Why CORS required:** Flash games and web content make cross-domain requests
+for assets and API calls.
 
 ## HTML Polyfill Injection
 
@@ -142,12 +153,14 @@ private sendResponse(res: ServerResponse, data: Buffer, contentType: string) {
 ```
 
 **Polyfills Injected:**
+
 - Unity WebGL support
 - General browser compatibility shims
 
 ## Response Headers
 
 ### Standard Headers
+
 ```http
 HTTP/1.1 200 OK
 Content-Type: application/x-shockwave-flash
@@ -161,6 +174,7 @@ Access-Control-Allow-Origin: *
 ### Custom Headers
 
 **X-Source** - Indicates where file was served from:
+
 ```
 X-Source: local-htdocs           # Local htdocs
 X-Source: gamezipserver:game-123 # GameZip server
@@ -169,6 +183,7 @@ X-Source: https://example.com    # Secondary source
 ```
 
 **Cache-Control** - Files cached for 24 hours:
+
 ```http
 Cache-Control: public, max-age=86400
 ```
@@ -176,6 +191,7 @@ Cache-Control: public, max-age=86400
 ## Error Handling
 
 ### Error Types
+
 1. **400 Bad Request** - No URL provided
 2. **404 Not Found** - File not found in any source
 3. **500 Internal Server Error** - Unexpected error
@@ -199,7 +215,8 @@ private sendError(res: ServerResponse, statusCode: number, message: string) {
 }
 ```
 
-**Why CORS on errors?** Missing CORS headers from error responses causes browsers to hide the actual error message.
+**Why CORS on errors?** Missing CORS headers from error responses causes
+browsers to hide the actual error message.
 
 ## GameZip Integration
 
@@ -229,6 +246,7 @@ private async tryGameZipServer(hostname: string, urlPath: string) {
 ```
 
 **Performance:**
+
 - Local request: <5ms
 - External request: 100-500ms
 - Speedup: 20-100x faster for ZIP-served content
@@ -254,6 +272,7 @@ Reuses TCP connections, reduces handshake overhead.
 ```
 
 **Log Levels:**
+
 - DEBUG: Detailed path resolution
 - INFO: Request summary
 - WARN: Errors, missing files
@@ -262,8 +281,10 @@ Reuses TCP connections, reduces handshake overhead.
 ## Integration with Backend
 
 **Request Flow:**
+
 1. Frontend requests `/api/games/123/launch`
-2. Backend returns: `{"launchUrl": "http://localhost:22500/http://www.example.com/game.swf"}`
+2. Backend returns:
+   `{"launchUrl": "http://localhost:22500/http://www.example.com/game.swf"}`
 3. Frontend loads game in player iframe
 4. Proxy serves content with CORS headers
 
@@ -288,15 +309,17 @@ curl -I "http://localhost:22500/http://www.example.com/test.html"
 ## Configuration Examples
 
 ### Basic
+
 ```typescript
 await createHTTPProxyServer({
   proxyPort: 22500,
   legacyHTDOCSPath: 'D:/Flashpoint/Legacy/htdocs',
-  allowCrossDomain: true
+  allowCrossDomain: true,
 });
 ```
 
 ### Production
+
 ```typescript
 await createHTTPProxyServer({
   proxyPort: parseInt(process.env.PROXY_PORT || '22500'),
@@ -304,7 +327,7 @@ await createHTTPProxyServer({
   gameDataPath: config.gamesPath,
   externalFilePaths: (process.env.EXTERNAL_FALLBACK_URLS || '').split(','),
   allowCrossDomain: process.env.ALLOW_CROSS_DOMAIN !== 'false',
-  chunkSize: parseInt(process.env.PROXY_CHUNK_SIZE || '8192')
+  chunkSize: parseInt(process.env.PROXY_CHUNK_SIZE || '8192'),
 });
 ```
 
@@ -312,16 +335,19 @@ await createHTTPProxyServer({
 
 ### Path Traversal Prevention
 
-All file paths are normalized and validated to prevent directory traversal attacks.
+All file paths are normalized and validated to prevent directory traversal
+attacks.
 
 ### CORS Security
 
 CORS enabled by default because:
+
 - Game content requires cross-domain access
 - Service runs locally, not internet-facing
 - No sensitive data served
 
 For internet-facing deployments, configure specific origins:
+
 ```typescript
 res.setHeader('Access-Control-Allow-Origin', 'https://trusted-domain.com');
 ```
@@ -334,18 +360,21 @@ res.setHeader('Access-Control-Allow-Origin', 'https://trusted-domain.com');
 ## Troubleshooting
 
 ### Port Already in Use
+
 ```bash
 netstat -ano | findstr :22500
 PROXY_PORT=22510  # Change in .env
 ```
 
 ### File Not Found
+
 1. Verify Flashpoint path
 2. Check file exists in htdocs
 3. Verify external fallback URLs accessible
 4. Enable DEBUG logging
 
 ### CORS Errors
+
 - Verify `ALLOW_CROSS_DOMAIN=true`
 - Check response headers: `curl -I <url>`
 - Ensure error responses include CORS headers
diff --git a/docs/05-game-service/zip-manager.md b/docs/05-game-service/zip-manager.md
index 9f6164f..e69bc81 100644
--- a/docs/05-game-service/zip-manager.md
+++ b/docs/05-game-service/zip-manager.md
@@ -1,10 +1,14 @@
 # ZIP Manager
 
-The ZIP Manager provides zero-extraction ZIP archive access using node-stream-zip, enabling efficient game file serving without disk space overhead.
+The ZIP Manager provides zero-extraction ZIP archive access using
+node-stream-zip, enabling efficient game file serving without disk space
+overhead.
 
 ## Overview
 
-The ZIP Manager mounts ZIP archives in-memory and provides streaming access to files without extracting them to disk. This approach is ideal for serving game content from compressed archives while conserving disk space.
+The ZIP Manager mounts ZIP archives in-memory and provides streaming access to
+files without extracting them to disk. This approach is ideal for serving game
+content from compressed archives while conserving disk space.
 
 ## Architecture
 
@@ -43,10 +47,10 @@ The ZIP Manager mounts ZIP archives in-memory and provides streaming access to f
 
 ```typescript
 interface MountedZip {
-  id: string;                      // Unique mount identifier (e.g., "game-123")
-  zipPath: string;                 // Absolute path to ZIP file
-  zip: StreamZip.StreamZipAsync;  // node-stream-zip instance
-  mountTime: Date;                 // When ZIP was mounted
+  id: string; // Unique mount identifier (e.g., "game-123")
+  zipPath: string; // Absolute path to ZIP file
+  zip: StreamZip.StreamZipAsync; // node-stream-zip instance
+  mountTime: Date; // When ZIP was mounted
 }
 ```
 
@@ -56,14 +60,16 @@ interface MountedZip {
 export class ZipManager {
   private mountedZips: Map<string, MountedZip> = new Map();
 
-  async mount(id: string, zipPath: string): Promise<void>
-  async unmount(id: string): Promise<boolean>
-  async getFile(id: string, filePath: string): Promise<Buffer | null>
-  async findFile(relPath: string): Promise<{data: Buffer, mountId: string} | null>
-  async listFiles(id: string, pattern?: string): Promise<string[]>
-  isMounted(id: string): boolean
-  getMountedZips(): Array<{id, zipPath, mountTime, fileCount}>
-  async unmountAll(): Promise<void>
+  async mount(id: string, zipPath: string): Promise<void>;
+  async unmount(id: string): Promise<boolean>;
+  async getFile(id: string, filePath: string): Promise<Buffer | null>;
+  async findFile(
+    relPath: string
+  ): Promise<{ data: Buffer; mountId: string } | null>;
+  async listFiles(id: string, pattern?: string): Promise<string[]>;
+  isMounted(id: string): boolean;
+  getMountedZips(): Array<{ id; zipPath; mountTime; fileCount }>;
+  async unmountAll(): Promise<void>;
 }
 ```
 
@@ -115,8 +121,14 @@ await zipManager.mount('game-123', 'D:/Flashpoint/Data/Games/Flash/G/game.zip');
 await zipManager.mount('custom-archive', 'D:/Custom/archive.zip');
 
 // Mount multiple ZIPs
-await zipManager.mount('game-456', 'D:/Flashpoint/Data/Games/Flash/A/another.zip');
-await zipManager.mount('game-789', 'D:/Flashpoint/Data/Games/Unity/U/unity-game.zip');
+await zipManager.mount(
+  'game-456',
+  'D:/Flashpoint/Data/Games/Flash/A/another.zip'
+);
+await zipManager.mount(
+  'game-789',
+  'D:/Flashpoint/Data/Games/Unity/U/unity-game.zip'
+);
 ```
 
 ### Duplicate Mount Handling
@@ -128,7 +140,8 @@ await zipManager.mount('game-123', 'path/to/game.zip');
 await zipManager.mount('game-123', 'path/to/game.zip'); // Silent success, no-op
 ```
 
-**Rationale**: Idempotent operations simplify backend logic - no need to check mount status before mounting.
+**Rationale**: Idempotent operations simplify backend logic - no need to check
+mount status before mounting.
 
 ## Unmounting ZIPs
 
@@ -235,7 +248,10 @@ async getFile(id: string, filePath: string): Promise<Buffer | null> {
 
 ```typescript
 // Get specific file
-const data = await zipManager.getFile('game-123', 'content/www.example.com/game.swf');
+const data = await zipManager.getFile(
+  'game-123',
+  'content/www.example.com/game.swf'
+);
 if (data) {
   console.log(`Read ${data.length} bytes`);
 }
@@ -285,6 +301,7 @@ async findFile(relPath: string): Promise<{data: Buffer, mountId: string} | null>
 Different ZIPs may have different internal structures:
 
 **Type 1: Content prefix**
+
 ```
 game.zip
   └── content/
@@ -293,6 +310,7 @@ game.zip
 ```
 
 **Type 2: Htdocs prefix**
+
 ```
 game.zip
   └── htdocs/
@@ -301,6 +319,7 @@ game.zip
 ```
 
 **Type 3: No prefix**
+
 ```
 game.zip
   └── www.example.com/
@@ -308,6 +327,7 @@ game.zip
 ```
 
 **Type 4: Full path**
+
 ```
 game.zip
   └── Legacy/
@@ -321,10 +341,12 @@ The findFile() method tries all variations automatically.
 ### Search Performance
 
 **Complexity**: O(m × p) where:
+
 - m = number of mounted ZIPs
 - p = number of path variations (4)
 
 **Typical case**:
+
 - 10 ZIPs mounted
 - 4 path variations
 - First match on average: 2nd variation
@@ -332,6 +354,7 @@ The findFile() method tries all variations automatically.
 - Time: <10ms
 
 **Worst case**:
+
 - 100 ZIPs mounted
 - File not found
 - Total attempts: 400
@@ -379,24 +402,30 @@ const swfFiles = await zipManager.listFiles('game-123', '\\.swf$');
 console.log(`SWF files: ${swfFiles.length}`);
 
 // List files in specific directory
-const contentFiles = await zipManager.listFiles('game-123', '^content/www\\.example\\.com/');
+const contentFiles = await zipManager.listFiles(
+  'game-123',
+  '^content/www\\.example\\.com/'
+);
 console.log(`Content files: ${contentFiles.length}`);
 ```
 
 ### Performance Considerations
 
 **entries() Cost**:
+
 - First call: Loads ZIP index (~10-100ms)
 - Cached internally by node-stream-zip
 - Subsequent calls: O(1) hash table access
 
 **Memory Usage**:
+
 - Small ZIP (100 files): ~1MB for index
 - Medium ZIP (1,000 files): ~5MB
 - Large ZIP (10,000 files): ~50MB
 - Very large ZIP (100,000 files): ~500MB
 
-**Recommendation**: Don't list files on every request, use sparingly for debugging.
+**Recommendation**: Don't list files on every request, use sparingly for
+debugging.
 
 ## Mount Status
 
@@ -450,6 +479,7 @@ for (const mount of mounts) {
 ### Streaming (Current Approach)
 
 **Process**:
+
 1. Open ZIP file handle
 2. Read central directory index
 3. Locate file entry
@@ -459,12 +489,14 @@ for (const mount of mounts) {
 7. Return Buffer
 
 **Advantages**:
+
 - No disk space used for extraction
 - Fast for small files (<1MB)
 - No cleanup required
 - Multiple files accessed independently
 
 **Disadvantages**:
+
 - Each access requires decompression
 - CPU overhead for deflate
 - Memory spike for large files
@@ -473,17 +505,20 @@ for (const mount of mounts) {
 ### Extraction (Alternative)
 
 **Process**:
+
 1. Extract entire ZIP to disk
 2. Read files from extracted directory
 3. Cleanup on unmount
 
 **Advantages**:
+
 - Fast sequential access
 - No decompression overhead
 - Better for large files
 - OS filesystem cache benefits
 
 **Disadvantages**:
+
 - Requires disk space (2x ZIP size)
 - Extraction time on mount
 - Cleanup complexity
@@ -492,12 +527,14 @@ for (const mount of mounts) {
 ### When to Use Each
 
 **Streaming** (recommended for):
+
 - Many small files
 - Random access patterns
 - Limited disk space
 - Short-lived access
 
 **Extraction** (recommended for):
+
 - Few large files
 - Sequential access patterns
 - Abundant disk space
@@ -508,16 +545,19 @@ for (const mount of mounts) {
 ### Memory Usage Breakdown
 
 **Per mounted ZIP**:
+
 - ZIP handle: ~1KB
 - File index: ~5KB per 100 files
 - Example: 1,000 files = ~50KB
 
 **Per file access**:
+
 - File buffer: File size in memory
 - Decompression buffer: ~2x file size temporarily
 - Example: 1MB file = ~3MB peak memory
 
 **Total with 10 ZIPs (10,000 files each), 5 concurrent requests (1MB each)**:
+
 - ZIP indexes: 10 × 500KB = 5MB
 - File buffers: 5 × 1MB = 5MB
 - Decompression: 5 × 1MB = 5MB
@@ -528,6 +568,7 @@ for (const mount of mounts) {
 **Current implementation**: No limits
 
 **Recommended limits** (future):
+
 ```typescript
 const MAX_MOUNTED_ZIPS = 100;
 const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
@@ -550,18 +591,21 @@ console.log(`External: ${(usage.external / 1024 / 1024).toFixed(2)} MB`);
 ### Mount Errors
 
 **ZIP file not found**:
+
 ```typescript
 await zipManager.mount('game-123', '/invalid/path.zip');
 // Throws: Error: ZIP file not found: /invalid/path.zip
 ```
 
 **ZIP corrupted**:
+
 ```typescript
 await zipManager.mount('game-123', 'corrupted.zip');
 // Throws: Error from node-stream-zip
 ```
 
 **Permission denied**:
+
 ```typescript
 await zipManager.mount('game-123', 'no-permission.zip');
 // Throws: EACCES: permission denied
@@ -570,12 +614,14 @@ await zipManager.mount('game-123', 'no-permission.zip');
 ### File Access Errors
 
 **File not in ZIP**:
+
 ```typescript
 const data = await zipManager.getFile('game-123', 'missing.swf');
 // Returns: null (not an error)
 ```
 
 **ZIP not mounted**:
+
 ```typescript
 const data = await zipManager.getFile('not-mounted', 'file.swf');
 // Returns: null (not an error)
@@ -584,12 +630,14 @@ const data = await zipManager.getFile('not-mounted', 'file.swf');
 ### Unmount Errors
 
 **ZIP not mounted**:
+
 ```typescript
 const success = await zipManager.unmount('not-mounted');
 // Returns: false (not an error)
 ```
 
 **Unmount failed**:
+
 ```typescript
 const success = await zipManager.unmount('game-123');
 // Returns: false, logs error
@@ -678,18 +726,21 @@ describe('ZipManager', () => {
 Typical performance on modern SSD:
 
 **Mount time**:
+
 - Small ZIP (<100 files): 10-50ms
 - Medium ZIP (<1,000 files): 50-200ms
 - Large ZIP (<10,000 files): 200-1000ms
 - Very large ZIP (>10,000 files): 1-5 seconds
 
 **File access time**:
+
 - Small file (<100KB): 2-5ms
 - Medium file (<1MB): 5-20ms
 - Large file (<10MB): 20-100ms
 - Very large file (>10MB): 100-500ms
 
 **Memory usage**:
+
 - Per ZIP: 50KB - 500KB (index)
 - Per file: File size + decompression overhead
 
diff --git a/docs/06-api-reference/README.md b/docs/06-api-reference/README.md
index aa53bf4..7bd4d9b 100644
--- a/docs/06-api-reference/README.md
+++ b/docs/06-api-reference/README.md
@@ -4,12 +4,13 @@ Complete REST API reference for Flashpoint Web backend service.
 
 ## Base URL
 
-Development: `http://localhost:3100/api`
-Production: Configure via `DOMAIN` environment variable
+Development: `http://localhost:3100/api` Production: Configure via `DOMAIN`
+environment variable
 
 ## Authentication
 
 Most endpoints require JWT token in Authorization header:
+
 ```
 Authorization: Bearer <access_token>
 ```
@@ -19,6 +20,7 @@ Obtain tokens via `/api/auth/login` or `/api/auth/register`.
 ## Response Format
 
 ### Success Response
+
 ```json
 {
   "data": { ... },
@@ -27,6 +29,7 @@ Obtain tokens via `/api/auth/login` or `/api/auth/register`.
 ```
 
 ### Error Response
+
 ```json
 {
   "error": { "code": 400, "message": "Validation error: ..." }
@@ -46,11 +49,13 @@ Obtain tokens via `/api/auth/login` or `/api/auth/register`.
 
 ## Rate Limiting
 
-Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit-Remaining`, `X-RateLimit-Reset`.
+Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`,
+`X-RateLimit-Remaining`, `X-RateLimit-Reset`.
 
 ## API Endpoints
 
 ### Authentication
+
 - [POST /api/auth/login](./authentication-api.md#login)
 - [POST /api/auth/register](./authentication-api.md#register)
 - [POST /api/auth/refresh](./authentication-api.md#refresh-token)
@@ -58,6 +63,7 @@ Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit
 - [GET /api/auth/me](./authentication-api.md#get-current-user)
 
 ### Games
+
 - [GET /api/games](./games-api.md#search-games)
 - [GET /api/games/filter-options](./games-api.md#get-filter-options)
 - [GET /api/games/random](./games-api.md#get-random-game)
@@ -66,6 +72,7 @@ Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit
 - [GET /api/games/:id/related](./games-api.md#get-related-games)
 
 ### Users
+
 - [GET /api/users](./users-api.md#list-users)
 - [GET /api/users/:id](./users-api.md#get-user)
 - [POST /api/users](./users-api.md#create-user)
@@ -76,6 +83,7 @@ Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit
 - [PATCH /api/users/me/settings](./users-api.md#update-user-settings)
 
 ### Roles & Permissions
+
 - [GET /api/roles](./roles-api.md#list-roles)
 - [GET /api/roles/permissions](./roles-api.md#list-permissions)
 - [GET /api/roles/:id](./roles-api.md#get-role)
@@ -85,6 +93,7 @@ Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit
 - [DELETE /api/roles/:id](./roles-api.md#delete-role)
 
 ### Playlists
+
 - [GET /api/playlists](./playlists-api.md#list-playlists)
 - [GET /api/playlists/:id](./playlists-api.md#get-playlist)
 - [POST /api/playlists](./playlists-api.md#create-playlist)
@@ -93,6 +102,7 @@ Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit
 - [DELETE /api/playlists/:id](./playlists-api.md#delete-playlist)
 
 ### Favorites
+
 - [GET /api/favorites](./favorites-api.md#get-all-favorites)
 - [GET /api/favorites/game-ids](./favorites-api.md#get-favorite-game-ids)
 - [GET /api/favorites/games](./favorites-api.md#get-favorites-with-full-game-data)
@@ -105,6 +115,7 @@ Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit
 - [DELETE /api/favorites](./favorites-api.md#clear-all-favorites)
 
 ### Play Tracking
+
 - [POST /api/play/start](./play-tracking-api.md#start-session)
 - [POST /api/play/end](./play-tracking-api.md#end-session)
 - [GET /api/play/stats](./play-tracking-api.md#get-user-stats)
@@ -115,6 +126,7 @@ Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit
 - [GET /api/play/games-distribution](./play-tracking-api.md#get-games-distribution)
 
 ### Shared & Community Playlists
+
 - [GET /api/playlists/shared/:shareToken](./shared-playlists-api.md#get-shared-playlist-metadata)
 - [GET /api/playlists/shared/:shareToken/games](./shared-playlists-api.md#get-games-in-shared-playlist)
 - [POST /api/playlists/shared/:shareToken/clone](./shared-playlists-api.md#clone-shared-playlist-to-user-account)
@@ -124,10 +136,12 @@ Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit
 - [GET /api/games/:id/download/progress](./shared-playlists-api.md#monitor-download-progress-sse)
 
 ### Platforms & Tags
+
 - [GET /api/platforms](./platforms-tags-api.md#list-platforms)
 - [GET /api/tags](./platforms-tags-api.md#list-tags)
 
 ### Activities & Audit Logs
+
 - [GET /api/activities](./activities-api.md#list-activity-logs)
 - [GET /api/activities/stats](./activities-api.md#get-activity-statistics)
 - [GET /api/activities/trend](./activities-api.md#get-activity-trend)
@@ -135,6 +149,7 @@ Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit
 - [GET /api/activities/breakdown](./activities-api.md#get-activity-breakdown)
 
 ### Admin & Operations
+
 - [GET /api/health](./admin-api.md#basic-health-check)
 - [GET /api/health/detailed](./admin-api.md#detailed-health-check)
 - [GET /api/cache/stats](./admin-api.md#get-cache-statistics)
@@ -147,15 +162,17 @@ Default: 100 requests per 15 minutes. Headers: `X-RateLimit-Limit`, `X-RateLimit
 - [GET /api/github/stars](./admin-api.md#get-github-star-count)
 - [GET /api/settings/auth](./admin-api.md#get-auth-settings)
 - [PATCH /api/settings/auth](./admin-api.md#update-auth-settings)
-- [GET /game-files/*](./admin-api.md#get-game-file)
+- [GET /game-files/\*](./admin-api.md#get-game-file)
 
 ### Domains
+
 - [GET /api/domains](./domains-api.md#list-domains)
 - [POST /api/domains](./domains-api.md#add-domain)
 - [DELETE /api/domains/:id](./domains-api.md#delete-domain)
 - [PATCH /api/domains/:id/default](./domains-api.md#set-default-domain)
 
 ### System Settings
+
 - [GET /api/settings](./settings-api.md#get-all-settings)
 - [GET /api/settings/:category](./settings-api.md#get-category-settings)
 - [PATCH /api/settings/:category](./settings-api.md#update-category-settings)
diff --git a/docs/06-api-reference/activities-api.md b/docs/06-api-reference/activities-api.md
index c10f866..79191b3 100644
--- a/docs/06-api-reference/activities-api.md
+++ b/docs/06-api-reference/activities-api.md
@@ -1,20 +1,26 @@
 # Activities API
 
-Audit logs and activity statistics. All endpoints require `activities.read` permission and `enableStatistics` feature flag.
+Audit logs and activity statistics. All endpoints require `activities.read`
+permission and `enableStatistics` feature flag.
 
 ## List Activity Logs
 
 `GET /api/activities` - Requires `activities.read` permission
 
-Query params: `page` (default: 1), `limit` (default: 50, max: 100), `userId`, `username`, `action`, `resource`, `startDate`, `endDate`, `sortBy` (createdAt|username|action|resource|ipAddress, default: createdAt), `sortOrder` (asc|desc, default: desc)
+Query params: `page` (default: 1), `limit` (default: 50, max: 100), `userId`,
+`username`, `action`, `resource`, `startDate`, `endDate`, `sortBy`
+(createdAt|username|action|resource|ipAddress, default: createdAt), `sortOrder`
+(asc|desc, default: desc)
 
-Returns paginated array with id, userId, username, action, resource, resourceId, details, ipAddress, userAgent, createdAt.
+Returns paginated array with id, userId, username, action, resource, resourceId,
+details, ipAddress, userAgent, createdAt.
 
 ## Get Activity Statistics
 
 `GET /api/activities/stats` - Requires `activities.read` permission
 
-Query params: `timeRange` (24h|7d|30d, default: 24h) or custom `startDate`/`endDate`
+Query params: `timeRange` (24h|7d|30d, default: 24h) or custom
+`startDate`/`endDate`
 
 ```json
 {
@@ -38,33 +44,42 @@ Returns array with date, sessions, totalMinutes, uniqueGames for each day.
 
 ## Get Top Actions
 
-`GET /api/activities/top-actions?limit=10&timeRange=24h` - Requires `activities.read` permission
+`GET /api/activities/top-actions?limit=10&timeRange=24h` - Requires
+`activities.read` permission
 
-Query params: `limit` (default: 10, max: 50), `timeRange` (24h|7d|30d, default: 24h)
+Query params: `limit` (default: 10, max: 50), `timeRange` (24h|7d|30d, default:
+24h)
 
-Returns array with action, count, percentage, category, topResource, exampleActivity.
+Returns array with action, count, percentage, category, topResource,
+exampleActivity.
 
 ## Get Activity Breakdown
 
-`GET /api/activities/breakdown?groupBy=resource&limit=10` - Requires `activities.read` permission
+`GET /api/activities/breakdown?groupBy=resource&limit=10` - Requires
+`activities.read` permission
 
-Query params: `groupBy` (resource|user|ip, default: resource), `limit` (default: 10, max: 50), `timeRange` (24h|7d|30d, default: 24h)
+Query params: `groupBy` (resource|user|ip, default: resource), `limit` (default:
+10, max: 50), `timeRange` (24h|7d|30d, default: 24h)
 
-Returns array grouped by specified criteria with key, count, percentage, metadata.
+Returns array grouped by specified criteria with key, count, percentage,
+metadata.
 
 ## Activity Actions
 
 Common recorded actions:
 
-**Authentication:** auth.login, auth.login.failed, auth.logout, auth.register, auth.password.change, auth.token.refresh
+**Authentication:** auth.login, auth.login.failed, auth.logout, auth.register,
+auth.password.change, auth.token.refresh
 
 **Games:** games.launch, games.view, games.search
 
-**Playlists:** playlists.create, playlists.view, playlists.update, playlists.delete, playlists.add_game, playlists.remove_game
+**Playlists:** playlists.create, playlists.view, playlists.update,
+playlists.delete, playlists.add_game, playlists.remove_game
 
 **Users:** users.create, users.view, users.update, users.delete, users.settings
 
-**Roles & Permissions:** roles.create, roles.update, roles.delete, permissions.assign, permissions.revoke
+**Roles & Permissions:** roles.create, roles.update, roles.delete,
+permissions.assign, permissions.revoke
 
 ## Best Practices
 
diff --git a/docs/06-api-reference/admin-api.md b/docs/06-api-reference/admin-api.md
index 48741a8..5f96bd7 100644
--- a/docs/06-api-reference/admin-api.md
+++ b/docs/06-api-reference/admin-api.md
@@ -1,6 +1,7 @@
 # Admin & Operations API
 
-Administrative endpoints for system monitoring and maintenance. All endpoints require authentication and appropriate permissions unless otherwise noted.
+Administrative endpoints for system monitoring and maintenance. All endpoints
+require authentication and appropriate permissions unless otherwise noted.
 
 ## Health Endpoints
 
@@ -28,14 +29,20 @@ Returns `200 OK` (healthy) or `503 Service Unavailable` (unhealthy)
   "uptime": 86400,
   "databases": {
     "user": { "connected": true, "fileSizeBytes": 2097152 },
-    "flashpoint": { "connected": true, "fileSizeBytes": 5368709120, "lastModified": "2026-02-02T12:15:30Z" }
+    "flashpoint": {
+      "connected": true,
+      "fileSizeBytes": 5368709120,
+      "lastModified": "2026-02-02T12:15:30Z"
+    }
   },
   "cache": {
     "gameSearch": { "hits": 45230, "misses": 3421, "hitRate": 0.9296 },
     "permissions": { "hits": 12340, "misses": 234, "hitRate": 0.9812 }
   },
   "memory": { "heapUsed": 125829120, "heapTotal": 536870912 },
-  "services": { "gameService": { "available": true, "url": "http://localhost:22500" } }
+  "services": {
+    "gameService": { "available": true, "url": "http://localhost:22500" }
+  }
 }
 ```
 
@@ -45,7 +52,8 @@ Returns `200 OK` (healthy) or `503 Service Unavailable` (unhealthy)
 
 `GET /api/cache/stats` - Requires `settings.view` permission
 
-Returns cache performance metrics (gameSearch, permissions with size, hits, misses, hitRate).
+Returns cache performance metrics (gameSearch, permissions with size, hits,
+misses, hitRate).
 
 ### Clear Caches
 
@@ -67,7 +75,8 @@ Returns connected status, file size, game count, platform count, tag count.
 
 `POST /api/database/reload` - Requires `settings.update` permission
 
-Response: `{ "success": true, "previousGameCount": 62845, "newGameCount": 62847, "duration": 2345 }`
+Response:
+`{ "success": true, "previousGameCount": 62845, "newGameCount": 62847, "duration": 2345 }`
 
 Error: `400 Bad Request` if reload already in progress
 
@@ -77,17 +86,20 @@ Error: `400 Bad Request` if reload already in progress
 
 `GET /api/metrics/summary` - Requires `settings.view` permission
 
-Returns uptime, request stats, performance percentiles, cache hit rates, error counts.
+Returns uptime, request stats, performance percentiles, cache hit rates, error
+counts.
 
 ### Get Endpoint Metrics
 
 `GET /api/metrics/endpoints` - Requires `settings.view` permission
 
-Returns array of endpoints with method, path, call counts, response times, errors.
+Returns array of endpoints with method, path, call counts, response times,
+errors.
 
 ### Get Slowest Endpoints
 
-`GET /api/metrics/endpoints/slowest?limit=10` - Requires `settings.view` permission
+`GET /api/metrics/endpoints/slowest?limit=10` - Requires `settings.view`
+permission
 
 ### Get Cache Metrics
 
@@ -135,7 +147,8 @@ Error: `409 Conflict` if job already running
 
 ### Get Job Logs
 
-`GET /api/jobs/:jobId/logs?limit=50&offset=0` - Requires `settings.update` permission
+`GET /api/jobs/:jobId/logs?limit=50&offset=0` - Requires `settings.update`
+permission
 
 Returns paginated logs with timestamp, status, duration, message, details.
 
@@ -206,13 +219,15 @@ Returns game counts, platform distribution, archive size, user stats.
 
 `GET /api/settings/auth` - No auth required
 
-Returns guestAccessEnabled, userRegistrationEnabled, sessionTimeoutMinutes, maxLoginAttempts, lockoutDurationMinutes.
+Returns guestAccessEnabled, userRegistrationEnabled, sessionTimeoutMinutes,
+maxLoginAttempts, lockoutDurationMinutes.
 
 ### Update Auth Settings
 
 `PATCH /api/settings/auth` - Requires `settings.update` permission
 
-All fields optional. Validates ranges (sessionTimeoutMinutes: 0-10080, maxLoginAttempts: 1-10).
+All fields optional. Validates ranges (sessionTimeoutMinutes: 0-10080,
+maxLoginAttempts: 1-10).
 
 ## Game Files Endpoint
 
@@ -222,7 +237,8 @@ All fields optional. Validates ranges (sessionTimeoutMinutes: 0-10080, maxLoginA
 
 Returns file content with appropriate MIME type and CORS headers.
 
-Uses fallback chain: Game Service → Game Service GameZip → External CDN → Local cache
+Uses fallback chain: Game Service → Game Service GameZip → External CDN → Local
+cache
 
 Query parameter `cache=false` bypasses caching.
 
diff --git a/docs/06-api-reference/authentication-api.md b/docs/06-api-reference/authentication-api.md
index a254d9e..743c5ae 100644
--- a/docs/06-api-reference/authentication-api.md
+++ b/docs/06-api-reference/authentication-api.md
@@ -9,6 +9,7 @@ User authentication, registration, and token management.
 Body: `{ "username": "string (3-50)", "password": "string (min 6)" }`
 
 Returns `200 OK` with user object and tokens:
+
 ```json
 {
   "user": {
@@ -26,17 +27,20 @@ Returns `200 OK` with user object and tokens:
 }
 ```
 
-Error: `401 Unauthorized` (invalid credentials) or `429 Too Many Requests` (account locked after failed attempts)
+Error: `401 Unauthorized` (invalid credentials) or `429 Too Many Requests`
+(account locked after failed attempts)
 
 ## Register
 
 `POST /api/auth/register` - No auth required
 
-Body: `{ "username": "string (3-50)", "email": "valid-email", "password": "string (min 6)" }`
+Body:
+`{ "username": "string (3-50)", "email": "valid-email", "password": "string (min 6)" }`
 
 Returns `201 Created` with user and tokens (same format as login).
 
-Error: `403 Forbidden` (registration disabled) or `409 Conflict` (username/email exists)
+Error: `403 Forbidden` (registration disabled) or `409 Conflict` (username/email
+exists)
 
 ## Refresh Token
 
@@ -74,7 +78,7 @@ Error: `401 Unauthorized`
 // Login
 const { data } = await api.post('/auth/login', {
   username: 'john_doe',
-  password: 'password123'
+  password: 'password123',
 });
 
 localStorage.setItem('accessToken', data.tokens.accessToken);
@@ -85,7 +89,7 @@ const response = await api.get('/api/games');
 
 // On 401 - refresh token
 const refreshed = await api.post('/auth/refresh', {
-  refreshToken: localStorage.getItem('refreshToken')
+  refreshToken: localStorage.getItem('refreshToken'),
 });
 
 localStorage.setItem('accessToken', refreshed.data.accessToken);
@@ -93,7 +97,7 @@ localStorage.setItem('refreshToken', refreshed.data.refreshToken);
 
 // Logout
 await api.post('/auth/logout', {
-  refreshToken: localStorage.getItem('refreshToken')
+  refreshToken: localStorage.getItem('refreshToken'),
 });
 
 localStorage.removeItem('accessToken');
@@ -136,8 +140,8 @@ Common permissions returned in login/me:
 ```javascript
 // Axios interceptor for automatic token refresh
 api.interceptors.response.use(
-  response => response,
-  async error => {
+  (response) => response,
+  async (error) => {
     if (error.response?.status === 401) {
       const refreshToken = localStorage.getItem('refreshToken');
       const { data } = await axios.post('/api/auth/refresh', { refreshToken });
diff --git a/docs/06-api-reference/domains-api.md b/docs/06-api-reference/domains-api.md
index df73bc3..d8675ec 100644
--- a/docs/06-api-reference/domains-api.md
+++ b/docs/06-api-reference/domains-api.md
@@ -2,8 +2,8 @@
 
 Manage custom domains for playlist sharing URLs and CORS configuration.
 
-**Authentication:** Required (JWT Bearer token)
-**Permissions:** `settings.read` (list), `settings.update` (add, delete, set default)
+**Authentication:** Required (JWT Bearer token) **Permissions:** `settings.read`
+(list), `settings.update` (add, delete, set default)
 
 ## List Domains
 
@@ -12,6 +12,7 @@ Manage custom domains for playlist sharing URLs and CORS configuration.
 Returns all configured domains, ordered by default status then hostname.
 
 **Response:**
+
 ```json
 [
   {
@@ -36,6 +37,7 @@ Returns all configured domains, ordered by default status then hostname.
 Adds a new domain for CORS and share link configuration.
 
 **Request Body:**
+
 ```json
 {
   "hostname": "play.example.com"
@@ -43,6 +45,7 @@ Adds a new domain for CORS and share link configuration.
 ```
 
 **Validation Rules:**
+
 - No protocol prefix (`http://` or `https://` rejected)
 - No path, query string, or fragment (`/`, `?`, `#` rejected)
 - Ports allowed (e.g., `localhost:5173`)
@@ -50,6 +53,7 @@ Adds a new domain for CORS and share link configuration.
 - Case-insensitive uniqueness (stored lowercase)
 
 Returns `201 Created`:
+
 ```json
 {
   "id": 3,
@@ -60,7 +64,9 @@ Returns `201 Created`:
 ```
 
 Errors:
-- `400 Bad Request` - Invalid hostname format, duplicate hostname, or empty hostname
+
+- `400 Bad Request` - Invalid hostname format, duplicate hostname, or empty
+  hostname
 - `401 Unauthorized` - Authentication required
 - `403 Forbidden` - Insufficient permissions
 
@@ -68,9 +74,11 @@ Errors:
 
 `DELETE /api/domains/:id` - Requires `settings.update` permission
 
-Removes a domain. If the deleted domain was the default, no domain is default until one is explicitly set.
+Removes a domain. If the deleted domain was the default, no domain is default
+until one is explicitly set.
 
 Returns `200 OK`:
+
 ```json
 {
   "success": true
@@ -78,20 +86,24 @@ Returns `200 OK`:
 ```
 
 Errors:
+
 - `404 Not Found` - Domain not found
 
 ## Set Default Domain
 
 `PATCH /api/domains/:id/default` - Requires `settings.update` permission
 
-Sets the specified domain as the default. Clears the previous default in a transaction.
+Sets the specified domain as the default. Clears the previous default in a
+transaction.
 
 The default domain is:
+
 - Used in share links for non-admin users
 - Exposed via `GET /api/settings/public` as `domains.defaultDomain`
 - Returned to regular users through the `usePublicSettings()` hook
 
 Returns `200 OK`:
+
 ```json
 {
   "id": 1,
@@ -102,13 +114,17 @@ Returns `200 OK`:
 ```
 
 Errors:
+
 - `404 Not Found` - Domain not found
 
 ## CORS Integration
 
-All configured domains are automatically added to the backend's dynamic CORS whitelist. Both `http://` and `https://` variants are generated for each hostname.
+All configured domains are automatically added to the backend's dynamic CORS
+whitelist. Both `http://` and `https://` variants are generated for each
+hostname.
 
-The CORS cache refreshes every 60 seconds and is immediately invalidated when domains are added, deleted, or modified.
+The CORS cache refreshes every 60 seconds and is immediately invalidated when
+domains are added, deleted, or modified.
 
 ## Common Workflows
 
@@ -117,7 +133,7 @@ The CORS cache refreshes every 60 seconds and is immediately invalidated when do
 ```javascript
 // 1. Add domain
 const domain = await api.post('/domains', {
-  hostname: 'play.example.com'
+  hostname: 'play.example.com',
 });
 
 // 2. Make it default (used in share links)
@@ -138,7 +154,7 @@ const domains = await api.get('/domains');
 await api.delete(`/domains/${oldDomainId}`);
 
 // Set new default
-const newDefault = domains.find(d => d.hostname === 'new.example.com');
+const newDefault = domains.find((d) => d.hostname === 'new.example.com');
 await api.patch(`/domains/${newDefault.id}/default`);
 ```
 
@@ -163,7 +179,12 @@ const updated = await domainsApi.setDefault(1);
 **React Query Hooks:**
 
 ```typescript
-import { useDomains, useAddDomain, useDeleteDomain, useSetDefaultDomain } from '@/hooks/useDomains';
+import {
+  useDomains,
+  useAddDomain,
+  useDeleteDomain,
+  useSetDefaultDomain,
+} from '@/hooks/useDomains';
 
 const { data: domains, isLoading } = useDomains();
 const addMutation = useAddDomain();
@@ -174,14 +195,14 @@ const setDefaultMutation = useSetDefaultDomain();
 addMutation.mutate('play.example.com', {
   onSuccess: (newDomain) => {
     console.log('Domain added:', newDomain.hostname);
-  }
+  },
 });
 
 // Delete domain
 deleteMutation.mutate(1, {
   onSuccess: () => {
     console.log('Domain deleted');
-  }
+  },
 });
 
 // Set default (supports optimistic updates)
@@ -199,6 +220,9 @@ setDefaultMutation.mutate(1);
 
 ## Related
 
-- [Settings API](./settings-api.md) - Public settings include `domains.defaultDomain`
-- [System Settings Feature](../10-features/system-settings.md) - Domain Settings UI tab
-- [Database Schema](../12-reference/database-schema-reference.md) - `domains` table schema
+- [Settings API](./settings-api.md) - Public settings include
+  `domains.defaultDomain`
+- [System Settings Feature](../10-features/system-settings.md) - Domain Settings
+  UI tab
+- [Database Schema](../12-reference/database-schema-reference.md) - `domains`
+  table schema
diff --git a/docs/06-api-reference/favorites-api.md b/docs/06-api-reference/favorites-api.md
index 74b5cb4..43e7f98 100644
--- a/docs/06-api-reference/favorites-api.md
+++ b/docs/06-api-reference/favorites-api.md
@@ -22,7 +22,8 @@ Returns `{ "gameIds": ["uuid1", "uuid2", ...] }` for quick checks.
 
 `GET /api/favorites/games` - Requires `playlists.read` permission
 
-Query params: `limit`, `offset`, `sortBy` (title|dateAdded, default: dateAdded), `sortOrder` (asc|desc, default: desc)
+Query params: `limit`, `offset`, `sortBy` (title|dateAdded, default: dateAdded),
+`sortOrder` (asc|desc, default: desc)
 
 Returns array of game objects with full metadata including addedAt timestamp.
 
@@ -85,23 +86,26 @@ Returns `{ "removed": 47 }`
 ## Usage Examples
 
 ### Check if game is favorited
+
 ```javascript
 const { gameIds } = await api.get('/favorites/game-ids');
 const isFavorited = gameIds.includes(gameId);
 ```
 
 ### Batch operations (efficient)
+
 ```javascript
 // Adding 5 games = 1 rate limit unit
-await api.post('/favorites/batch', { gameIds: [1,2,3,4,5] });
+await api.post('/favorites/batch', { gameIds: [1, 2, 3, 4, 5] });
 
 // Adding 5 individually = 5 rate limit units (inefficient)
-for (const id of [1,2,3,4,5]) {
+for (const id of [1, 2, 3, 4, 5]) {
   await api.post('/favorites', { gameId: id });
 }
 ```
 
 ### Create playlist from favorites
+
 ```javascript
 const { gameIds } = await api.get('/favorites/game-ids');
 const playlist = await api.post('/playlists', { title: 'My Favorites' });
@@ -117,19 +121,20 @@ await api.post(`/playlists/${playlist.id}/games`, { gameIds });
 
 ## Permission Matrix
 
-| Endpoint | Method | Required Permission |
-|----------|--------|-------------------|
-| `/api/favorites` | GET | `playlists.read` |
-| `/api/favorites/game-ids` | GET | `playlists.read` |
-| `/api/favorites/games` | GET | `playlists.read` |
-| `/api/favorites/stats` | GET | `playlists.read` |
-| `/api/favorites/toggle` | POST | `playlists.create` |
-| `/api/favorites` | POST | `playlists.create` |
-| `/api/favorites/:gameId` | DELETE | `playlists.delete` |
-| `/api/favorites/batch` | POST | `playlists.create` |
-| `/api/favorites/batch` | DELETE | `playlists.delete` |
-| `/api/favorites` | DELETE | `playlists.delete` |
+| Endpoint                  | Method | Required Permission |
+| ------------------------- | ------ | ------------------- |
+| `/api/favorites`          | GET    | `playlists.read`    |
+| `/api/favorites/game-ids` | GET    | `playlists.read`    |
+| `/api/favorites/games`    | GET    | `playlists.read`    |
+| `/api/favorites/stats`    | GET    | `playlists.read`    |
+| `/api/favorites/toggle`   | POST   | `playlists.create`  |
+| `/api/favorites`          | POST   | `playlists.create`  |
+| `/api/favorites/:gameId`  | DELETE | `playlists.delete`  |
+| `/api/favorites/batch`    | POST   | `playlists.create`  |
+| `/api/favorites/batch`    | DELETE | `playlists.delete`  |
+| `/api/favorites`          | DELETE | `playlists.delete`  |
 
 ## Rate Limiting
 
-Subject to global rate limit (default: 100 requests per 15 minutes). Batch operations count as single request for efficiency.
+Subject to global rate limit (default: 100 requests per 15 minutes). Batch
+operations count as single request for efficiency.
diff --git a/docs/06-api-reference/games-api.md b/docs/06-api-reference/games-api.md
index ef6c849..bd4e131 100644
--- a/docs/06-api-reference/games-api.md
+++ b/docs/06-api-reference/games-api.md
@@ -6,15 +6,22 @@ Search, browse, and retrieve game information.
 
 `GET /api/games` - No auth required
 
-Query params: `search` (title/developer/publisher), `platform`, `series`, `developers`, `publishers`, `playModes`, `languages`, `library` (arcade|theatre), `tags`, `yearFrom`, `yearTo`, `sortBy` (title|releaseDate|dateAdded|developer, default: title), `sortOrder` (asc|desc, default: asc), `page` (default: 1), `limit` (default: 50, max: 100), `showBroken` (default: false), `showExtreme` (default: false)
+Query params: `search` (title/developer/publisher), `platform`, `series`,
+`developers`, `publishers`, `playModes`, `languages`, `library`
+(arcade|theatre), `tags`, `yearFrom`, `yearTo`, `sortBy`
+(title|releaseDate|dateAdded|developer, default: title), `sortOrder` (asc|desc,
+default: asc), `page` (default: 1), `limit` (default: 50, max: 100),
+`showBroken` (default: false), `showExtreme` (default: false)
 
-Returns paginated array with standard game fields (id, title, developer, publisher, platformName, releaseDate, tags, description, etc.).
+Returns paginated array with standard game fields (id, title, developer,
+publisher, platformName, releaseDate, tags, description, etc.).
 
 ## Get Filter Options
 
 `GET /api/games/filter-options` - No auth required
 
-Returns platforms, developers, publishers, series, playModes, languages arrays with name/code and count.
+Returns platforms, developers, publishers, series, playModes, languages arrays
+with name/code and count.
 
 ## Get Random Game
 
@@ -30,7 +37,11 @@ Error: `404 Not Found` if no games match criteria
 
 `GET /api/games/:id` - No auth required
 
-Returns full game object with all fields: id, title, alternateTitles, developer, publisher, platformName, releaseDate, version, series, playMode, status, notes, language, library, tags, description, launchCommand, applicationPath, source, originalDescription, presentOnDisk, activeDataOnDisk, activeDataId, broken, extreme, playCount, archiveState.
+Returns full game object with all fields: id, title, alternateTitles, developer,
+publisher, platformName, releaseDate, version, series, playMode, status, notes,
+language, library, tags, description, launchCommand, applicationPath, source,
+originalDescription, presentOnDisk, activeDataOnDisk, activeDataId, broken,
+extreme, playCount, archiveState.
 
 Error: `404 Not Found`
 
@@ -38,7 +49,8 @@ Error: `404 Not Found`
 
 `GET /api/games/:id/launch` - No auth required
 
-Returns gameId, title, platform, launchCommand, contentUrl (proxied through game-service), applicationPath, playMode, canPlayInBrowser.
+Returns gameId, title, platform, launchCommand, contentUrl (proxied through
+game-service), applicationPath, playMode, canPlayInBrowser.
 
 ## Get Related Games
 
@@ -60,39 +72,39 @@ await api.get('/games', {
     yearTo: 2010,
     sortBy: 'releaseDate',
     sortOrder: 'desc',
-    limit: 50
-  }
+    limit: 50,
+  },
 });
 
 // Multiple platforms
 await api.get('/games', {
-  params: { platform: 'Flash,HTML5,Unity' }
+  params: { platform: 'Flash,HTML5,Unity' },
 });
 
 // Search by text
 await api.get('/games', {
-  params: { search: 'platformer', limit: 20 }
+  params: { search: 'platformer', limit: 20 },
 });
 ```
 
 ## Game Data Fields
 
-| Field | Type | Description |
-|-------|------|-------------|
-| id | string (uuid) | Unique game identifier |
-| title | string | Game name |
-| platformName | string | Platform (Flash, HTML5, etc.) |
-| library | string | "arcade" (games) or "theatre" (animations) |
-| developer | string | Developer name |
-| publisher | string | Publisher name |
-| releaseDate | string (YYYY-MM-DD) | Original release date |
-| tags | string | Semicolon-separated tags |
-| description | string | Full description |
-| launchCommand | string | File/URL to launch |
-| broken | boolean | Known to be broken |
-| extreme | boolean | Contains extreme content |
-| presentOnDisk | boolean | Files available locally |
-| canPlayInBrowser | boolean | Playable via web (Flash/HTML5) |
+| Field            | Type                | Description                                |
+| ---------------- | ------------------- | ------------------------------------------ |
+| id               | string (uuid)       | Unique game identifier                     |
+| title            | string              | Game name                                  |
+| platformName     | string              | Platform (Flash, HTML5, etc.)              |
+| library          | string              | "arcade" (games) or "theatre" (animations) |
+| developer        | string              | Developer name                             |
+| publisher        | string              | Publisher name                             |
+| releaseDate      | string (YYYY-MM-DD) | Original release date                      |
+| tags             | string              | Semicolon-separated tags                   |
+| description      | string              | Full description                           |
+| launchCommand    | string              | File/URL to launch                         |
+| broken           | boolean             | Known to be broken                         |
+| extreme          | boolean             | Contains extreme content                   |
+| presentOnDisk    | boolean             | Files available locally                    |
+| canPlayInBrowser | boolean             | Playable via web (Flash/HTML5)             |
 
 ## Best Practices
 
diff --git a/docs/06-api-reference/platforms-tags-api.md b/docs/06-api-reference/platforms-tags-api.md
index 1289eba..9af8e99 100644
--- a/docs/06-api-reference/platforms-tags-api.md
+++ b/docs/06-api-reference/platforms-tags-api.md
@@ -28,7 +28,7 @@ Returns array with name, count. Sorted by count (highest first).
 
 ```javascript
 const games = await api.get('/games', {
-  params: { platform: 'Flash' }
+  params: { platform: 'Flash' },
 });
 ```
 
@@ -36,7 +36,7 @@ const games = await api.get('/games', {
 
 ```javascript
 const games = await api.get('/games', {
-  params: { platform: 'Flash,HTML5,Unity' }
+  params: { platform: 'Flash,HTML5,Unity' },
 });
 ```
 
@@ -58,8 +58,8 @@ const games = await api.get('/games', {
     platform: 'Flash',
     tags: 'Platformer',
     sortBy: 'releaseDate',
-    sortOrder: 'desc'
-  }
+    sortOrder: 'desc',
+  },
 });
 ```
 
@@ -70,9 +70,9 @@ const games = await api.get('/games', {
 ```javascript
 const { data: platforms } = await api.get('/platforms');
 
-const options = platforms.map(p => ({
+const options = platforms.map((p) => ({
   label: `${p.platform} (${p.count.toLocaleString()})`,
-  value: p.platform
+  value: p.platform,
 }));
 ```
 
@@ -88,7 +88,7 @@ class TagAutocomplete {
 
   filter(query) {
     const matches = this.tags
-      .filter(tag => tag.name.toLowerCase().includes(query.toLowerCase()))
+      .filter((tag) => tag.name.toLowerCase().includes(query.toLowerCase()))
       .slice(0, 10);
 
     this.showDropdown(matches);
@@ -100,11 +100,14 @@ class TagAutocomplete {
 
 Common tags organized by category:
 
-**Genres:** Action, Adventure, Platformer, Puzzle, RPG, Strategy, Shooter, Sports, Racing, Fighting
+**Genres:** Action, Adventure, Platformer, Puzzle, RPG, Strategy, Shooter,
+Sports, Racing, Fighting
 
-**Themes:** Fantasy, Sci-Fi, Horror, Mystery, Historical, Educational, Kids, Retro
+**Themes:** Fantasy, Sci-Fi, Horror, Mystery, Historical, Educational, Kids,
+Retro
 
-**Gameplay:** Multiplayer, Single Player, Turn-Based, Real-Time, Point-and-Click, Simulation
+**Gameplay:** Multiplayer, Single Player, Turn-Based, Real-Time,
+Point-and-Click, Simulation
 
 **Style:** Pixel Art, 3D, Cartoon, Realistic, Abstract, Anime
 
@@ -114,7 +117,8 @@ Platforms and tags change infrequently - ideal for caching:
 
 ```javascript
 class FilterCache {
-  constructor(ttl = 3600000) { // 1 hour
+  constructor(ttl = 3600000) {
+    // 1 hour
     this.ttl = ttl;
     this.cache = new Map();
   }
diff --git a/docs/06-api-reference/play-tracking-api.md b/docs/06-api-reference/play-tracking-api.md
index 07a0981..3cd5f00 100644
--- a/docs/06-api-reference/play-tracking-api.md
+++ b/docs/06-api-reference/play-tracking-api.md
@@ -22,25 +22,30 @@ Error: `404 Not Found` if session doesn't exist
 
 `GET /api/play/stats` - Requires `games.play` permission
 
-Returns totalSessions, totalPlayTimeMinutes, totalGamesPlayed, averageSessionMinutes, completedSessions, abandonedSessions, firstPlayedAt, lastPlayedAt.
+Returns totalSessions, totalPlayTimeMinutes, totalGamesPlayed,
+averageSessionMinutes, completedSessions, abandonedSessions, firstPlayedAt,
+lastPlayedAt.
 
 ## Get Game Stats
 
 `GET /api/play/game-stats?limit=50&offset=0` - Requires `games.play` permission
 
-Returns paginated array with gameId, gameTitle, totalSessions, totalPlayTimeMinutes, lastPlayedAt, firstPlayedAt, averageSessionMinutes.
+Returns paginated array with gameId, gameTitle, totalSessions,
+totalPlayTimeMinutes, lastPlayedAt, firstPlayedAt, averageSessionMinutes.
 
 ## Get Play History
 
 `GET /api/play/history?limit=50&offset=0` - Requires `games.play` permission
 
-Returns paginated array with sessionId, gameId, gameTitle, startedAt, endedAt, durationMinutes, completed.
+Returns paginated array with sessionId, gameId, gameTitle, startedAt, endedAt,
+durationMinutes, completed.
 
 ## Get Top Games
 
 `GET /api/play/top-games?limit=10` - Requires `games.play` permission
 
-Returns array sorted by total play time (descending) with gameId, gameTitle, totalSessions, totalPlayTimeMinutes, lastPlayedAt.
+Returns array sorted by total play time (descending) with gameId, gameTitle,
+totalSessions, totalPlayTimeMinutes, lastPlayedAt.
 
 ## Get Activity Over Time
 
@@ -48,20 +53,23 @@ Returns array sorted by total play time (descending) with gameId, gameTitle, tot
 
 Query param: `days` (default: 30, max: 365)
 
-Returns array with date, sessions, totalMinutes, uniqueGames for each day (includes days with 0 activity).
+Returns array with date, sessions, totalMinutes, uniqueGames for each day
+(includes days with 0 activity).
 
 ## Get Games Distribution
 
 `GET /api/play/games-distribution?limit=10` - Requires `games.play` permission
 
-Returns pie chart data with gameTitle, playTimeMinutes, percentage. Games beyond limit grouped as "Others".
+Returns pie chart data with gameTitle, playTimeMinutes, percentage. Games beyond
+limit grouped as "Others".
 
 ## Session Management Pattern
 
 ```javascript
 class PlaySessionManager {
   async start(gameId, gameTitle, token) {
-    const { data } = await axios.post('/api/play/start',
+    const { data } = await axios.post(
+      '/api/play/start',
       { gameId, gameTitle },
       { headers: { Authorization: `Bearer ${token}` } }
     );
@@ -72,7 +80,8 @@ class PlaySessionManager {
   async end() {
     if (!this.sessionId) return;
     try {
-      await axios.post('/api/play/end',
+      await axios.post(
+        '/api/play/end',
         { sessionId: this.sessionId },
         { headers: { Authorization: `Bearer ${token}` } }
       );
@@ -91,17 +100,25 @@ class PlaySessionManager {
 ```javascript
 async function loadStatsDashboard(token) {
   const [stats, topGames, activity, distribution] = await Promise.all([
-    axios.get('/api/play/stats', { headers: { Authorization: `Bearer ${token}` } }),
-    axios.get('/api/play/top-games?limit=5', { headers: { Authorization: `Bearer ${token}` } }),
-    axios.get('/api/play/activity-over-time?days=30', { headers: { Authorization: `Bearer ${token}` } }),
-    axios.get('/api/play/games-distribution?limit=10', { headers: { Authorization: `Bearer ${token}` } })
+    axios.get('/api/play/stats', {
+      headers: { Authorization: `Bearer ${token}` },
+    }),
+    axios.get('/api/play/top-games?limit=5', {
+      headers: { Authorization: `Bearer ${token}` },
+    }),
+    axios.get('/api/play/activity-over-time?days=30', {
+      headers: { Authorization: `Bearer ${token}` },
+    }),
+    axios.get('/api/play/games-distribution?limit=10', {
+      headers: { Authorization: `Bearer ${token}` },
+    }),
   ]);
 
   return {
     overview: stats.data,
     topGames: topGames.data,
     activityChart: activity.data,
-    distributionChart: distribution.data
+    distributionChart: distribution.data,
   };
 }
 ```
@@ -117,7 +134,8 @@ async function loadStatsDashboard(token) {
 
 ## Notes
 
-- Sessions have three states: Active, Completed, Abandoned (auto-cleaned after 24h)
+- Sessions have three states: Active, Completed, Abandoned (auto-cleaned after
+  24h)
 - Cleanup job runs every 6 hours
 - Play time rounded to minutes
 - Backend batches session writes for efficiency
diff --git a/docs/06-api-reference/playlists-api.md b/docs/06-api-reference/playlists-api.md
index 4221adb..6449fb8 100644
--- a/docs/06-api-reference/playlists-api.md
+++ b/docs/06-api-reference/playlists-api.md
@@ -6,13 +6,15 @@ Manage curated game collections.
 
 `GET /api/playlists` - No auth required
 
-Returns array with id, title, description, author, icon, library, extreme, gameCount.
+Returns array with id, title, description, author, icon, library, extreme,
+gameCount.
 
 ## Get Playlist
 
 `GET /api/playlists/:id` - No auth required
 
-Returns full playlist with games array (id, title, developer, platformName, releaseDate, tags, description).
+Returns full playlist with games array (id, title, developer, platformName,
+releaseDate, tags, description).
 
 Error: `404 Not Found`
 
@@ -20,7 +22,8 @@ Error: `404 Not Found`
 
 `POST /api/playlists` - Optional auth
 
-Body: `{ "title": "string (required)", "description": "string (optional)", "author": "string (optional)", "icon": "string (optional)", "library": "arcade"|"theatre" (optional), "extreme": boolean (optional) }`
+Body:
+`{ "title": "string (required)", "description": "string (optional)", "author": "string (optional)", "icon": "string (optional)", "library": "arcade"|"theatre" (optional), "extreme": boolean (optional) }`
 
 Returns `201 Created` with new playlist (empty games array).
 
@@ -58,16 +61,16 @@ const playlist = await api.post('/playlists', {
   title: 'My Favorite Platformers',
   description: 'Collection of favorites',
   author: 'john_doe',
-  library: 'arcade'
+  library: 'arcade',
 });
 
 // 2. Search for games
 const results = await api.get('/games', {
-  params: { tags: 'Platformer', platform: 'Flash', limit: 20 }
+  params: { tags: 'Platformer', platform: 'Flash', limit: 20 },
 });
 
 // 3. Add games
-const gameIds = results.games.slice(0, 10).map(g => g.id);
+const gameIds = results.games.slice(0, 10).map((g) => g.id);
 await api.post(`/playlists/${playlist.id}/games`, { gameIds });
 ```
 
@@ -81,7 +84,7 @@ const exported = {
   description: playlist.description,
   author: playlist.author,
   library: playlist.library,
-  gameIds: playlist.games.map(g => g.id)
+  gameIds: playlist.games.map((g) => g.id),
 };
 
 // Save to file
@@ -101,7 +104,7 @@ const playlist = await api.post('/playlists', {
   title: `${username}'s Favorites`,
   description: 'Personal favorite games',
   author: username,
-  library: 'arcade'
+  library: 'arcade',
 });
 await api.post(`/playlists/${playlist.id}/games`, { gameIds });
 ```
diff --git a/docs/06-api-reference/roles-api.md b/docs/06-api-reference/roles-api.md
index 7496f49..fcf4f80 100644
--- a/docs/06-api-reference/roles-api.md
+++ b/docs/06-api-reference/roles-api.md
@@ -6,7 +6,8 @@ Manage role-based access control (RBAC).
 
 `GET /api/roles` - Requires `roles.read` permission
 
-Returns array of roles with id, name, description, priority, isSystem, createdAt, permissions array.
+Returns array of roles with id, name, description, priority, isSystem,
+createdAt, permissions array.
 
 ## List Permissions
 
@@ -28,7 +29,8 @@ Error: `404 Not Found`
 
 `POST /api/roles` - Requires `roles.create` permission
 
-Body: `{ "name": "string (3-50 chars)", "description": "optional", "priority": integer, "permissionIds": [1, 2, ...] }`
+Body:
+`{ "name": "string (3-50 chars)", "description": "optional", "priority": integer, "permissionIds": [1, 2, ...] }`
 
 Returns `201 Created` with new role.
 
@@ -38,7 +40,8 @@ Error: `409 Conflict` if name already exists
 
 `PATCH /api/roles/:id` - Requires `roles.update` permission
 
-Body (all optional): `{ "name": "string", "description": "string", "priority": integer }`
+Body (all optional):
+`{ "name": "string", "description": "string", "priority": integer }`
 
 Cannot modify system roles (admin, user, moderator, guest).
 
@@ -62,18 +65,19 @@ Returns `{ "success": true }`
 
 ## System Roles
 
-| Role | ID | Priority | Description |
-|------|----|---------:|-------------|
-| admin | 1 | 100 | Full system access |
-| user | 2 | 10 | Standard user |
-| moderator | 3 | 50 | Limited admin |
-| guest | 4 | 1 | Read-only |
+| Role      | ID  | Priority | Description        |
+| --------- | --- | -------: | ------------------ |
+| admin     | 1   |      100 | Full system access |
+| user      | 2   |       10 | Standard user      |
+| moderator | 3   |       50 | Limited admin      |
+| guest     | 4   |        1 | Read-only          |
 
 ## Permission Categories
 
 **Games:** games.play, games.read, games.download
 
-**Playlists:** playlists.create, playlists.update, playlists.delete, playlists.manage
+**Playlists:** playlists.create, playlists.update, playlists.delete,
+playlists.manage
 
 **Users:** users.read, users.create, users.update, users.delete
 
@@ -94,14 +98,17 @@ Returns `{ "success": true }`
 ```javascript
 const permissions = await api.get('/roles/permissions');
 const contentPerms = permissions
-  .filter(p => p.category === 'games' ||
-    (p.category === 'playlists' && p.name !== 'playlists.delete'))
-  .map(p => p.id);
+  .filter(
+    (p) =>
+      p.category === 'games' ||
+      (p.category === 'playlists' && p.name !== 'playlists.delete')
+  )
+  .map((p) => p.id);
 
 await api.post('/roles', {
   name: 'content_manager',
   description: 'Manages game content and playlists',
   priority: 40,
-  permissionIds: contentPerms
+  permissionIds: contentPerms,
 });
 ```
diff --git a/docs/06-api-reference/settings-api.md b/docs/06-api-reference/settings-api.md
index e4226cf..7db3dc1 100644
--- a/docs/06-api-reference/settings-api.md
+++ b/docs/06-api-reference/settings-api.md
@@ -2,8 +2,8 @@
 
 Manage system-wide configuration settings.
 
-**Authentication:** Required (JWT Bearer token)
-**Permissions:** `settings.read` (view), `settings.update` (modify)
+**Authentication:** Required (JWT Bearer token) **Permissions:** `settings.read`
+(view), `settings.update` (modify)
 
 ## Get All Settings
 
@@ -49,7 +49,8 @@ Returns keyCount, categoryCount, hitRate, size.
 
 `POST /api/settings/_cache/clear` - Admin only
 
-Body (optional): `{ "category": "auth" }` (clear specific category or all if not provided)
+Body (optional): `{ "category": "auth" }` (clear specific category or all if not
+provided)
 
 ### Get Permission Cache Stats
 
@@ -60,40 +61,43 @@ Body (optional): `{ "category": "auth" }` (clear specific category or all if not
 `POST /_cache/permissions/clear` - Admin only
 
 Body options:
+
 - `{ "type": "user", "id": 5 }` - Clear user 5
 - `{ "type": "role", "id": 2 }` - Clear role 2
 - `{ "type": "all" }` or `{}` - Clear all
 
 ## Settings Categories
 
-| Category | Setting | Type | Default | Validation |
-|----------|---------|------|---------|-----------|
-| auth | guestAccessEnabled | boolean | true | - |
-| auth | userRegistrationEnabled | boolean | true | - |
-| auth | maxLoginAttempts | number | 5 | 1-20 |
-| auth | lockoutDurationMinutes | number | 15 | 1-1440 |
-| app | siteName | string | Flashpoint Web | maxLength: 100 |
-| app | maintenanceMode | boolean | false | - |
-| app | defaultTheme | string | dark | light\|dark\|system |
-| app | defaultPrimaryColor | string | blue | blue\|green\|red\|purple\|orange\|pink |
-| metadata | autoSyncEnabled | boolean | false | - |
-| metadata | syncIntervalMinutes | number | 60 | 0-1440 |
-| features | enablePlaylists | boolean | true | - |
-| features | enableFavorites | boolean | true | - |
-| features | enableStatistics | boolean | true | - |
-| features | enableActivityLog | boolean | true | - |
-| game | defaultScaleMode | string | showall | showall\|exactfit\|noborder\|noscale |
-| game | defaultVolume | number | 0.7 | 0-1 |
+| Category | Setting                 | Type    | Default        | Validation                             |
+| -------- | ----------------------- | ------- | -------------- | -------------------------------------- |
+| auth     | guestAccessEnabled      | boolean | true           | -                                      |
+| auth     | userRegistrationEnabled | boolean | true           | -                                      |
+| auth     | maxLoginAttempts        | number  | 5              | 1-20                                   |
+| auth     | lockoutDurationMinutes  | number  | 15             | 1-1440                                 |
+| app      | siteName                | string  | Flashpoint Web | maxLength: 100                         |
+| app      | maintenanceMode         | boolean | false          | -                                      |
+| app      | defaultTheme            | string  | dark           | light\|dark\|system                    |
+| app      | defaultPrimaryColor     | string  | blue           | blue\|green\|red\|purple\|orange\|pink |
+| metadata | autoSyncEnabled         | boolean | false          | -                                      |
+| metadata | syncIntervalMinutes     | number  | 60             | 0-1440                                 |
+| features | enablePlaylists         | boolean | true           | -                                      |
+| features | enableFavorites         | boolean | true           | -                                      |
+| features | enableStatistics        | boolean | true           | -                                      |
+| features | enableActivityLog       | boolean | true           | -                                      |
+| game     | defaultScaleMode        | string  | showall        | showall\|exactfit\|noborder\|noscale   |
+| game     | defaultVolume           | number  | 0.7            | 0-1                                    |
 
 ## Implementation Notes
 
 **Caching:** Settings cached 60 seconds (in-memory). Auto-invalidated on update.
 
-**Validation:** All updates validated against JSON schemas. Type, range, and enum validation enforced.
+**Validation:** All updates validated against JSON schemas. Type, range, and
+enum validation enforced.
 
 ## Public Settings: Domain Injection
 
-The `GET /api/settings/public` endpoint includes an additional `domains` object injected at runtime (not stored in the `system_settings` table):
+The `GET /api/settings/public` endpoint includes an additional `domains` object
+injected at runtime (not stored in the `system_settings` table):
 
 ```json
 {
@@ -105,13 +109,15 @@ The `GET /api/settings/public` endpoint includes an additional `domains` object
 }
 ```
 
-This is managed via the separate `/api/domains` endpoints (see [Domains API](./domains-api.md)).
+This is managed via the separate `/api/domains` endpoints (see
+[Domains API](./domains-api.md)).
 
 ## Frontend Integration
 
 **Caching:** Settings cached 60 seconds (in-memory). Auto-invalidated on update.
 
-**Validation:** All updates validated against JSON schemas. Type, range, and enum validation enforced.
+**Validation:** All updates validated against JSON schemas. Type, range, and
+enum validation enforced.
 
 **Frontend Integration:**
 
@@ -127,11 +133,14 @@ const auth = await systemSettingsApi.getCategory('auth');
 // Update category
 await systemSettingsApi.updateCategory('auth', {
   guestAccessEnabled: false,
-  maxLoginAttempts: 3
+  maxLoginAttempts: 3,
 });
 
 // Get single
-const { value } = await systemSettingsApi.getSetting('auth', 'guestAccessEnabled');
+const { value } = await systemSettingsApi.getSetting(
+  'auth',
+  'guestAccessEnabled'
+);
 
 // Update single
 await systemSettingsApi.updateSetting('auth', 'guestAccessEnabled', false);
diff --git a/docs/06-api-reference/shared-playlists-api.md b/docs/06-api-reference/shared-playlists-api.md
index fd9ca88..7e8f5d8 100644
--- a/docs/06-api-reference/shared-playlists-api.md
+++ b/docs/06-api-reference/shared-playlists-api.md
@@ -6,7 +6,8 @@
 
 `GET /api/playlists/shared/:shareToken` - No auth required
 
-Returns id, title, description, icon (base64), gameCount, createdAt, updatedAt, ownerUsername (if enabled).
+Returns id, title, description, icon (base64), gameCount, createdAt, updatedAt,
+ownerUsername (if enabled).
 
 Error: `404 Not Found` or `410 Gone` (if revoked).
 
@@ -14,17 +15,20 @@ Error: `404 Not Found` or `410 Gone` (if revoked).
 
 `GET /api/playlists/shared/:shareToken/games` - No auth required
 
-Returns array of game objects with id, title, platform, developer, publisher, releaseDate, thumbnail, launchCommand.
+Returns array of game objects with id, title, platform, developer, publisher,
+releaseDate, thumbnail, launchCommand.
 
 ### Validate Game in Shared Playlist
 
-`GET /api/playlists/shared/:shareToken/games/:gameId/validate` - No auth required
+`GET /api/playlists/shared/:shareToken/games/:gameId/validate` - No auth
+required
 
 Returns `{ "valid": true|false }`
 
 ### Generate Temporary Access Token
 
-`POST /api/playlists/shared/:shareToken/generate-access-token` - No auth required
+`POST /api/playlists/shared/:shareToken/generate-access-token` - No auth
+required
 
 Returns `{ "accessToken": "jwt...", "expiresIn": 3600, "playlistId": 42 }`
 
@@ -32,11 +36,13 @@ Token valid for 60 minutes.
 
 ### Clone Shared Playlist to User Account
 
-`POST /api/playlists/shared/:shareToken/clone` - Requires `playlists.create` permission
+`POST /api/playlists/shared/:shareToken/clone` - Requires `playlists.create`
+permission
 
 Body (optional): `{ "newTitle": "My Retro Games Collection" }`
 
-Returns `201 Created` with cloned playlist details. Original playlist not modified.
+Returns `201 Created` with cloned playlist details. Original playlist not
+modified.
 
 ## Community Playlists
 
@@ -44,7 +50,8 @@ Returns `201 Created` with cloned playlist details. Original playlist not modifi
 
 `GET /api/community-playlists` - Optional auth
 
-Returns categories array with name and playlists (fetched from official Flashpoint wiki). Cached 24 hours.
+Returns categories array with name and playlists (fetched from official
+Flashpoint wiki). Cached 24 hours.
 
 ```json
 {
@@ -74,7 +81,8 @@ Returns categories array with name and playlists (fetched from official Flashpoi
 
 Body: `{ "downloadUrl": "https://..." }`
 
-Returns `201 Created` with playlist details. Authenticated users save to account; anonymous users get in-memory response.
+Returns `201 Created` with playlist details. Authenticated users save to
+account; anonymous users get in-memory response.
 
 ## Game Downloads
 
@@ -92,7 +100,8 @@ Error: `409 Conflict` if already downloading or exists.
 
 `GET /api/games/:id/download/progress` - Requires `games.download` permission
 
-Server-sent events with events: `progress` (percent, status: downloading|validating|importing), `complete`, `error`.
+Server-sent events with events: `progress` (percent, status:
+downloading|validating|importing), `complete`, `error`.
 
 ```javascript
 const eventSource = new EventSource('/api/games/game-123/download/progress');
@@ -124,7 +133,8 @@ Headers: `X-RateLimit-Limit`, `X-RateLimit-Remaining`, `X-RateLimit-Reset`
 
 ## Error Responses
 
-All follow format: `{ "error": "Type", "message": "...", "code": "CODE", "statusCode": 400 }`
+All follow format:
+`{ "error": "Type", "message": "...", "code": "CODE", "statusCode": 400 }`
 
 Common codes:
 
diff --git a/docs/06-api-reference/users-api.md b/docs/06-api-reference/users-api.md
index 48498b3..97e2327 100644
--- a/docs/06-api-reference/users-api.md
+++ b/docs/06-api-reference/users-api.md
@@ -8,7 +8,8 @@ Manage user accounts and settings.
 
 Query params: `page` (default: 1), `limit` (default: 50)
 
-Returns paginated array with id, username, email, roleId, roleName, isActive, createdAt, lastLoginAt.
+Returns paginated array with id, username, email, roleId, roleName, isActive,
+createdAt, lastLoginAt.
 
 ## Get User
 
@@ -22,7 +23,8 @@ Error: `404 Not Found`
 
 `POST /api/users` - Requires `users.create` permission
 
-Body: `{ "username": "string (3-50)", "email": "valid-email", "password": "string (min 6)", "roleId": integer, "isActive": boolean (optional) }`
+Body:
+`{ "username": "string (3-50)", "email": "valid-email", "password": "string (min 6)", "roleId": integer, "isActive": boolean (optional) }`
 
 Returns `201 Created` with new user.
 
@@ -32,7 +34,8 @@ Error: `409 Conflict` if username/email exists
 
 `PATCH /api/users/:id` - Requires `users.update` permission
 
-Body (all optional): `{ "email": "valid-email", "roleId": integer, "isActive": boolean }`
+Body (all optional):
+`{ "email": "valid-email", "roleId": integer, "isActive": boolean }`
 
 Error: `409 Conflict` if new email already exists
 
@@ -46,7 +49,8 @@ Error: `400 Bad Request` if last admin
 
 ## Change Password
 
-`POST /api/users/:id/change-password` - Users can change own, admins can change any (requires `users.update`)
+`POST /api/users/:id/change-password` - Users can change own, admins can change
+any (requires `users.update`)
 
 Body: `{ "currentPassword": "string", "newPassword": "string (min 6)" }`
 
@@ -57,6 +61,7 @@ Error: `401 Unauthorized` if current password incorrect
 `GET /api/users/me/settings` - Requires authentication
 
 Returns key-value pairs (stored as strings). Common keys:
+
 - theme_mode (light|dark|system)
 - primary_color (blue|green|red|purple|orange|pink)
 - game_view_mode (grid|list)
diff --git a/docs/07-design-system/README.md b/docs/07-design-system/README.md
index 7f4737c..80a58d8 100644
--- a/docs/07-design-system/README.md
+++ b/docs/07-design-system/README.md
@@ -1,6 +1,8 @@
 # Design System Overview
 
-The Flashpoint Web design system provides a consistent, accessible, and beautiful UI framework built on Tailwind CSS, Shadcn UI components, and Lucide icons.
+The Flashpoint Web design system provides a consistent, accessible, and
+beautiful UI framework built on Tailwind CSS, Shadcn UI components, and Lucide
+icons.
 
 ## Technology Stack
 
@@ -93,6 +95,7 @@ function Example() {
 ## Color System
 
 11 semantic color roles:
+
 - **Primary** - Brand color (22 user-customizable options)
 - **Secondary** - Secondary actions
 - **Destructive** - Errors and destructive actions
@@ -107,11 +110,10 @@ function Example() {
 
 ## Component Categories
 
-**Layout:** Card, Sheet, Dialog, Scroll Area, Separator
-**Forms:** Input, Textarea, Select, Checkbox, Radio, Switch, Button
-**Data:** Table, Badge, Alert, Avatar, Skeleton
-**Navigation:** Dropdown Menu, Collapsible, Toggle, Toggle Group
-**Feedback:** Toast, Alert Dialog, Progress
+**Layout:** Card, Sheet, Dialog, Scroll Area, Separator **Forms:** Input,
+Textarea, Select, Checkbox, Radio, Switch, Button **Data:** Table, Badge, Alert,
+Avatar, Skeleton **Navigation:** Dropdown Menu, Collapsible, Toggle, Toggle
+Group **Feedback:** Toast, Alert Dialog, Progress
 
 ## Typography
 
@@ -123,6 +125,7 @@ function Example() {
 ## Spacing Scale
 
 Base unit: 4px (0.25rem)
+
 - Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
 
 ## Resources
diff --git a/docs/07-design-system/color-palette.md b/docs/07-design-system/color-palette.md
index f4ab041..54f5176 100644
--- a/docs/07-design-system/color-palette.md
+++ b/docs/07-design-system/color-palette.md
@@ -1,6 +1,7 @@
 # Color Palette
 
-22 color palettes with HSL values for light and dark modes. All colors meet WCAG 2.1 AA accessibility standards.
+22 color palettes with HSL values for light and dark modes. All colors meet WCAG
+2.1 AA accessibility standards.
 
 ## HSL Format
 
@@ -11,57 +12,58 @@ Colors stored as HSL without `hsl()` wrapper to support opacity modifiers:
 ```
 
 Usage:
+
 ```tsx
-bg-primary        /* hsl(221.2 83.2% 53.3%) */
-bg-primary/50     /* hsl(221.2 83.2% 53.3% / 0.5) */
-bg-primary/20     /* hsl(221.2 83.2% 53.3% / 0.2) */
+bg - primary; /* hsl(221.2 83.2% 53.3%) */
+bg - primary / 50; /* hsl(221.2 83.2% 53.3% / 0.5) */
+bg - primary / 20; /* hsl(221.2 83.2% 53.3% / 0.2) */
 ```
 
 ## Neutral Palettes
 
-| Palette | Light | Dark | Use Cases |
-|---------|-------|------|-----------|
-| **Slate** | `215.4 16.3% 46.9%` | `215.3 25% 56.9%` | Cool, modern |
-| **Gray** | `220 8.9% 46.1%` | `220 13% 69%` | True neutral |
-| **Zinc** | `240 3.8% 46.1%` | `240 5% 65%` | Warm, contemporary |
-| **Neutral** | `0 0% 45.1%` | `0 0% 65%` | Pure grayscale |
-| **Stone** | `25 5.3% 44.7%` | `33.3 5.5% 63.9%` | Beige-gray, warm |
+| Palette     | Light               | Dark              | Use Cases          |
+| ----------- | ------------------- | ----------------- | ------------------ |
+| **Slate**   | `215.4 16.3% 46.9%` | `215.3 25% 56.9%` | Cool, modern       |
+| **Gray**    | `220 8.9% 46.1%`    | `220 13% 69%`     | True neutral       |
+| **Zinc**    | `240 3.8% 46.1%`    | `240 5% 65%`      | Warm, contemporary |
+| **Neutral** | `0 0% 45.1%`        | `0 0% 65%`        | Pure grayscale     |
+| **Stone**   | `25 5.3% 44.7%`     | `33.3 5.5% 63.9%` | Beige-gray, warm   |
 
 ## Warm Palettes
 
-| Palette | Light | Dark | Use Cases |
-|---------|-------|------|-----------|
-| **Red** | `0 72.2% 50.6%` | `0 72.2% 60.6%` | Energy, attention |
-| **Orange** | `24.6 95% 53.1%` | `20.5 90.2% 58.2%` | Warm, friendly |
-| **Amber** | `37.7 92.1% 50.2%` | `32.1 94.6% 58%` | Golden, inviting |
-| **Yellow** | `45 93.4% 47.5%` | `47.9 95.8% 58.1%` | Cheerful, positive |
+| Palette    | Light              | Dark               | Use Cases          |
+| ---------- | ------------------ | ------------------ | ------------------ |
+| **Red**    | `0 72.2% 50.6%`    | `0 72.2% 60.6%`    | Energy, attention  |
+| **Orange** | `24.6 95% 53.1%`   | `20.5 90.2% 58.2%` | Warm, friendly     |
+| **Amber**  | `37.7 92.1% 50.2%` | `32.1 94.6% 58%`   | Golden, inviting   |
+| **Yellow** | `45 93.4% 47.5%`   | `47.9 95.8% 58.1%` | Cheerful, positive |
 
 ## Cool Palettes
 
-| Palette | Light | Dark | Use Cases |
-|---------|-------|------|-----------|
-| **Lime** | `84 81% 44.3%` | `82.7 85% 55.1%` | Fresh, lively |
-| **Green** | `142.1 70.6% 45.3%` | `142.1 76.2% 56.2%` | Success, growth |
-| **Emerald** | `160.1 84.1% 39.4%` | `160.1 84.1% 49.4%` | Rich, luxurious |
-| **Teal** | `173.4 80.4% 40%` | `172.5 66% 50.4%` | Professional, calm |
-| **Cyan** | `188.7 85.7% 53.3%` | `187.2 85.7% 53.3%` | Modern, refreshing |
-| **Sky** | `199.3 89.1% 48.2%` | `198.6 88.7% 58.4%` | Airy, open |
-| **Blue** | `221.2 83.2% 53.3%` | `217.2 91.2% 59.8%` | Professional (default) |
+| Palette     | Light               | Dark                | Use Cases              |
+| ----------- | ------------------- | ------------------- | ---------------------- |
+| **Lime**    | `84 81% 44.3%`      | `82.7 85% 55.1%`    | Fresh, lively          |
+| **Green**   | `142.1 70.6% 45.3%` | `142.1 76.2% 56.2%` | Success, growth        |
+| **Emerald** | `160.1 84.1% 39.4%` | `160.1 84.1% 49.4%` | Rich, luxurious        |
+| **Teal**    | `173.4 80.4% 40%`   | `172.5 66% 50.4%`   | Professional, calm     |
+| **Cyan**    | `188.7 85.7% 53.3%` | `187.2 85.7% 53.3%` | Modern, refreshing     |
+| **Sky**     | `199.3 89.1% 48.2%` | `198.6 88.7% 58.4%` | Airy, open             |
+| **Blue**    | `221.2 83.2% 53.3%` | `217.2 91.2% 59.8%` | Professional (default) |
 
 ## Violet/Purple Palettes
 
-| Palette | Light | Dark | Use Cases |
-|---------|-------|------|-----------|
-| **Indigo** | `238.7 83.5% 66.7%` | `239.4 84.1% 76.7%` | Deep, elegant |
-| **Violet** | `262.1 83.3% 57.8%` | `262.1 83.3% 67.8%` | Creative, unique |
-| **Purple** | `258.3 89.5% 58.4%` | `258.3 89.5% 68.4%` | Luxury, imagination |
-| **Fuchsia** | `292.2 84.1% 60.6%` | `292.2 84.1% 70.6%` | Bold, playful |
+| Palette     | Light               | Dark                | Use Cases           |
+| ----------- | ------------------- | ------------------- | ------------------- |
+| **Indigo**  | `238.7 83.5% 66.7%` | `239.4 84.1% 76.7%` | Deep, elegant       |
+| **Violet**  | `262.1 83.3% 57.8%` | `262.1 83.3% 67.8%` | Creative, unique    |
+| **Purple**  | `258.3 89.5% 58.4%` | `258.3 89.5% 68.4%` | Luxury, imagination |
+| **Fuchsia** | `292.2 84.1% 60.6%` | `292.2 84.1% 70.6%` | Bold, playful       |
 
 ## Pink/Rose Palettes
 
-| Palette | Light | Dark | Use Cases |
-|---------|-------|------|-----------|
-| **Pink** | `330.4 81.2% 60.4%` | `330.4 81.2% 70.4%` | Social, friendly |
+| Palette  | Light               | Dark                | Use Cases         |
+| -------- | ------------------- | ------------------- | ----------------- |
+| **Pink** | `330.4 81.2% 60.4%` | `330.4 81.2% 70.4%` | Social, friendly  |
 | **Rose** | `346.8 77.2% 49.8%` | `346.8 77.2% 59.8%` | Romantic, elegant |
 
 ## Semantic Color Roles
@@ -178,7 +180,7 @@ const { setMode } = useThemeStore();
 // Toggle for testing
 <button onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}>
   Toggle Theme
-</button>
+</button>;
 ```
 
 ### 4. Maintain Consistency
diff --git a/docs/07-design-system/components-library.md b/docs/07-design-system/components-library.md
index 2ffcfd2..a37c940 100644
--- a/docs/07-design-system/components-library.md
+++ b/docs/07-design-system/components-library.md
@@ -1,15 +1,18 @@
 # Components Library
 
-Shadcn UI components copied directly into the codebase for full customization without npm dependencies. All components are fully typed with TypeScript and support light/dark themes.
+Shadcn UI components copied directly into the codebase for full customization
+without npm dependencies. All components are fully typed with TypeScript and
+support light/dark themes.
 
-**Installation Approach:** Copy-paste components from Shadcn instead of npm packages.
+**Installation Approach:** Copy-paste components from Shadcn instead of npm
+packages.
 
 ## Form Components
 
 ### Button
 
-6 variants: default, destructive, outline, secondary, ghost, link
-4 sizes: default (h-10), sm (h-9), lg (h-11), icon (h-10 w-10)
+6 variants: default, destructive, outline, secondary, ghost, link 4 sizes:
+default (h-10), sm (h-9), lg (h-11), icon (h-10 w-10)
 
 ```tsx
 import { Button } from '@/components/ui/button';
@@ -45,7 +48,13 @@ import { Textarea } from '@/components/ui/textarea';
 ### Select
 
 ```tsx
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '@/components/ui/select';
 
 <Select>
   <SelectTrigger className="w-48">
@@ -55,7 +64,7 @@ import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@
     <SelectItem value="option1">Option 1</SelectItem>
     <SelectItem value="option2">Option 2</SelectItem>
   </SelectContent>
-</Select>
+</Select>;
 ```
 
 ### Checkbox, Radio, Switch
@@ -87,12 +96,25 @@ import { Label } from '@/components/ui/label';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
-import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form';
 
-const schema = z.object({ username: z.string().min(3), email: z.string().email() });
+const schema = z.object({
+  username: z.string().min(3),
+  email: z.string().email(),
+});
 
 function MyForm() {
-  const form = useForm({ resolver: zodResolver(schema), defaultValues: { username: '', email: '' } });
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { username: '', email: '' },
+  });
 
   return (
     <Form {...form}>
@@ -122,7 +144,14 @@ function MyForm() {
 ### Card
 
 ```tsx
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '@/components/ui/card';
 
 <Card>
   <CardHeader>
@@ -131,7 +160,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
   </CardHeader>
   <CardContent>Content</CardContent>
   <CardFooter>Actions</CardFooter>
-</Card>
+</Card>;
 ```
 
 ### Separator, Scroll Area, Collapsible
@@ -154,7 +183,14 @@ import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/component
 ### Table
 
 ```tsx
-import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from '@/components/ui/table';
 
 <Table>
   <TableHeader>
@@ -164,14 +200,14 @@ import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@
     </TableRow>
   </TableHeader>
   <TableBody>
-    {games.map(game => (
+    {games.map((game) => (
       <TableRow key={game.id}>
         <TableCell>{game.title}</TableCell>
         <TableCell>{game.platform}</TableCell>
       </TableRow>
     ))}
   </TableBody>
-</Table>
+</Table>;
 ```
 
 ### Badge
@@ -187,7 +223,8 @@ import { Badge } from '@/components/ui/badge';
 <Badge variant="tag">Action</Badge>
 ```
 
-**Platform Colors:** Flash (green), HTML5 (blue), Shockwave (purple), Java (orange), Unity (slate)
+**Platform Colors:** Flash (green), HTML5 (blue), Shockwave (purple), Java
+(orange), Unity (slate)
 
 ### Avatar, Skeleton, Tooltip, Popover
 
@@ -222,7 +259,13 @@ import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover
 ### Dropdown Menu
 
 ```tsx
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
 
 <DropdownMenu>
   <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
@@ -231,7 +274,7 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
     <DropdownMenuSeparator />
     <DropdownMenuItem>Log out</DropdownMenuItem>
   </DropdownMenuContent>
-</DropdownMenu>
+</DropdownMenu>;
 ```
 
 ### Toggle, Toggle Group
@@ -253,7 +296,15 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 ### Dialog
 
 ```tsx
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
 
 <Dialog>
   <DialogTrigger>Open</DialogTrigger>
@@ -267,13 +318,23 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
       <Button>Confirm</Button>
     </DialogFooter>
   </DialogContent>
-</Dialog>
+</Dialog>;
 ```
 
 ### Alert Dialog
 
 ```tsx
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@/components/ui/alert-dialog';
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 
 <AlertDialog>
   <AlertDialogTrigger variant="destructive">Delete</AlertDialogTrigger>
@@ -287,13 +348,19 @@ import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader,
       <AlertDialogAction>Delete</AlertDialogAction>
     </AlertDialogFooter>
   </AlertDialogContent>
-</AlertDialog>
+</AlertDialog>;
 ```
 
 ### Sheet
 
 ```tsx
-import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 
 <Sheet>
   <SheetTrigger>Open</SheetTrigger>
@@ -302,7 +369,7 @@ import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle } from '@/co
       <SheetTitle>Title</SheetTitle>
     </SheetHeader>
   </SheetContent>
-</Sheet>
+</Sheet>;
 ```
 
 ## Feedback
@@ -334,7 +401,11 @@ import { toast } from 'sonner';
 toast.success('Saved!');
 toast.error('Failed', { description: 'Details here' });
 toast.info('Update available');
-toast.promise(saveGame(), { loading: 'Saving...', success: 'Saved!', error: 'Failed' });
+toast.promise(saveGame(), {
+  loading: 'Saving...',
+  success: 'Saved!',
+  error: 'Failed',
+});
 ```
 
 ## Custom Components
@@ -342,7 +413,14 @@ toast.promise(saveGame(), { loading: 'Saving...', success: 'Saved!', error: 'Fai
 ### Pagination
 
 ```tsx
-import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from '@/components/ui/pagination';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationLink,
+  PaginationNext,
+} from '@/components/ui/pagination';
 
 <Pagination>
   <PaginationContent>
@@ -350,13 +428,15 @@ import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, Pagi
       <PaginationPrevious href="#" />
     </PaginationItem>
     <PaginationItem>
-      <PaginationLink href="#" isActive>1</PaginationLink>
+      <PaginationLink href="#" isActive>
+        1
+      </PaginationLink>
     </PaginationItem>
     <PaginationItem>
       <PaginationNext href="#" />
     </PaginationItem>
   </PaginationContent>
-</Pagination>
+</Pagination>;
 ```
 
 ### Platform Icon
@@ -371,12 +451,16 @@ import { PlatformIcon } from '@/components/ui/platform-icon';
 ## Best Practices
 
 1. **Use Semantic Components** - Prefer Card/Button over generic divs
-2. **Use asChild Prop** - For polymorphic components: `<Button asChild><Link>Browse</Link></Button>`
-3. **Controlled vs Uncontrolled** - Use state for complex logic, uncontrolled for simple cases
-4. **Accessibility** - Always add labels, ARIA attributes, and sr-only text for icon-only buttons
+2. **Use asChild Prop** - For polymorphic components:
+   `<Button asChild><Link>Browse</Link></Button>`
+3. **Controlled vs Uncontrolled** - Use state for complex logic, uncontrolled
+   for simple cases
+4. **Accessibility** - Always add labels, ARIA attributes, and sr-only text for
+   icon-only buttons
 
 ---
 
-See [Shadcn UI Docs](https://ui.shadcn.com) for complete component API reference.
+See [Shadcn UI Docs](https://ui.shadcn.com) for complete component API
+reference.
 
 Next: [Icons](./icons.md) - Lucide icons usage
diff --git a/docs/07-design-system/design-patterns.md b/docs/07-design-system/design-patterns.md
index a71e389..08e0350 100644
--- a/docs/07-design-system/design-patterns.md
+++ b/docs/07-design-system/design-patterns.md
@@ -18,9 +18,7 @@ Common UI patterns and best practices for Flashpoint Web.
     </div>
   </header>
 
-  <main className="container mx-auto px-4 py-8">
-    {children}
-  </main>
+  <main className="container mx-auto px-4 py-8">{children}</main>
 </div>
 ```
 
@@ -65,7 +63,7 @@ const [open, setOpen] = useState(false);
       <SidebarContent />
     </div>
   </aside>
-</>
+</>;
 ```
 
 ## Card Patterns
@@ -75,8 +73,14 @@ const [open, setOpen] = useState(false);
 ```tsx
 <Card className="group cursor-pointer overflow-hidden hover:shadow-lg transition-all">
   <div className="relative aspect-video overflow-hidden">
-    <img src={thumbnail} alt={title} className="w-full h-full object-cover group-hover:scale-105 transition-transform" />
-    <Badge variant="platform" className="absolute top-2 right-2">{platform}</Badge>
+    <img
+      src={thumbnail}
+      alt={title}
+      className="w-full h-full object-cover group-hover:scale-105 transition-transform"
+    />
+    <Badge variant="platform" className="absolute top-2 right-2">
+      {platform}
+    </Badge>
   </div>
 
   <CardHeader>
@@ -89,7 +93,10 @@ const [open, setOpen] = useState(false);
       <Calendar className="h-3 w-3" />
       <span>{releaseDate}</span>
     </div>
-    <Button size="sm"><Play className="mr-2 h-4 w-4" />Play</Button>
+    <Button size="sm">
+      <Play className="mr-2 h-4 w-4" />
+      Play
+    </Button>
   </CardFooter>
 </Card>
 ```
@@ -130,7 +137,12 @@ const [isLoading, setIsLoading] = useState(false);
       </div>
       <div className="space-y-2">
         <Label htmlFor="password">Password</Label>
-        <Input id="password" type="password" placeholder="Enter password" required />
+        <Input
+          id="password"
+          type="password"
+          placeholder="Enter password"
+          required
+        />
       </div>
       <Button type="submit" className="w-full" disabled={isLoading}>
         {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
@@ -138,7 +150,7 @@ const [isLoading, setIsLoading] = useState(false);
       </Button>
     </form>
   </CardContent>
-</Card>
+</Card>;
 ```
 
 ### Filter Form
@@ -148,7 +160,9 @@ const [isLoading, setIsLoading] = useState(false);
   <CardHeader>
     <CardTitle className="flex items-center justify-between">
       Filters
-      <Button variant="ghost" size="sm">Reset</Button>
+      <Button variant="ghost" size="sm">
+        Reset
+      </Button>
     </CardTitle>
   </CardHeader>
   <CardContent className="space-y-6">
@@ -184,16 +198,24 @@ const [isLoading, setIsLoading] = useState(false);
 
 ```tsx
 <div className="space-y-2">
-  {items.map(item => (
-    <div key={item.id} className="flex items-center justify-between p-3 rounded-lg border border-border hover:bg-accent transition-colors cursor-pointer">
+  {items.map((item) => (
+    <div
+      key={item.id}
+      className="flex items-center justify-between p-3 rounded-lg border border-border hover:bg-accent transition-colors cursor-pointer"
+    >
       <div className="flex items-center gap-3">
-        <Avatar><AvatarImage src={item.avatar} /><AvatarFallback>{item.initials}</AvatarFallback></Avatar>
+        <Avatar>
+          <AvatarImage src={item.avatar} />
+          <AvatarFallback>{item.initials}</AvatarFallback>
+        </Avatar>
         <div>
           <p className="font-medium">{item.title}</p>
           <p className="text-sm text-muted-foreground">{item.subtitle}</p>
         </div>
       </div>
-      <Button variant="ghost" size="sm"><ChevronRight className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="sm">
+        <ChevronRight className="h-4 w-4" />
+      </Button>
     </div>
   ))}
 </div>
@@ -207,7 +229,10 @@ const [isLoading, setIsLoading] = useState(false);
     <CardTitle>Games Library</CardTitle>
     <div className="flex items-center gap-2">
       <Input placeholder="Search..." className="w-64" />
-      <Button><Plus className="mr-2 h-4 w-4" />Add Game</Button>
+      <Button>
+        <Plus className="mr-2 h-4 w-4" />
+        Add Game
+      </Button>
     </div>
   </CardHeader>
   <CardContent>
@@ -220,19 +245,29 @@ const [isLoading, setIsLoading] = useState(false);
         </TableRow>
       </TableHeader>
       <TableBody>
-        {games.map(game => (
+        {games.map((game) => (
           <TableRow key={game.id}>
             <TableCell className="font-medium">{game.title}</TableCell>
-            <TableCell><Badge variant="platform">{game.platform}</Badge></TableCell>
+            <TableCell>
+              <Badge variant="platform">{game.platform}</Badge>
+            </TableCell>
             <TableCell className="text-right">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="icon"><MoreVertical className="h-4 w-4" /></Button>
+                  <Button variant="ghost" size="icon">
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                  <DropdownMenuItem><Play className="mr-2 h-4 w-4" />Play</DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Play className="mr-2 h-4 w-4" />
+                    Play
+                  </DropdownMenuItem>
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem className="text-destructive"><Trash className="mr-2 h-4 w-4" />Delete</DropdownMenuItem>
+                  <DropdownMenuItem className="text-destructive">
+                    <Trash className="mr-2 h-4 w-4" />
+                    Delete
+                  </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
             </TableCell>
@@ -251,16 +286,24 @@ const [isLoading, setIsLoading] = useState(false);
 ```tsx
 <AlertDialog>
   <AlertDialogTrigger asChild>
-    <Button variant="destructive"><Trash className="mr-2 h-4 w-4" />Delete</Button>
+    <Button variant="destructive">
+      <Trash className="mr-2 h-4 w-4" />
+      Delete
+    </Button>
   </AlertDialogTrigger>
   <AlertDialogContent>
     <AlertDialogHeader>
       <AlertDialogTitle>Delete {gameName}?</AlertDialogTitle>
-      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+      <AlertDialogDescription>
+        This action cannot be undone.
+      </AlertDialogDescription>
     </AlertDialogHeader>
     <AlertDialogFooter>
       <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction onClick={onConfirm} className="bg-destructive text-destructive-foreground">
+      <AlertDialogAction
+        onClick={onConfirm}
+        className="bg-destructive text-destructive-foreground"
+      >
         Delete
       </AlertDialogAction>
     </AlertDialogFooter>
@@ -275,21 +318,31 @@ const [open, setOpen] = useState(false);
 
 <Dialog open={open} onOpenChange={setOpen}>
   <DialogTrigger asChild>
-    <Button variant="outline"><Edit className="mr-2 h-4 w-4" />Edit</Button>
+    <Button variant="outline">
+      <Edit className="mr-2 h-4 w-4" />
+      Edit
+    </Button>
   </DialogTrigger>
   <DialogContent className="sm:max-w-[600px]">
     <DialogHeader>
       <DialogTitle>Edit Game</DialogTitle>
     </DialogHeader>
-    <form className="space-y-4">
-      {/* Form fields */}
-    </form>
+    <form className="space-y-4">{/* Form fields */}</form>
     <DialogFooter>
-      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-      <Button onClick={() => { onSave(); setOpen(false); }}>Save</Button>
+      <Button variant="outline" onClick={() => setOpen(false)}>
+        Cancel
+      </Button>
+      <Button
+        onClick={() => {
+          onSave();
+          setOpen(false);
+        }}
+      >
+        Save
+      </Button>
     </DialogFooter>
   </DialogContent>
-</Dialog>
+</Dialog>;
 ```
 
 ## Loading States
@@ -322,7 +375,9 @@ const [open, setOpen] = useState(false);
     <Search className="h-10 w-10 text-muted-foreground" />
   </div>
   <h3 className="text-2xl font-semibold mb-2">No games found</h3>
-  <p className="text-muted-foreground max-w-md mb-6">Try adjusting your search or filters.</p>
+  <p className="text-muted-foreground max-w-md mb-6">
+    Try adjusting your search or filters.
+  </p>
   <Button>
     <RotateCw className="mr-2 h-4 w-4" />
     Reset Filters
@@ -336,8 +391,14 @@ const [open, setOpen] = useState(false);
 
 ```tsx
 toast.success('Game added to favorites!');
-toast.error('Failed to load game', { action: { label: 'Retry', onClick: () => retryLoad() } });
-toast.promise(saveGame(), { loading: 'Saving...', success: 'Saved!', error: 'Failed' });
+toast.error('Failed to load game', {
+  action: { label: 'Retry', onClick: () => retryLoad() },
+});
+toast.promise(saveGame(), {
+  loading: 'Saving...',
+  success: 'Saved!',
+  error: 'Failed',
+});
 ```
 
 ### Alert
diff --git a/docs/07-design-system/icons.md b/docs/07-design-system/icons.md
index e702dbc..b9936e5 100644
--- a/docs/07-design-system/icons.md
+++ b/docs/07-design-system/icons.md
@@ -1,6 +1,7 @@
 # Icons
 
-Lucide React v0.358.0 - 358+ beautifully crafted SVG icons. All icons are tree-shakeable, customizable, and support light/dark themes.
+Lucide React v0.358.0 - 358+ beautifully crafted SVG icons. All icons are
+tree-shakeable, customizable, and support light/dark themes.
 
 ## Basic Usage
 
@@ -24,14 +25,14 @@ function Example() {
 
 Use Tailwind sizing classes:
 
-| Size | Class | Pixels | Use |
-|------|-------|--------|-----|
-| xs | `h-3 w-3` | 12px | Tiny indicators |
-| sm | `h-4 w-4` | 16px | Buttons, badges |
-| base | `h-5 w-5` | 20px | **Most common** |
-| md | `h-6 w-6` | 24px | Navigation, hero |
-| lg | `h-8 w-8` | 32px | Large displays |
-| xl | `h-12 w-12` | 48px | Extra large |
+| Size | Class       | Pixels | Use              |
+| ---- | ----------- | ------ | ---------------- |
+| xs   | `h-3 w-3`   | 12px   | Tiny indicators  |
+| sm   | `h-4 w-4`   | 16px   | Buttons, badges  |
+| base | `h-5 w-5`   | 20px   | **Most common**  |
+| md   | `h-6 w-6`   | 24px   | Navigation, hero |
+| lg   | `h-8 w-8`   | 32px   | Large displays   |
+| xl   | `h-12 w-12` | 48px   | Extra large      |
 
 ## Icon Colors
 
@@ -62,6 +63,7 @@ Use Tailwind sizing classes:
 ```
 
 **Common Props:**
+
 - `size` - Number (defaults to 24)
 - `color` - CSS color string
 - `strokeWidth` - Number (defaults to 2)
@@ -70,14 +72,13 @@ Use Tailwind sizing classes:
 
 ## Common Icon Categories
 
-**User & Account:** User, UserCircle, Settings, LogIn, LogOut
-**Navigation:** Menu, X, ChevronLeft, ChevronRight, Home, Search
-**Actions:** Plus, Minus, Edit, Trash, Save, Download, Copy, Share
-**Media:** Play, Pause, Volume2, Maximize, Film, Image
-**Feedback:** Check, CheckCircle, X, XCircle, AlertCircle, AlertTriangle, Info, Loader2
-**Social:** Heart, Star, ThumbsUp, Bell, Mail, Share2
-**Gaming:** Gamepad2, Joystick, Trophy, Award, Target
-**Theme:** Sun, Moon, Monitor, Palette, Eye, Grid, List
+**User & Account:** User, UserCircle, Settings, LogIn, LogOut **Navigation:**
+Menu, X, ChevronLeft, ChevronRight, Home, Search **Actions:** Plus, Minus, Edit,
+Trash, Save, Download, Copy, Share **Media:** Play, Pause, Volume2, Maximize,
+Film, Image **Feedback:** Check, CheckCircle, X, XCircle, AlertCircle,
+AlertTriangle, Info, Loader2 **Social:** Heart, Star, ThumbsUp, Bell, Mail,
+Share2 **Gaming:** Gamepad2, Joystick, Trophy, Award, Target **Theme:** Sun,
+Moon, Monitor, Palette, Eye, Grid, List
 
 See [lucide.dev](https://lucide.dev) for all 358+ icons.
 
@@ -277,7 +278,8 @@ Always label icon-only buttons:
 ## Best Practices
 
 1. **Consistent Sizing** - Use standard sizes (h-4 w-4, h-5 w-5, h-6 w-6)
-2. **Semantic Colors** - Match colors to meaning (green for success, red for error)
+2. **Semantic Colors** - Match colors to meaning (green for success, red for
+   error)
 3. **Import Only What You Need** - Tree-shakeable imports for smaller bundle
 4. **Align Properly** - Use `flex items-center` for vertical alignment
 
@@ -285,4 +287,5 @@ Always label icon-only buttons:
 
 Browse all icons at [lucide.dev](https://lucide.dev)
 
-Next: [Responsive Design](./responsive-design.md) - Breakpoints and mobile-first patterns
+Next: [Responsive Design](./responsive-design.md) - Breakpoints and mobile-first
+patterns
diff --git a/docs/07-design-system/responsive-design.md b/docs/07-design-system/responsive-design.md
index 835dafa..8d7bc72 100644
--- a/docs/07-design-system/responsive-design.md
+++ b/docs/07-design-system/responsive-design.md
@@ -1,17 +1,18 @@
 # Responsive Design
 
-Mobile-first responsive design using Tailwind CSS breakpoints. Works beautifully on all devices from 320px to 1920px+.
+Mobile-first responsive design using Tailwind CSS breakpoints. Works beautifully
+on all devices from 320px to 1920px+.
 
 ## Breakpoints
 
-| Breakpoint | Min Width | Device | Container |
-|------------|-----------|--------|-----------|
-| (none) | 0px | Mobile | 100% |
-| `sm` | 640px | Large phone | 640px |
-| `md` | 768px | Tablet | 768px |
-| `lg` | 1024px | Laptop | 1024px |
-| `xl` | 1280px | Desktop | 1280px |
-| `2xl` | 1400px | Large desktop | 1400px (custom) |
+| Breakpoint | Min Width | Device        | Container       |
+| ---------- | --------- | ------------- | --------------- |
+| (none)     | 0px       | Mobile        | 100%            |
+| `sm`       | 640px     | Large phone   | 640px           |
+| `md`       | 768px     | Tablet        | 768px           |
+| `lg`       | 1024px    | Laptop        | 1024px          |
+| `xl`       | 1280px    | Desktop       | 1280px          |
+| `2xl`      | 1400px    | Large desktop | 1400px (custom) |
 
 ## Mobile-First Approach
 
@@ -38,7 +39,9 @@ Write for mobile first, enhance for larger screens:
 ```tsx
 // Game card grid
 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-  {games.map(game => <GameCard key={game.id} game={game} />)}
+  {games.map((game) => (
+    <GameCard key={game.id} game={game} />
+  ))}
 </div>
 ```
 
@@ -146,8 +149,12 @@ function Header() {
           </nav>
 
           <div className="flex items-center gap-2 md:gap-4">
-            <Button size="sm" className="hidden sm:inline-flex">Sign In</Button>
-            <Button size="icon" className="lg:hidden"><Menu /></Button>
+            <Button size="sm" className="hidden sm:inline-flex">
+              Sign In
+            </Button>
+            <Button size="icon" className="lg:hidden">
+              <Menu />
+            </Button>
           </div>
         </div>
       </div>
@@ -163,7 +170,11 @@ function GameCard({ game }) {
   return (
     <Card className="hover:shadow-lg transition-shadow">
       <div className="aspect-video md:aspect-[4/3] lg:aspect-video overflow-hidden">
-        <img src={game.image} alt={game.title} className="w-full h-full object-cover" />
+        <img
+          src={game.image}
+          alt={game.title}
+          className="w-full h-full object-cover"
+        />
       </div>
 
       <CardHeader className="p-3 md:p-4 lg:p-6">
@@ -174,7 +185,9 @@ function GameCard({ game }) {
 
       <CardFooter className="p-3 md:p-4 lg:p-6 pt-0 flex flex-col sm:flex-row gap-2">
         <Button className="flex-1">Play Now</Button>
-        <Button variant="outline" size="icon"><Heart className="h-4 w-4" /></Button>
+        <Button variant="outline" size="icon">
+          <Heart className="h-4 w-4" />
+        </Button>
       </CardFooter>
     </Card>
   );
@@ -327,6 +340,7 @@ All interactive elements should be 44px × 44px on mobile:
 ## Testing Breakpoints
 
 Always test at:
+
 - 320px (small mobile)
 - 375px (mobile)
 - 768px (tablet)
@@ -336,7 +350,8 @@ Always test at:
 
 ## Best Practices
 
-1. **Mobile-First Always** - Write mobile styles first, add breakpoint prefixes for larger screens
+1. **Mobile-First Always** - Write mobile styles first, add breakpoint prefixes
+   for larger screens
 2. **Progressive Enhancement** - Basic on mobile, enhanced on desktop
 3. **Avoid Overuse** - Use 2-3 breakpoints, not every breakpoint
 4. **Test All Breakpoints** - Don't assume it works without testing
diff --git a/docs/07-design-system/spacing-layout.md b/docs/07-design-system/spacing-layout.md
index 22f076c..540d59f 100644
--- a/docs/07-design-system/spacing-layout.md
+++ b/docs/07-design-system/spacing-layout.md
@@ -7,13 +7,13 @@ Tailwind CSS spacing scale for consistent layouts and visual rhythm.
 Base unit: **4px (0.25rem)**
 
 | Class | Pixels | Class | Pixels | Class | Pixels |
-|-------|--------|-------|--------|-------|--------|
-| `0` | 0px | `8` | 32px | `24` | 96px |
-| `1` | 4px | `10` | 40px | `32` | 128px |
-| `2` | 8px | `12` | 48px | `40` | 160px |
-| `3` | 12px | `14` | 56px | `48` | 192px |
-| `4` | 16px | `16` | 64px | `64` | 256px |
-| `6` | 24px | `20` | 80px | `96` | 384px |
+| ----- | ------ | ----- | ------ | ----- | ------ |
+| `0`   | 0px    | `8`   | 32px   | `24`  | 96px   |
+| `1`   | 4px    | `10`  | 40px   | `32`  | 128px  |
+| `2`   | 8px    | `12`  | 48px   | `40`  | 160px  |
+| `3`   | 12px   | `14`  | 56px   | `48`  | 192px  |
+| `4`   | 16px   | `16`  | 64px   | `64`  | 256px  |
+| `6`   | 24px   | `20`  | 80px   | `96`  | 384px  |
 
 ## Padding & Margin
 
@@ -146,22 +146,16 @@ Base unit: **4px (0.25rem)**
 ```tsx
 <div className="min-h-screen bg-background">
   <header className="border-b border-border">
-    <div className="container mx-auto px-4 py-4">
-      {/* Header content */}
-    </div>
+    <div className="container mx-auto px-4 py-4">{/* Header content */}</div>
   </header>
 
   <main className="container mx-auto px-4 py-8">
     <h1 className="text-4xl font-bold mb-6">Page Title</h1>
-    <div className="space-y-8">
-      {/* Page sections */}
-    </div>
+    <div className="space-y-8">{/* Page sections */}</div>
   </main>
 
   <footer className="border-t border-border mt-16">
-    <div className="container mx-auto px-4 py-8">
-      {/* Footer */}
-    </div>
+    <div className="container mx-auto px-4 py-8">{/* Footer */}</div>
   </footer>
 </div>
 ```
@@ -194,7 +188,9 @@ Base unit: **4px (0.25rem)**
   </div>
 
   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-    {games.map(game => <GameCard key={game.id} game={game} />)}
+    {games.map((game) => (
+      <GameCard key={game.id} game={game} />
+    ))}
   </div>
 </div>
 ```
@@ -216,6 +212,7 @@ Max-width container with responsive padding:
 ```
 
 **Max Widths:**
+
 - Mobile: 100% (with padding)
 - 2xl (1400px+): 1400px fixed width
 
@@ -329,9 +326,7 @@ Max-width container with responsive padding:
 
 ```tsx
 // Increase spacing on larger screens
-<div className="px-4 md:px-6 lg:px-8">
-  Content
-</div>
+<div className="px-4 md:px-6 lg:px-8">Content</div>
 ```
 
 ---
diff --git a/docs/07-design-system/theme-system.md b/docs/07-design-system/theme-system.md
index de615a2..aa42dec 100644
--- a/docs/07-design-system/theme-system.md
+++ b/docs/07-design-system/theme-system.md
@@ -1,6 +1,7 @@
 # Theme System
 
-Dynamic theme system with light/dark modes and 22 customizable color palettes. Uses CSS variables for instant theme switching with Zustand state management.
+Dynamic theme system with light/dark modes and 22 customizable color palettes.
+Uses CSS variables for instant theme switching with Zustand state management.
 
 ## Architecture
 
@@ -15,6 +16,7 @@ User Preferences → Zustand Store → CSS Variables → UI
 ## Theme Modes
 
 ### Light Mode
+
 Clean, bright interface for daylight viewing.
 
 ```tsx
@@ -25,12 +27,14 @@ setMode('light');
 ```
 
 **Characteristics:**
+
 - Light backgrounds (98% lightness)
 - Dark text on light backgrounds
 - Subtle shadows
 - Vibrant primary colors
 
 ### Dark Mode
+
 Eye-friendly interface for low-light viewing.
 
 ```tsx
@@ -38,19 +42,22 @@ setMode('dark');
 ```
 
 **Characteristics:**
+
 - Deep backgrounds (4.9% lightness)
 - Light text on dark
 - Reduced brightness
 - Slightly muted primary colors
 
 ### System Mode (Auto)
+
 Automatically matches OS preference.
 
 ```tsx
 setMode('system');
 ```
 
-Listens to `prefers-color-scheme` media query and updates when system preference changes.
+Listens to `prefers-color-scheme` media query and updates when system preference
+changes.
 
 ## Primary Color Customization
 
@@ -66,12 +73,9 @@ setPrimaryColor('green');
 setPrimaryColor('rose');
 ```
 
-**Available Colors:**
-Neutral: Slate, Gray, Zinc, Neutral, Stone
-Warm: Red, Orange, Amber, Yellow
-Cool: Lime, Green, Emerald, Teal, Cyan, Sky, Blue
-Purple: Indigo, Violet, Purple, Fuchsia
-Pink: Pink, Rose
+**Available Colors:** Neutral: Slate, Gray, Zinc, Neutral, Stone Warm: Red,
+Orange, Amber, Yellow Cool: Lime, Green, Emerald, Teal, Cyan, Sky, Blue Purple:
+Indigo, Violet, Purple, Fuchsia Pink: Pink, Rose
 
 ## CSS Variables
 
@@ -83,7 +87,7 @@ All theme values use CSS custom properties for dynamic updates.
 :root {
   --background: 0 0% 98%;
   --foreground: 222.2 84% 4.9%;
-  --primary: 221.2 83.2% 53.3%;        /* Blue default */
+  --primary: 221.2 83.2% 53.3%; /* Blue default */
   --secondary: 210 40% 96.1%;
   --destructive: 0 84.2% 60.2%;
   --muted: 210 40% 96.1%;
@@ -100,7 +104,7 @@ All theme values use CSS custom properties for dynamic updates.
 .dark {
   --background: 222.2 84% 4.9%;
   --foreground: 210 40% 98%;
-  --primary: 217.2 91.2% 59.8%;        /* Lighter blue */
+  --primary: 217.2 91.2% 59.8%; /* Lighter blue */
   --secondary: 217.2 32.6% 17.5%;
   --destructive: 0 62.8% 30.6%;
   --border: 217.2 32.6% 17.5%;
@@ -140,13 +144,8 @@ interface ThemeState {
 import { useThemeStore } from '@/store/theme';
 
 function ThemeSettings() {
-  const {
-    mode,
-    setMode,
-    primaryColor,
-    setPrimaryColor,
-    isLoading
-  } = useThemeStore();
+  const { mode, setMode, primaryColor, setPrimaryColor, isLoading } =
+    useThemeStore();
 
   return (
     <div>
@@ -156,7 +155,10 @@ function ThemeSettings() {
         <option value="system">System</option>
       </select>
 
-      <select value={primaryColor} onChange={(e) => setPrimaryColor(e.target.value)}>
+      <select
+        value={primaryColor}
+        onChange={(e) => setPrimaryColor(e.target.value)}
+      >
         <option value="blue">Blue</option>
         <option value="purple">Purple</option>
         <option value="green">Green</option>
@@ -190,6 +192,7 @@ function Header() {
 ```
 
 **Features:**
+
 - 3 options (Light, Dark, System)
 - Icon changes based on current mode
 - Keyboard accessible
@@ -213,6 +216,7 @@ function Settings() {
 ```
 
 **Features:**
+
 - Visual color swatches
 - Grouped by category
 - Live preview
@@ -248,6 +252,7 @@ const settings = await usersApi.getThemeSettings();
 ```
 
 Endpoints:
+
 - `GET /api/users/me/theme` - Fetch
 - `PUT /api/users/me/theme` - Update
 
@@ -292,7 +297,8 @@ document.documentElement.style.setProperty('--ring', colorValue);
 Listens to OS-level theme changes in "system" mode:
 
 ```typescript
-window.matchMedia('(prefers-color-scheme: dark)')
+window
+  .matchMedia('(prefers-color-scheme: dark)')
   .addEventListener('change', (e) => {
     const state = useThemeStore.getState();
     if (state.mode === 'system') {
@@ -303,6 +309,7 @@ window.matchMedia('(prefers-color-scheme: dark)')
 ```
 
 Supports:
+
 - Windows dark mode toggle
 - macOS dark mode schedule
 - Linux desktop themes
@@ -327,6 +334,7 @@ Focus rings use primary color for consistency:
 ### Color Contrast
 
 All palettes meet WCAG 2.1 AA:
+
 - Normal text: 4.5:1 ratio
 - Large text: 3:1 ratio
 - Interactive: 3:1 ratio
@@ -365,7 +373,7 @@ const { setMode } = useThemeStore();
 
 <button onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}>
   Toggle Theme
-</button>
+</button>;
 ```
 
 ### 3. Respect User Preferences
@@ -386,12 +394,12 @@ Design components to work in any theme:
 
 ```tsx
 // Good: Works in any theme
-<Card className="bg-card text-card-foreground">
-  Content
-</Card>
+<Card className="bg-card text-card-foreground">Content</Card>;
 
 // Bad: Theme-specific components
-{mode === 'dark' ? <DarkCard /> : <LightCard />}
+{
+  mode === 'dark' ? <DarkCard /> : <LightCard />;
+}
 ```
 
 ## Troubleshooting
diff --git a/docs/07-design-system/typography.md b/docs/07-design-system/typography.md
index d6f9aaa..96271d5 100644
--- a/docs/07-design-system/typography.md
+++ b/docs/07-design-system/typography.md
@@ -1,10 +1,12 @@
 # Typography
 
-Inter font family with 12 text sizes, 4 weights, and optimized line heights. All typography meets WCAG accessibility standards.
+Inter font family with 12 text sizes, 4 weights, and optimized line heights. All
+typography meets WCAG accessibility standards.
 
 ## Font Family
 
-**Inter** - Modern sans-serif designed for UI with excellent character differentiation.
+**Inter** - Modern sans-serif designed for UI with excellent character
+differentiation.
 
 Fallback chain: Inter → system-ui → Helvetica → Arial → sans-serif
 
@@ -13,24 +15,25 @@ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 ```
 
 Loaded with Google Fonts optimizations:
+
 - `preconnect` for faster loading
 - `display=swap` to prevent invisible text
 - Only 400, 500, 600, 700 weights
 
 ## Font Sizes
 
-| Class | Size | Pixels | Use Case |
-|-------|------|--------|----------|
-| `text-xs` | 0.75rem | 12px | Labels, badges |
-| `text-sm` | 0.875rem | 14px | Small text, captions |
-| `text-base` | 1rem | 16px | **Body text (default)** |
-| `text-lg` | 1.125rem | 18px | Emphasized body |
-| `text-xl` | 1.25rem | 20px | Small headings |
-| `text-2xl` | 1.5rem | 24px | Card titles, h3 |
-| `text-3xl` | 1.875rem | 30px | Section headings, h2 |
-| `text-4xl` | 2.25rem | 36px | Page titles, h1 |
-| `text-5xl` | 3rem | 48px | Large displays |
-| `text-6xl` | 3.75rem | 60px | Hero text |
+| Class       | Size     | Pixels | Use Case                |
+| ----------- | -------- | ------ | ----------------------- |
+| `text-xs`   | 0.75rem  | 12px   | Labels, badges          |
+| `text-sm`   | 0.875rem | 14px   | Small text, captions    |
+| `text-base` | 1rem     | 16px   | **Body text (default)** |
+| `text-lg`   | 1.125rem | 18px   | Emphasized body         |
+| `text-xl`   | 1.25rem  | 20px   | Small headings          |
+| `text-2xl`  | 1.5rem   | 24px   | Card titles, h3         |
+| `text-3xl`  | 1.875rem | 30px   | Section headings, h2    |
+| `text-4xl`  | 2.25rem  | 36px   | Page titles, h1         |
+| `text-5xl`  | 3rem     | 48px   | Large displays          |
+| `text-6xl`  | 3.75rem  | 60px   | Hero text               |
 
 Usage:
 
@@ -45,12 +48,12 @@ Usage:
 
 ## Font Weights
 
-| Class | Weight | Use Case |
-|-------|--------|----------|
-| `font-normal` | 400 | Body text, paragraphs |
-| `font-medium` | 500 | Labels, buttons |
-| `font-semibold` | 600 | Headings |
-| `font-bold` | 700 | Strong emphasis |
+| Class           | Weight | Use Case              |
+| --------------- | ------ | --------------------- |
+| `font-normal`   | 400    | Body text, paragraphs |
+| `font-medium`   | 500    | Labels, buttons       |
+| `font-semibold` | 600    | Headings              |
+| `font-bold`     | 700    | Strong emphasis       |
 
 Usage:
 
@@ -67,13 +70,23 @@ Tailwind applies optimal line heights automatically:
 
 ```css
 /* Headings get tighter */
-.text-4xl { line-height: 1.1; }
-.text-3xl { line-height: 1.2; }
-.text-2xl { line-height: 1.3; }
+.text-4xl {
+  line-height: 1.1;
+}
+.text-3xl {
+  line-height: 1.2;
+}
+.text-2xl {
+  line-height: 1.3;
+}
 
 /* Body text gets comfortable */
-.text-base { line-height: 1.5; }
-.text-sm { line-height: 1.43; }
+.text-base {
+  line-height: 1.5;
+}
+.text-sm {
+  line-height: 1.43;
+}
 ```
 
 Explicit utilities:
diff --git a/docs/08-development/README.md b/docs/08-development/README.md
index 5e17d42..73fd144 100644
--- a/docs/08-development/README.md
+++ b/docs/08-development/README.md
@@ -1,13 +1,17 @@
 # Development Documentation
 
-This directory contains comprehensive documentation for developers working on the Flashpoint Web application.
+This directory contains comprehensive documentation for developers working on
+the Flashpoint Web application.
 
 ## Contents
 
 1. **[Setup Guide](./setup-guide.md)** - Complete development environment setup
-2. **[Commands Reference](./commands.md)** - All npm commands for monorepo and services
-3. **[Project Structure](./project-structure.md)** - Directory structure explained
-4. **[Coding Standards](./coding-standards.md)** - TypeScript conventions and style guide
+2. **[Commands Reference](./commands.md)** - All npm commands for monorepo and
+   services
+3. **[Project Structure](./project-structure.md)** - Directory structure
+   explained
+4. **[Coding Standards](./coding-standards.md)** - TypeScript conventions and
+   style guide
 5. **[Testing Guide](./testing-guide.md)** - Testing approach and best practices
 6. **[Debugging Guide](./debugging.md)** - Debugging tips and troubleshooting
 7. **[Common Pitfalls](./common-pitfalls.md)** - Known issues and solutions
@@ -52,7 +56,8 @@ Each service can be developed, tested, and deployed independently.
 
 - Review existing documentation in this directory
 - Check the main [CLAUDE.md](../../CLAUDE.md) for project overview
-- Consult service-specific docs in `docs/03-backend`, `docs/04-frontend`, and `docs/05-game-service`
+- Consult service-specific docs in `docs/03-backend`, `docs/04-frontend`, and
+  `docs/05-game-service`
 - Review architecture documentation in `docs/02-architecture`
 
 ## Contributing
diff --git a/docs/08-development/coding-standards.md b/docs/08-development/coding-standards.md
index d80379b..f80b014 100644
--- a/docs/08-development/coding-standards.md
+++ b/docs/08-development/coding-standards.md
@@ -5,9 +5,12 @@ Coding standards and best practices for Flashpoint Web development.
 ## TypeScript Standards
 
 ### Strict Mode
-All services use TypeScript strict mode with `noUnusedLocals`, `noUnusedParameters`, and `noFallthroughCasesInSwitch` enabled.
+
+All services use TypeScript strict mode with `noUnusedLocals`,
+`noUnusedParameters`, and `noFallthroughCasesInSwitch` enabled.
 
 ### Type Annotations
+
 - Use explicit return types for public functions
 - Use type inference for obvious cases (const count = 0)
 - Prefer interfaces over type aliases for object shapes
@@ -16,18 +19,22 @@ All services use TypeScript strict mode with `noUnusedLocals`, `noUnusedParamete
 - Prefer union types over enums (unless you need reverse mapping)
 
 ### Example:
+
 ```typescript
 // Good
 export function getGameById(id: string): Game | null {
-  return games.find(g => g.id === id) ?? null;
+  return games.find((g) => g.id === id) ?? null;
 }
 
 // Good - interfaces for objects, unions for types
-interface User { id: string; name: string; }
+interface User {
+  id: string;
+  name: string;
+}
 type Status = 'active' | 'inactive';
 
 // Avoid
-export function getGameById(id: string) { }  // implicit return type
+export function getGameById(id: string) {} // implicit return type
 ```
 
 ---
@@ -35,11 +42,15 @@ export function getGameById(id: string) { }  // implicit return type
 ## Naming Conventions
 
 ### Files
-- **Backend**: Services `PascalCase.ts`, routes `kebab-case.ts`, middleware/utils `camelCase.ts`
-- **Frontend**: Components `PascalCase.tsx`, hooks `useXxxx.ts`, stores/utils `camelCase.ts`
+
+- **Backend**: Services `PascalCase.ts`, routes `kebab-case.ts`,
+  middleware/utils `camelCase.ts`
+- **Frontend**: Components `PascalCase.tsx`, hooks `useXxxx.ts`, stores/utils
+  `camelCase.ts`
 - **Game Service**: All files `kebab-case.ts`
 
 ### Variables & Functions
+
 - Variables/functions: `camelCase`
 - Constants: `SCREAMING_SNAKE_CASE`
 - Private properties: prefix with underscore `_cache`
@@ -55,6 +66,7 @@ export function getGameById(id: string) { }  // implicit return type
 ## Code Organization
 
 ### Import Order
+
 1. Node.js built-in modules
 2. External packages (alphabetical)
 3. Internal modules with `@` alias (alphabetical)
@@ -62,9 +74,12 @@ export function getGameById(id: string) { }  // implicit return type
 5. Type imports (separate)
 
 ### Exports
-- Prefer named exports (except React components where default export is acceptable)
+
+- Prefer named exports (except React components where default export is
+  acceptable)
 
 ### File Structure
+
 Services: imports → types/interfaces → constants → class → helper functions
 
 React components: imports → types → constants → component → helper components
@@ -74,6 +89,7 @@ React components: imports → types → constants → component → helper compo
 ## ESLint Rules
 
 ### Backend (.eslintrc.json)
+
 ```json
 {
   "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
@@ -83,6 +99,7 @@ React components: imports → types → constants → component → helper compo
 ```
 
 ### Frontend (.eslintrc.json)
+
 ```json
 {
   "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
@@ -98,7 +115,9 @@ Run with `npm run lint` or auto-fix with `npm run lint -- --fix`
 ## Comment Standards
 
 ### Documentation Comments
+
 Use JSDoc for public APIs:
+
 ```typescript
 /**
  * Retrieves a game by its ID from the database.
@@ -111,6 +130,7 @@ export async function getGameById(id: string): Promise<Game | null> {
 ```
 
 ### Inline Comments
+
 - Explain "why", not "what"
 - Use TODO, FIXME, HACK prefixes for issues
 - Avoid obvious comments
@@ -120,6 +140,7 @@ export async function getGameById(id: string): Promise<Game | null> {
 ## Error Handling
 
 ### Backend
+
 ```typescript
 // Use try-catch for async operations
 try {
@@ -134,6 +155,7 @@ try {
 ```
 
 ### Frontend
+
 ```typescript
 // React Query error handling
 const { data, error, isError } = useQuery({ queryKey: ['games'], queryFn: fetchGames });
@@ -145,26 +167,29 @@ if (isError) return <div>Failed: {error.message}</div>;
 ## Backend Standards
 
 ### Database
+
 - Use prepared statements to prevent SQL injection
 - Use transactions for multi-step operations
 - Never write to flashpoint.sqlite (read-only)
 - Use UserDatabaseService for writes to user.db
 
 ### Service Layer
+
 ```typescript
 export class GameService {
   // Simple queries return null for not found
-  public getGameById(id: string): Game | null { }
+  public getGameById(id: string): Game | null {}
 
   // List queries return empty arrays
-  public searchGames(query: GameQuery): Game[] { }
+  public searchGames(query: GameQuery): Game[] {}
 
   // Mutations throw errors on failure
-  public async updateGame(id: string, updates: Partial<Game>): Promise<Game> { }
+  public async updateGame(id: string, updates: Partial<Game>): Promise<Game> {}
 }
 ```
 
 ### Routes
+
 - Validate input with Zod
 - Return consistent response structure
 - Use 404 for not found, 400 for validation, 500 for server errors
@@ -175,23 +200,28 @@ export class GameService {
 ## Frontend Standards
 
 ### React Components
+
 - Prefer function components
 - Extract custom hooks for reusable logic
 - Destructure props in function signature
-- Use appropriate state management (React Query for server state, Zustand for UI state)
+- Use appropriate state management (React Query for server state, Zustand for UI
+  state)
 
 ### API Calls
+
 **CRITICAL**: Use authenticated axios instance from `frontend/src/lib/api.ts`
+
 ```typescript
 // CORRECT - authenticated
 import { api } from '@/lib/api';
 const { data } = await api.get('/api/games');
 
 // WRONG - no authentication
-const response = await fetch('/api/games');  // ❌ Bypasses auth!
+const response = await fetch('/api/games'); // ❌ Bypasses auth!
 ```
 
 ### Styling
+
 - Group related Tailwind classes
 - Use `clsx` for conditional classes
 - Extract common styles to constants
@@ -201,6 +231,7 @@ const response = await fetch('/api/games');  // ❌ Bypasses auth!
 ## Git Commit Standards
 
 ### Format
+
 ```
 <type>(<scope>): <subject>
 
@@ -210,6 +241,7 @@ const response = await fetch('/api/games');  // ❌ Bypasses auth!
 ```
 
 ### Types
+
 - `feat`: New feature
 - `fix`: Bug fix
 - `docs`: Documentation
@@ -219,6 +251,7 @@ const response = await fetch('/api/games');  // ❌ Bypasses auth!
 - `chore`: Maintenance
 
 ### Examples
+
 ```
 feat(backend): add game favoriting functionality
 fix(frontend): resolve infinite scroll pagination bug
@@ -226,6 +259,7 @@ docs(development): add coding standards documentation
 ```
 
 ### Branches
+
 - `feature/<description>`
 - `bugfix/<description>`
 - `docs/<description>`
diff --git a/docs/08-development/commands.md b/docs/08-development/commands.md
index c3c75f7..e160bce 100644
--- a/docs/08-development/commands.md
+++ b/docs/08-development/commands.md
@@ -7,6 +7,7 @@ All npm commands available in Flashpoint Web monorepo.
 Run from repository root.
 
 ### Development
+
 ```bash
 npm run dev                 # Start all services (concurrent)
 npm run dev:backend        # Backend only
@@ -15,6 +16,7 @@ npm run dev:game-service   # Game service only
 ```
 
 ### Installation
+
 ```bash
 npm run install:all        # Install all service dependencies
 npm run install:backend    # Backend only
@@ -23,6 +25,7 @@ npm run install:game-service # Game service only
 ```
 
 ### Building
+
 ```bash
 npm run build              # Build all services for production
 npm run build:backend
@@ -31,6 +34,7 @@ npm run build:game-service
 ```
 
 ### Type Checking
+
 ```bash
 npm run typecheck          # Type check all services
 npm run typecheck:backend
@@ -39,6 +43,7 @@ npm run typecheck:game-service
 ```
 
 ### Production
+
 ```bash
 npm start                  # Start backend + game-service in production
 npm run start:backend
@@ -46,6 +51,7 @@ npm run start:game-service
 ```
 
 ### Code Formatting
+
 ```bash
 npm run format             # Format all files with Prettier
 npm run format:check       # Check without changes
@@ -55,6 +61,7 @@ npm run format:game-service
 ```
 
 ### Cleanup
+
 ```bash
 npm run clean              # Remove all build artifacts + node_modules
 npm run clean:backend
@@ -69,18 +76,21 @@ npm run clean:game-service
 Run from `backend/` directory.
 
 ### Development
+
 ```bash
 npm run dev                # Start with hot reload
 npm run kill-port          # Kill process on port 3100 (Windows)
 ```
 
 ### Building & Production
+
 ```bash
 npm run build              # Compile TypeScript to dist/
 npm start                  # Run production build
 ```
 
 ### Code Quality
+
 ```bash
 npm run typecheck          # Type check only
 npm run lint               # Check code with ESLint
@@ -88,6 +98,7 @@ npm run lint -- --fix      # Auto-fix issues
 ```
 
 ### Testing
+
 ```bash
 npm test                   # Run all tests
 npm test -- --watch        # Watch mode
@@ -103,17 +114,20 @@ npm test -- --grep "pattern"  # Pattern matching
 Run from `frontend/` directory.
 
 ### Development
+
 ```bash
 npm run dev                # Start Vite dev server (http://localhost:5173)
 ```
 
 ### Building & Preview
+
 ```bash
 npm run build              # Build for production (frontend/dist/)
 npm run preview            # Preview production build locally (http://localhost:4173)
 ```
 
 ### Code Quality
+
 ```bash
 npm run typecheck          # Type check only
 npm run lint               # Check code with ESLint
@@ -121,6 +135,7 @@ npm run lint -- --fix      # Auto-fix issues
 ```
 
 ### Utilities
+
 ```bash
 npm run copy-ruffle        # Copy Ruffle emulator to public/ruffle/
 ```
@@ -132,6 +147,7 @@ npm run copy-ruffle        # Copy Ruffle emulator to public/ruffle/
 Run from `game-service/` directory.
 
 ### Development
+
 ```bash
 npm run dev                # Start with hot reload
                            # Proxy: http://localhost:22500
@@ -139,12 +155,14 @@ npm run dev                # Start with hot reload
 ```
 
 ### Building & Production
+
 ```bash
 npm run build              # Compile TypeScript to dist/
 npm start                  # Run production build
 ```
 
 ### Code Quality
+
 ```bash
 npm run typecheck          # Type check only
 ```
@@ -156,6 +174,7 @@ npm run typecheck          # Type check only
 Run from repository root.
 
 ### Building
+
 ```bash
 docker-compose build                # Build all services
 docker-compose build backend        # Specific service
@@ -163,6 +182,7 @@ docker-compose build --no-cache     # Clean build
 ```
 
 ### Running
+
 ```bash
 docker-compose up -d                # Start all (background)
 docker-compose up                   # Start all (foreground)
@@ -171,6 +191,7 @@ docker-compose up -d --build        # Rebuild and restart
 ```
 
 ### Monitoring & Management
+
 ```bash
 docker-compose logs -f              # View all logs
 docker-compose logs -f backend      # Specific service
@@ -183,6 +204,7 @@ docker-compose exec backend npm test # Run command in container
 ```
 
 ### Prerequisites
+
 ```bash
 # Set Flashpoint path before running Docker
 export FLASHPOINT_HOST_PATH=/path/to/Flashpoint
@@ -196,6 +218,7 @@ $env:FLASHPOINT_HOST_PATH = "D:\Flashpoint"
 ## Common Workflows
 
 ### First Time Setup
+
 ```bash
 npm run install:all
 cp backend/.env.example backend/.env
@@ -206,6 +229,7 @@ npm run dev
 ```
 
 ### Before Committing
+
 ```bash
 npm run typecheck
 cd backend && npm run lint && npm test
@@ -213,6 +237,7 @@ npm run build
 ```
 
 ### Debugging Build Issues
+
 ```bash
 npm run clean
 npm run install:all
@@ -221,6 +246,7 @@ npm run build
 ```
 
 ### Production Deployment
+
 ```bash
 npm run build
 export NODE_ENV=production
@@ -232,24 +258,28 @@ npm start
 ## Environment Variables
 
 ### Backend (.env)
-| Variable | Required | Default | Notes |
-|----------|----------|---------|-------|
-| `FLASHPOINT_PATH` | Yes | - | All other paths derived automatically |
-| `JWT_SECRET` | Yes* | - | *Required in production |
-| `DOMAIN` | No | http://localhost:5173 | Frontend URL for CORS |
-| `GAME_SERVICE_HOST` | No | localhost | Game service hostname |
-| `LOG_LEVEL` | No | info | error, warn, info, debug |
-| `NODE_ENV` | No | development | production in production |
+
+| Variable            | Required | Default               | Notes                                 |
+| ------------------- | -------- | --------------------- | ------------------------------------- |
+| `FLASHPOINT_PATH`   | Yes      | -                     | All other paths derived automatically |
+| `JWT_SECRET`        | Yes\*    | -                     | \*Required in production              |
+| `DOMAIN`            | No       | http://localhost:5173 | Frontend URL for CORS                 |
+| `GAME_SERVICE_HOST` | No       | localhost             | Game service hostname                 |
+| `LOG_LEVEL`         | No       | info                  | error, warn, info, debug              |
+| `NODE_ENV`          | No       | development           | production in production              |
 
 ### Game Service (.env)
-| Variable | Required | Default | Notes |
-|----------|----------|---------|-------|
-| `FLASHPOINT_PATH` | Yes | - | All other paths derived automatically |
-| `LOG_LEVEL` | No | info | error, warn, info, debug |
-| `EXTERNAL_FALLBACK_URLS` | No | - | Comma-separated CDN URLs |
+
+| Variable                 | Required | Default | Notes                                 |
+| ------------------------ | -------- | ------- | ------------------------------------- |
+| `FLASHPOINT_PATH`        | Yes      | -       | All other paths derived automatically |
+| `LOG_LEVEL`              | No       | info    | error, warn, info, debug              |
+| `EXTERNAL_FALLBACK_URLS` | No       | -       | Comma-separated CDN URLs              |
 
 ### Frontend
-No environment variables required for local development. In production, Nginx proxies to backend.
+
+No environment variables required for local development. In production, Nginx
+proxies to backend.
 
 ---
 
diff --git a/docs/08-development/common-pitfalls.md b/docs/08-development/common-pitfalls.md
index 44d5bac..24df934 100644
--- a/docs/08-development/common-pitfalls.md
+++ b/docs/08-development/common-pitfalls.md
@@ -5,12 +5,15 @@ Known issues and solutions for Flashpoint Web development.
 ## Environment Setup Issues
 
 ### Flashpoint Path Not Found
+
 **Symptom:**
+
 ```
 Error: ENOENT: no such file or directory, open 'D:/Flashpoint/Data/flashpoint.sqlite'
 ```
 
 **Solution:**
+
 ```bash
 # Verify installation exists
 ls D:/Flashpoint/Data/flashpoint.sqlite    # Linux/Mac
@@ -30,13 +33,16 @@ ls $FLASHPOINT_PATH/Data/flashpoint.sqlite
 ---
 
 ### Node Version Mismatch
+
 **Symptom:**
+
 ```
 Error: The engine "node" is incompatible with this module
 Expected version ">=20.0.0". Got "18.12.0"
 ```
 
 **Solution:**
+
 ```bash
 node --version  # Check current version
 
@@ -50,12 +56,15 @@ nvm use 20
 ---
 
 ### Dependencies Won't Install
+
 **Symptom:**
+
 ```
 npm ERR! ERESOLVE unable to resolve dependency tree
 ```
 
 **Solution:**
+
 ```bash
 npm cache clean --force
 npm run clean                    # Remove all node_modules
@@ -68,12 +77,15 @@ npm run install:all -- --legacy-peer-deps  # If still fails
 ## Database Issues
 
 ### Database Locked Error
+
 **Symptom:**
+
 ```
 SqliteError: database is locked
 ```
 
 **Solution:**
+
 ```bash
 # Close Flashpoint Launcher (it locks flashpoint.sqlite)
 # Check for open processes
@@ -88,6 +100,7 @@ npm run dev
 ```
 
 **Prevention:**
+
 ```typescript
 class DatabaseService {
   private static instance: DatabaseService;
@@ -113,12 +126,15 @@ class DatabaseService {
 ---
 
 ### Migration Fails
+
 **Symptom:**
+
 ```
 Error: Migration failed: table users already exists
 ```
 
 **Solution:**
+
 ```bash
 # Check current schema
 sqlite3 backend/user.db ".schema"
@@ -135,16 +151,20 @@ npm run dev
 ---
 
 ### Read-Only Database Error
+
 **Symptom:**
+
 ```
 Error: attempt to write a readonly database
 ```
 
 **Causes:**
+
 - Writing to flashpoint.sqlite (read-only, managed by Flashpoint Launcher)
 - Incorrect permissions on user.db
 
 **Solution:**
+
 ```bash
 # NEVER write to flashpoint.sqlite
 
@@ -164,12 +184,15 @@ userDb.createUser(...);  # ✓ Correct
 ## Port Conflicts
 
 ### Port Already in Use
+
 **Symptom:**
+
 ```
 Error: listen EADDRINUSE: address already in use :::3100
 ```
 
 **Solution:**
+
 ```bash
 # Find process using port
 lsof -i :3100              # Linux/Mac
@@ -191,12 +214,15 @@ PORT=3002
 ## Authentication Issues
 
 ### JWT Token Expired
+
 **Symptom:**
+
 ```
 401 Unauthorized: Token expired
 ```
 
 **Solution:**
+
 ```typescript
 api.interceptors.response.use(
   (response) => response,
@@ -206,7 +232,7 @@ api.interceptors.response.use(
 
       try {
         const { data } = await api.post('/api/auth/refresh', {
-          refreshToken: localStorage.getItem('refreshToken')
+          refreshToken: localStorage.getItem('refreshToken'),
         });
         localStorage.setItem('accessToken', data.accessToken);
         error.config.headers['Authorization'] = `Bearer ${data.accessToken}`;
@@ -224,12 +250,15 @@ api.interceptors.response.use(
 ---
 
 ### CORS Errors
+
 **Symptom:**
+
 ```
 Access to XMLHttpRequest blocked by CORS policy
 ```
 
 **Solution:**
+
 ```typescript
 // Backend
 import cors from 'cors';
@@ -251,10 +280,13 @@ const { data } = await api.get('/api/games');  # ✓ Has auth headers
 ## Game Service Issues
 
 ### Game Files Not Loading
+
 **Symptom:**
+
 - Blank game screen or 404 errors
 
 **Solution:**
+
 ```bash
 # Verify game-service is running
 curl http://localhost:22500/health
@@ -273,12 +305,15 @@ curl http://localhost:22500/file.swf
 ---
 
 ### Ruffle Not Loading
+
 **Symptom:**
+
 ```
 Error: Ruffle is not defined
 ```
 
 **Solution:**
+
 ```bash
 # Verify files exist
 ls frontend/public/ruffle/
@@ -301,12 +336,15 @@ npm run copy-ruffle
 ## Frontend Build Issues
 
 ### Build Fails with Type Errors
+
 **Symptom:**
+
 ```
 ERROR: Type error: Property 'xyz' does not exist on type 'ABC'
 ```
 
 **Solution:**
+
 ```bash
 cd frontend
 
@@ -322,10 +360,13 @@ npm run typecheck
 ---
 
 ### Vite HMR Not Working
+
 **Symptom:**
+
 - Changes not reflecting in browser, manual refresh needed
 
 **Solution:**
+
 ```bash
 # Verify dev server running
 curl http://localhost:5173
@@ -346,10 +387,13 @@ sudo sysctl -p
 ---
 
 ### Tailwind Styles Not Applied
+
 **Symptom:**
+
 - Tailwind classes not working
 
 **Solution:**
+
 ```bash
 # Verify tailwind.config.js includes all source files
 # content should match './src/**/*.{js,ts,jsx,tsx}'
@@ -372,10 +416,13 @@ npm run dev
 ## Performance Issues
 
 ### Slow Database Queries
+
 **Symptom:**
+
 - API responses taking >1s
 
 **Solution:**
+
 ```sql
 -- Add indexes
 CREATE INDEX idx_game_platform ON game(platform);
@@ -392,10 +439,13 @@ SELECT * FROM game WHERE title LIKE '%mario%'; # Full scan
 ---
 
 ### Frontend Memory Leaks
+
 **Symptom:**
+
 - High memory usage, slow interactions
 
 **Solutions:**
+
 ```tsx
 // 1. Virtualize long lists
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -418,16 +468,16 @@ const GamePlayer = lazy(() => import('./GamePlayer'));
 
 ## Quick Reference: Error Messages
 
-| Error | Service | Quick Fix |
-|-------|---------|----------|
-| `ENOENT: no such file` | Backend | Check FLASHPOINT_PATH in .env |
-| `EADDRINUSE` | Any | Kill process or change port |
-| `database is locked` | Backend | Close Flashpoint Launcher |
-| `Token expired` | Backend | Implement token refresh |
-| `CORS policy` | Frontend | Check DOMAIN in backend .env |
-| `Ruffle is not defined` | Frontend | Run `npm run copy-ruffle` |
-| `Module not found` | Any | Run `npm install` |
-| `Type error` | Frontend/Backend | Run `npm run typecheck` |
+| Error                   | Service          | Quick Fix                     |
+| ----------------------- | ---------------- | ----------------------------- |
+| `ENOENT: no such file`  | Backend          | Check FLASHPOINT_PATH in .env |
+| `EADDRINUSE`            | Any              | Kill process or change port   |
+| `database is locked`    | Backend          | Close Flashpoint Launcher     |
+| `Token expired`         | Backend          | Implement token refresh       |
+| `CORS policy`           | Frontend         | Check DOMAIN in backend .env  |
+| `Ruffle is not defined` | Frontend         | Run `npm run copy-ruffle`     |
+| `Module not found`      | Any              | Run `npm install`             |
+| `Type error`            | Frontend/Backend | Run `npm run typecheck`       |
 
 ---
 
diff --git a/docs/08-development/database-migrations.md b/docs/08-development/database-migrations.md
index 36c0726..396aabf 100644
--- a/docs/08-development/database-migrations.md
+++ b/docs/08-development/database-migrations.md
@@ -1,10 +1,13 @@
 # Database Migrations
 
-This document describes the database migration system for the user database (`user.db`).
+This document describes the database migration system for the user database
+(`user.db`).
 
 ## Overview
 
-The migration system uses a **registry-based approach** to track which migrations have been applied to the database. This ensures consistent schema evolution across all installations.
+The migration system uses a **registry-based approach** to track which
+migrations have been applied to the database. This ensures consistent schema
+evolution across all installations.
 
 ## Architecture
 
@@ -25,7 +28,8 @@ CREATE TABLE migrations (
 
 ### Migration Files
 
-Migration files are located in `backend/src/migrations/` and follow the naming convention:
+Migration files are located in `backend/src/migrations/` and follow the naming
+convention:
 
 ```
 XXX_description.sql
@@ -38,44 +42,53 @@ XXX_description.sql
 
 ### Current Active Migrations
 
-| File | Description |
-|------|-------------|
-| `bootstrap.sql` | Creates the migrations registry table |
+| File                      | Description                                            |
+| ------------------------- | ------------------------------------------------------ |
+| `bootstrap.sql`           | Creates the migrations registry table                  |
 | `001_complete_schema.sql` | Complete database schema with all tables and seed data |
 
 ### Archived Migrations
 
-Historical migration files (001-016 from the old system) are archived in `backend/src/migrations/archived/` for reference. These files are **no longer executed** but document the evolution of the database schema.
+Historical migration files (001-016 from the old system) are archived in
+`backend/src/migrations/archived/` for reference. These files are **no longer
+executed** but document the evolution of the database schema.
 
 ## How It Works
 
 ### Startup Flow
 
-When the backend starts, `UserDatabaseService.initialize()` performs these steps:
+When the backend starts, `UserDatabaseService.initialize()` performs these
+steps:
 
 1. **Bootstrap** - Creates the `migrations` table if it doesn't exist
-2. **Detect Existing State** - For backward compatibility, detects if the database already has tables and marks migrations as applied
-3. **Run Migrations** - Scans the migrations directory and runs any migrations not yet in the registry
-4. **Record Execution** - Logs each migration with timestamp, checksum, and execution time
+2. **Detect Existing State** - For backward compatibility, detects if the
+   database already has tables and marks migrations as applied
+3. **Run Migrations** - Scans the migrations directory and runs any migrations
+   not yet in the registry
+4. **Record Execution** - Logs each migration with timestamp, checksum, and
+   execution time
 
 ### Backward Compatibility
 
-The system automatically detects existing databases (from the old migration system) and marks the consolidated migrations as applied:
+The system automatically detects existing databases (from the old migration
+system) and marks the consolidated migrations as applied:
 
 ```typescript
 // Checks for existing tables and seed data
-if (tables.some(t => t.name === 'users')) {
+if (tables.some((t) => t.name === 'users')) {
   markApplied('001_complete_schema', 'Detected existing schema and seed data');
 }
 ```
 
-This ensures a smooth transition from the old ad-hoc migration system to the new registry-based system.
+This ensures a smooth transition from the old ad-hoc migration system to the new
+registry-based system.
 
 ## Adding New Migrations
 
 ### Step 1: Create Migration File
 
-Create a new SQL file in `backend/src/migrations/` with the next sequential number:
+Create a new SQL file in `backend/src/migrations/` with the next sequential
+number:
 
 ```bash
 # Example: Adding a new feature
@@ -150,18 +163,21 @@ Once a migration has been applied to any database:
 - **Never** rename the file
 - **Never** delete the file
 
-If you need to make changes, create a **new migration** that modifies the schema.
+If you need to make changes, create a **new migration** that modifies the
+schema.
 
 ### 3. Use Descriptive Names
 
 Migration names should clearly indicate what they do:
 
 ✅ Good:
+
 - `003_add_user_badges.sql`
 - `004_remove_deprecated_settings.sql`
 - `005_add_game_tags_index.sql`
 
 ❌ Bad:
+
 - `003_changes.sql`
 - `004_fix.sql`
 - `005_update.sql`
@@ -274,11 +290,13 @@ WHERE field NOT LIKE 'new_format%';  -- Idempotent check
 
 ### Migration Fails on Existing Database
 
-**Symptom:** Migration runs successfully on fresh database but fails on existing database.
+**Symptom:** Migration runs successfully on fresh database but fails on existing
+database.
 
 **Cause:** Non-idempotent SQL (e.g., `CREATE TABLE` without `IF NOT EXISTS`)
 
 **Solution:** Add idempotency checks:
+
 ```sql
 CREATE TABLE IF NOT EXISTS ...
 INSERT OR IGNORE INTO ...
@@ -289,6 +307,7 @@ INSERT OR IGNORE INTO ...
 **Symptom:** Migration is in the file system but not in `migrations` table.
 
 **Diagnosis:**
+
 ```sql
 -- Check what migrations are registered
 SELECT name, applied_at FROM migrations ORDER BY applied_at;
@@ -297,13 +316,15 @@ SELECT name, applied_at FROM migrations ORDER BY applied_at;
 ls backend/src/migrations/*.sql
 ```
 
-**Solution:** The migration may not have run yet. Restart the backend to trigger migration execution.
+**Solution:** The migration may not have run yet. Restart the backend to trigger
+migration execution.
 
 ### Checksum Mismatch
 
 **Symptom:** Migration was applied but someone modified the SQL file.
 
 **Detection:**
+
 ```sql
 SELECT name, checksum FROM migrations WHERE name = '003_my_migration';
 ```
@@ -311,6 +332,7 @@ SELECT name, checksum FROM migrations WHERE name = '003_my_migration';
 Then compute the checksum of the current file and compare.
 
 **Solution:**
+
 1. If the change was intentional, create a new migration with the corrected SQL
 2. If the change was accidental, restore the original SQL from git history
 3. Never modify applied migrations
@@ -322,6 +344,7 @@ Then compute the checksum of the current file and compare.
 **Cause:** Another process (e.g., Flashpoint Launcher) has the database locked.
 
 **Solution:**
+
 1. Close the Flashpoint Launcher
 2. Ensure no other backend processes are running
 3. Restart the backend
@@ -381,7 +404,8 @@ If you need to roll back a migration:
 
 ### Reset Migration Registry
 
-**Warning:** This should only be done on development databases, never in production.
+**Warning:** This should only be done on development databases, never in
+production.
 
 ```sql
 -- Delete all migration records
@@ -413,7 +437,8 @@ DROP TABLE migrations;
 
 ## References
 
-- Migration Registry Implementation: `backend/src/services/UserDatabaseService.ts`
+- Migration Registry Implementation:
+  `backend/src/services/UserDatabaseService.ts`
 - Migration Files: `backend/src/migrations/`
 - Archived Migrations: `backend/src/migrations/archived/`
 - Database Schema Reference: `docs/12-reference/database-schema-reference.md`
diff --git a/docs/08-development/debugging.md b/docs/08-development/debugging.md
index 880fc02..7eb122b 100644
--- a/docs/08-development/debugging.md
+++ b/docs/08-development/debugging.md
@@ -5,7 +5,9 @@ Debugging Flashpoint Web across all services.
 ## Development Tools
 
 ### VS Code Debug Configuration
+
 Create `.vscode/launch.json`:
+
 ```json
 {
   "version": "0.2.0",
@@ -31,6 +33,7 @@ Create `.vscode/launch.json`:
 ```
 
 ### Recommended VS Code Extensions
+
 - ESLint, Prettier, TypeScript Language Features
 - Debugger for Chrome, REST Client
 - SQLite Viewer, GitLens
@@ -40,6 +43,7 @@ Create `.vscode/launch.json`:
 ## Backend Debugging
 
 ### Start with Debugger
+
 ```bash
 # Method 1: VS Code - F5 or select "Backend: Debug"
 
@@ -53,6 +57,7 @@ npm run dev -- --inspect
 ```
 
 ### Logging
+
 ```typescript
 // src/utils/logger.ts
 import winston from 'winston';
@@ -71,16 +76,18 @@ export LOG_LEVEL=debug npm run dev
 ```
 
 **Logging best practices:**
+
 ```typescript
 logger.info('User login', { username, ip: req.ip });
 logger.error('Operation failed', { error, context: additionalData });
 ```
 
 ### Database Debugging
+
 ```typescript
 // Enable SQL logging
 const db = new Database(dbPath, {
-  verbose: (sql: string) => logger.debug('SQL', { sql })
+  verbose: (sql: string) => logger.debug('SQL', { sql }),
 });
 
 // Inspect query results
@@ -89,6 +96,7 @@ logger.debug('Query result', { sql: stmt.source, result });
 ```
 
 ### Testing Requests
+
 ```bash
 # GET request
 curl http://localhost:3100/api/games
@@ -110,10 +118,12 @@ curl -v http://localhost:3100/api/games
 ## Frontend Debugging
 
 ### React DevTools
+
 - Install "React Developer Tools" extension for Chrome/Firefox
 - Inspect component tree, props, state, hooks in DevTools
 
 ### React Query DevTools
+
 ```tsx
 // App.tsx
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -129,6 +139,7 @@ export default function App() {
 ```
 
 ### API Call Debugging
+
 ```typescript
 // lib/api.ts
 api.interceptors.request.use((config) => {
@@ -149,6 +160,7 @@ api.interceptors.response.use(
 ```
 
 ### Component Debugging
+
 ```tsx
 export function GameCard({ game }: GameCardProps) {
   console.log('GameCard render', { game });
@@ -163,7 +175,9 @@ export function GameCard({ game }: GameCardProps) {
 ```
 
 ### Performance Profiling
+
 Use Chrome DevTools:
+
 1. Open DevTools > Performance
 2. Click Record
 3. Interact with application
@@ -175,11 +189,13 @@ Use Chrome DevTools:
 ## Database Debugging
 
 ### SQLite Browser
+
 - DB Browser for SQLite (free): https://sqlitebrowser.org/
 - SQLiteStudio or TablePlus for GUI inspection
 - VS Code: SQLite Viewer extension
 
 ### Query Testing
+
 ```bash
 # Open database
 sqlite3 backend/user.db
@@ -197,12 +213,14 @@ SELECT * FROM play_sessions WHERE user_id = 'abc';
 ```
 
 ### Performance Analysis
+
 ```sql
 EXPLAIN QUERY PLAN
 SELECT * FROM game WHERE platform = 'Flash' AND library = 'arcade';
 ```
 
 ### Database Locks
+
 ```bash
 # Check for locks
 lsof backend/user.db           # Linux/Mac
@@ -224,11 +242,13 @@ try {
 ## Game Service Debugging
 
 ### Enable Debug Logging
+
 ```bash
 LOG_LEVEL=debug npm run dev
 ```
 
 ### Test Proxy
+
 ```bash
 # Test proxy server
 curl http://localhost:22500/health
@@ -245,6 +265,7 @@ curl http://localhost:22501/health
 ## Common Issues
 
 ### Port Already in Use
+
 ```bash
 # Find process
 lsof -i :3100              # Linux/Mac
@@ -256,6 +277,7 @@ taskkill /PID <PID> /F     # Windows
 ```
 
 ### CORS Errors
+
 ```bash
 # Check CORS headers in response
 curl -v http://localhost:3100/api/games | grep Access-Control
@@ -269,6 +291,7 @@ app.use(cors({
 ```
 
 ### Build Errors
+
 ```bash
 npm run typecheck           # Check types
 npm run build               # Build all
diff --git a/docs/08-development/project-structure.md b/docs/08-development/project-structure.md
index ec66508..3c52aa0 100644
--- a/docs/08-development/project-structure.md
+++ b/docs/08-development/project-structure.md
@@ -74,6 +74,7 @@ backend/
 ```
 
 **Patterns:**
+
 - Services: `PascalCase.ts` (e.g., `GameService.ts`)
 - Routes: `kebab-case.ts` (e.g., `play-tracking.ts`)
 - Middleware/Utils: `camelCase.ts`
@@ -152,6 +153,7 @@ frontend/
 ```
 
 **Patterns:**
+
 - Components: `PascalCase.tsx`
 - Hooks: `useXxxx.ts`
 - Stores: `camelCase.ts`
@@ -222,6 +224,7 @@ docs/
 ## Configuration Files
 
 ### Root
+
 - `package.json` - Monorepo scripts
 - `package-lock.json` - Dependency lock
 - `docker-compose.yml` - Docker services
@@ -229,12 +232,14 @@ docs/
 - `README.md` - Project overview
 
 ### Backend
+
 - `tsconfig.json` - TypeScript config
 - `.eslintrc.json` - ESLint rules
 - `vitest.config.ts` - Test config
 - `.env.example` - Environment template
 
 ### Frontend
+
 - `tsconfig.json` - TypeScript config (app)
 - `tsconfig.node.json` - TypeScript config (Vite)
 - `vite.config.ts` - Vite bundler
@@ -243,6 +248,7 @@ docs/
 - `.eslintrc.json` - ESLint rules
 
 ### Game Service
+
 - `tsconfig.json` - TypeScript config
 - `.env.example` - Environment template
 
@@ -251,6 +257,7 @@ docs/
 ## Data Directories
 
 ### Flashpoint Installation (FLASHPOINT_PATH)
+
 ```
 D:/Flashpoint/
 ├── Data/
@@ -265,6 +272,7 @@ D:/Flashpoint/
 ```
 
 ### Application Data
+
 ```
 backend/
 ├── user.db                      # User database
@@ -296,17 +304,20 @@ import { api } from '@/lib/api';
 ## Build Output
 
 ### Backend (dist/)
+
 - server.js - Entry point
 - Compiled JavaScript files
 - Type declarations (.d.ts)
 - Source maps (.js.map)
 
 ### Frontend (dist/)
+
 - index.html - Entry point
 - assets/ - Minified JS, CSS, hashed bundles
 - ruffle/ - Ruffle emulator files
 
 ### Game Service (dist/)
+
 - index.js - Entry point
 - Compiled JavaScript files
 
diff --git a/docs/08-development/setup-guide.md b/docs/08-development/setup-guide.md
index 1ae12db..3d02b1d 100644
--- a/docs/08-development/setup-guide.md
+++ b/docs/08-development/setup-guide.md
@@ -7,22 +7,26 @@ Complete guide to setting up Flashpoint Web development environment.
 ### Required Software
 
 **Node.js v20.0.0+**
+
 ```bash
 node --version  # Verify
 nvm install 20 && nvm use 20  # Install with nvm
 ```
 
 **npm v9.0.0+** (included with Node.js)
+
 ```bash
 npm --version  # Verify
 ```
 
 **Git**
+
 ```bash
 git --version  # Verify
 ```
 
 **Flashpoint Archive**
+
 - Download from [flashpointarchive.org](https://flashpointarchive.org/)
 - Default path: `D:\Flashpoint` (Windows) or `~/Flashpoint` (Linux/Mac)
 - Verify: `ls D:/Flashpoint/Data/flashpoint.sqlite`
@@ -32,12 +36,14 @@ git --version  # Verify
 ## Initial Setup
 
 ### 1. Clone Repository
+
 ```bash
 git clone https://github.com/darkraise/flashpoint-web.git
 cd flashpoint-web
 ```
 
 ### 2. Install Dependencies
+
 ```bash
 npm run install:all
 
@@ -45,12 +51,14 @@ npm run install:all
 ```
 
 ### 3. Configure Backend
+
 ```bash
 cd backend
 cp .env.example .env
 ```
 
 Edit `backend/.env`:
+
 ```bash
 FLASHPOINT_PATH=D:/Flashpoint
 JWT_SECRET=change-this-in-production
@@ -62,15 +70,18 @@ LOG_LEVEL=info
 NODE_ENV=development
 ```
 
-**Note:** All paths (database, images, logos, htdocs, games) are automatically derived from `FLASHPOINT_PATH`.
+**Note:** All paths (database, images, logos, htdocs, games) are automatically
+derived from `FLASHPOINT_PATH`.
 
 ### 4. Configure Game Service
+
 ```bash
 cd game-service
 cp .env.example .env
 ```
 
 Edit `game-service/.env`:
+
 ```bash
 FLASHPOINT_PATH=D:/Flashpoint
 LOG_LEVEL=info
@@ -78,6 +89,7 @@ EXTERNAL_FALLBACK_URLS=http://infinity.flashpointarchive.org/Flashpoint/Legacy/h
 ```
 
 ### 5. Verify Setup
+
 ```bash
 npm run typecheck   # Type check all services
 npm run build       # Build all services
@@ -88,6 +100,7 @@ npm run build       # Build all services
 ## Start Development
 
 ### Option A: All Services Together
+
 ```bash
 npm run dev
 
@@ -98,6 +111,7 @@ npm run dev
 ```
 
 ### Option B: Individual Services
+
 ```bash
 # Terminal 1: Backend
 npm run dev:backend
@@ -110,6 +124,7 @@ npm run dev:game-service
 ```
 
 ### Verify Services
+
 ```bash
 # Backend
 curl http://localhost:3100/health  # Should return {"status":"ok"}
@@ -139,6 +154,7 @@ curl http://localhost:22500/health
 ### Visual Studio Code
 
 **Install Recommended Extensions:**
+
 - ESLint
 - Prettier
 - TypeScript Language Features
@@ -147,6 +163,7 @@ curl http://localhost:22500/health
 - SQLite Viewer
 
 **Settings (.vscode/settings.json):**
+
 ```json
 {
   "editor.formatOnSave": true,
@@ -158,8 +175,8 @@ curl http://localhost:22500/health
 }
 ```
 
-**Debug Configuration (.vscode/launch.json):**
-See [Debugging Guide](./debugging.md) for complete setup.
+**Debug Configuration (.vscode/launch.json):** See
+[Debugging Guide](./debugging.md) for complete setup.
 
 ### WebStorm/IntelliJ
 
@@ -182,12 +199,14 @@ cd backend && npm run lint && npm test  # Lint and test
 ## Troubleshooting
 
 ### Port Already in Use
+
 ```bash
 cd backend
 npm run kill-port  # Windows utility
 ```
 
 ### Database Not Found
+
 ```bash
 # Verify Flashpoint path
 ls D:/Flashpoint/Data/flashpoint.sqlite
@@ -197,6 +216,7 @@ cat backend/.env | grep FLASHPOINT_PATH
 ```
 
 ### Dependencies Won't Install
+
 ```bash
 npm cache clean --force
 npm run clean
@@ -204,6 +224,7 @@ npm run install:all
 ```
 
 ### Ruffle Not Loading
+
 ```bash
 cd frontend
 npm run copy-ruffle
@@ -219,23 +240,26 @@ See [Common Pitfalls](./common-pitfalls.md) for more issues.
 ## Environment Variables Reference
 
 ### Backend (.env)
-| Variable | Required | Default |
-|----------|----------|---------|
-| `FLASHPOINT_PATH` | Yes | - |
-| `JWT_SECRET` | Yes* | - |
-| `DOMAIN` | No | http://localhost:5173 |
-| `GAME_SERVICE_HOST` | No | localhost |
-| `LOG_LEVEL` | No | info |
-| `NODE_ENV` | No | development |
+
+| Variable            | Required | Default               |
+| ------------------- | -------- | --------------------- |
+| `FLASHPOINT_PATH`   | Yes      | -                     |
+| `JWT_SECRET`        | Yes\*    | -                     |
+| `DOMAIN`            | No       | http://localhost:5173 |
+| `GAME_SERVICE_HOST` | No       | localhost             |
+| `LOG_LEVEL`         | No       | info                  |
+| `NODE_ENV`          | No       | development           |
 
 ### Game Service (.env)
-| Variable | Required | Default |
-|----------|----------|---------|
-| `FLASHPOINT_PATH` | Yes | - |
-| `LOG_LEVEL` | No | info |
-| `EXTERNAL_FALLBACK_URLS` | No | - |
+
+| Variable                 | Required | Default |
+| ------------------------ | -------- | ------- |
+| `FLASHPOINT_PATH`        | Yes      | -       |
+| `LOG_LEVEL`              | No       | info    |
+| `EXTERNAL_FALLBACK_URLS` | No       | -       |
 
 ### Frontend
+
 No environment variables required for local development.
 
 ---
diff --git a/docs/08-development/testing-guide.md b/docs/08-development/testing-guide.md
index 5562c76..2872477 100644
--- a/docs/08-development/testing-guide.md
+++ b/docs/08-development/testing-guide.md
@@ -5,17 +5,21 @@ Testing practices for Flashpoint Web.
 ## Testing Philosophy
 
 ### Pyramid
+
 - **Unit Tests (70%)**: Individual functions in isolation
 - **Integration Tests (20%)**: Service interactions and API endpoints
 - **E2E Tests (10%)**: Critical user flows
 
 ### Coverage Goals
+
 - Backend: 80% target
 - Critical services: 90%+
 - Routes: Test all endpoints
 
 ### When to Test
+
 **Always:**
+
 - Business logic in services
 - Database operations
 - Authentication and authorization
@@ -24,6 +28,7 @@ Testing practices for Flashpoint Web.
 - Data transformations
 
 **Skip:**
+
 - Simple getter/setter methods
 - Trivial UI components
 - Configuration files
@@ -34,6 +39,7 @@ Testing practices for Flashpoint Web.
 ## Backend Testing (Vitest)
 
 ### Configuration
+
 ```typescript
 // vitest.config.ts
 import { defineConfig } from 'vitest/config';
@@ -46,13 +52,14 @@ export default defineConfig({
     setupFiles: ['./src/tests/setup.ts'],
     coverage: {
       provider: 'v8',
-      reporter: ['text', 'json', 'html']
-    }
-  }
+      reporter: ['text', 'json', 'html'],
+    },
+  },
 });
 ```
 
 ### Running Tests
+
 ```bash
 cd backend
 
@@ -64,11 +71,13 @@ npm test -- --grep "authentication"       # Pattern matching
 ```
 
 ### Test Structure
+
 - Co-locate tests with implementation: `GameService.test.ts`
 - Use fixtures for test data in `src/tests/fixtures/`
 - Use helpers in `src/tests/helpers/`
 
 ### Unit Test Example
+
 ```typescript
 describe('GameService', () => {
   let gameService: GameService;
@@ -82,7 +91,9 @@ describe('GameService', () => {
   describe('getGameById', () => {
     it('should return game when found', () => {
       const mockGame = { id: 'game-123', title: 'Test Game' };
-      const mockPrepare = vi.fn().mockReturnValue({ get: vi.fn().mockReturnValue(mockGame) });
+      const mockPrepare = vi
+        .fn()
+        .mockReturnValue({ get: vi.fn().mockReturnValue(mockGame) });
       mockDb.prepare = mockPrepare;
 
       const result = gameService.getGameById('game-123');
@@ -91,7 +102,9 @@ describe('GameService', () => {
     });
 
     it('should return null when game not found', () => {
-      const mockPrepare = vi.fn().mockReturnValue({ get: vi.fn().mockReturnValue(undefined) });
+      const mockPrepare = vi
+        .fn()
+        .mockReturnValue({ get: vi.fn().mockReturnValue(undefined) });
       mockDb.prepare = mockPrepare;
 
       const result = gameService.getGameById('nonexistent');
@@ -103,6 +116,7 @@ describe('GameService', () => {
 ```
 
 ### Integration Test Example
+
 ```typescript
 describe('Games API', () => {
   let authToken: string;
@@ -114,9 +128,7 @@ describe('Games API', () => {
 
   describe('GET /api/games', () => {
     it('should return list of games', async () => {
-      const response = await request(app)
-        .get('/api/games')
-        .expect(200);
+      const response = await request(app).get('/api/games').expect(200);
 
       expect(response.body).toHaveProperty('data');
       expect(Array.isArray(response.body.data)).toBe(true);
@@ -126,6 +138,7 @@ describe('Games API', () => {
 ```
 
 ### Test Data Fixtures
+
 ```typescript
 // src/tests/fixtures/games.ts
 export const testGames = {
@@ -133,8 +146,8 @@ export const testGames = {
     id: 'flash-1',
     title: 'Flash Game',
     platform: 'Flash',
-    library: 'arcade'
-  }
+    library: 'arcade',
+  },
 };
 
 export function createTestGame(overrides = {}) {
@@ -145,6 +158,7 @@ export function createTestGame(overrides = {}) {
 ### Testing Patterns
 
 **Async Code:**
+
 ```typescript
 it('should fetch games asynchronously', async () => {
   const games = await service.fetchGames();
@@ -153,6 +167,7 @@ it('should fetch games asynchronously', async () => {
 ```
 
 **Error Handling:**
+
 ```typescript
 it('should throw error on invalid input', () => {
   expect(() => validateGameData({ title: '' })).toThrow('Title is required');
@@ -160,9 +175,10 @@ it('should throw error on invalid input', () => {
 ```
 
 **Mocking:**
+
 ```typescript
 vi.mock('@/utils/jwt', () => ({
-  verifyToken: vi.fn()
+  verifyToken: vi.fn(),
 }));
 
 const mockVerify = vi.mocked(verifyToken);
@@ -173,7 +189,9 @@ mockVerify.mockReturnValue({ userId: '123' });
 
 ## Frontend Testing
 
-Frontend testing setup is planned but not yet implemented. When implemented, it will use:
+Frontend testing setup is planned but not yet implemented. When implemented, it
+will use:
+
 - **Vitest**: Test runner
 - **React Testing Library**: Component testing
 - **MSW**: API mocking
@@ -184,13 +202,16 @@ Frontend testing setup is planned but not yet implemented. When implemented, it
 ## Coverage
 
 ### Running Coverage Reports
+
 ```bash
 cd backend
 npm test -- --coverage
 ```
 
 ### Coverage Thresholds
+
 Add to `vitest.config.ts`:
+
 ```typescript
 export default defineConfig({
   test: {
@@ -199,10 +220,10 @@ export default defineConfig({
         statements: 80,
         branches: 75,
         functions: 80,
-        lines: 80
-      }
-    }
-  }
+        lines: 80,
+      },
+    },
+  },
 });
 ```
 
@@ -211,6 +232,7 @@ export default defineConfig({
 ## Best Practices
 
 ### Do's
+
 - Write tests before fixing bugs (regression testing)
 - Test one thing per test
 - Use descriptive test names ("should return null when game not found")
@@ -220,6 +242,7 @@ export default defineConfig({
 - Test edge cases and error paths
 
 ### Don'ts
+
 - Don't test implementation details
 - Don't make tests dependent on each other
 - Don't use production databases
diff --git a/docs/09-deployment/README.md b/docs/09-deployment/README.md
index 55dbf04..5f2ecb0 100644
--- a/docs/09-deployment/README.md
+++ b/docs/09-deployment/README.md
@@ -1,19 +1,24 @@
 # Deployment Documentation
 
-Complete deployment guides for Flashpoint Web in development, staging, and production environments.
+Complete deployment guides for Flashpoint Web in development, staging, and
+production environments.
 
 ## Quick Links
 
-- **[Docker Deployment](./docker-deployment.md)** - Container-based deployment with Docker Compose
-- **[Environment Variables](./environment-variables.md)** - Complete environment configuration reference
+- **[Docker Deployment](./docker-deployment.md)** - Container-based deployment
+  with Docker Compose
+- **[Environment Variables](./environment-variables.md)** - Complete environment
+  configuration reference
 - **[Health Checks](./health-checks.md)** - Health check setup and monitoring
-- **[Security Considerations](./security-considerations.md)** - Production security hardening and best practices
+- **[Security Considerations](./security-considerations.md)** - Production
+  security hardening and best practices
 
 ## Deployment Options
 
 ### Docker Deployment (Recommended)
 
-Best for quick deployment, consistent environments, easy scaling, and isolated service containers.
+Best for quick deployment, consistent environments, easy scaling, and isolated
+service containers.
 
 **Quick Start:**
 
@@ -40,7 +45,8 @@ npm run install:all
 npm run dev
 ```
 
-Configuration: Hot reload, debug logging, lenient rate limits, local Flashpoint path.
+Configuration: Hot reload, debug logging, lenient rate limits, local Flashpoint
+path.
 
 ### Staging Deployment
 
@@ -62,21 +68,26 @@ NODE_ENV=production npm run build
 docker-compose -f docker-compose.prod.yml up -d
 ```
 
-Configuration: Optimized builds, strict rate limits, valid SSL certificate, full monitoring and alerting, automated backups, log rotation.
+Configuration: Optimized builds, strict rate limits, valid SSL certificate, full
+monitoring and alerting, automated backups, log rotation.
 
 ## Infrastructure Overview
 
 **Minimum (< 100 users):**
+
 - 2 CPU cores, 4GB RAM, 50GB storage
 - Ports: 80, 443 (public); 3100, 22500, 22501 (internal)
 
 **Recommended (100-500 users):**
+
 - 4-8 CPU cores, 8-16GB RAM, 500GB SSD storage
 
 **Large (500+ users):**
+
 - 8+ CPU cores, 16-32GB RAM, 1TB+ SSD storage, load balancer, Redis cache, CDN
 
 **Storage Planning:**
+
 - Full Flashpoint Archive: ~600GB
 - User database: < 100MB
 - Application logs: ~1GB/month
@@ -95,5 +106,6 @@ After deployment:
 ## Related Documentation
 
 - [API Reference](../06-api-reference/README.md) - Complete API endpoints
-- [Architecture Overview](../02-architecture/system-architecture.md) - System design
+- [Architecture Overview](../02-architecture/system-architecture.md) - System
+  design
 - [Common Pitfalls](../08-development/common-pitfalls.md) - Troubleshooting
diff --git a/docs/09-deployment/docker-deployment.md b/docs/09-deployment/docker-deployment.md
index d3c12eb..c426eb8 100644
--- a/docs/09-deployment/docker-deployment.md
+++ b/docs/09-deployment/docker-deployment.md
@@ -16,6 +16,7 @@ Deploy Flashpoint Web using Docker Compose.
 ## Quick Start
 
 1. Set Flashpoint path:
+
 ```bash
 # Linux/Mac
 export FLASHPOINT_HOST_PATH=/path/to/flashpoint
@@ -25,11 +26,13 @@ $env:FLASHPOINT_HOST_PATH="D:\Flashpoint"
 ```
 
 2. Start services:
+
 ```bash
 docker-compose up -d --build
 ```
 
 3. Access:
+
 - Frontend: http://localhost
 - Backend API: http://localhost:3100
 - Game Proxy: http://localhost:22500
@@ -37,13 +40,14 @@ docker-compose up -d --build
 
 ## Container Architecture
 
-| Service | Image | Port | Purpose |
-|---------|-------|------|---------|
-| backend | flashpoint-backend:latest | 3100 | REST API |
+| Service      | Image                          | Port        | Purpose                 |
+| ------------ | ------------------------------ | ----------- | ----------------------- |
+| backend      | flashpoint-backend:latest      | 3100        | REST API                |
 | game-service | flashpoint-game-service:latest | 22500/22501 | Game proxy + ZIP server |
-| frontend | flashpoint-frontend:latest | 80 | Web UI (Nginx) |
+| frontend     | flashpoint-frontend:latest     | 80          | Web UI (Nginx)          |
 
 **Resource Recommendations:**
+
 - Backend: 1 CPU, 1GB RAM
 - Game Service: 2 CPUs, 2GB RAM
 - Frontend: 0.5 CPU, 256MB RAM
@@ -51,12 +55,14 @@ docker-compose up -d --build
 ## Volume Configuration
 
 **Flashpoint Data (read-only):**
+
 ```yaml
 volumes:
   - ${FLASHPOINT_HOST_PATH}:/data/flashpoint:ro
 ```
 
 **User Database (persistent):**
+
 ```yaml
 volumes:
   - user-db:/app/data
@@ -66,14 +72,15 @@ volumes:
 
 **Port Mappings:**
 
-| Service | Internal | Host | Notes |
-|---------|----------|------|-------|
-| Frontend | 8080 | 80 | Nginx |
-| Backend | 3100 | 3100 | API |
-| Game (Proxy) | 22500 | 22500 | HTTP |
-| Game (ZIP) | 22501 | 22501 | ZIP Server |
+| Service      | Internal | Host  | Notes      |
+| ------------ | -------- | ----- | ---------- |
+| Frontend     | 8080     | 80    | Nginx      |
+| Backend      | 3100     | 3100  | API        |
+| Game (Proxy) | 22500    | 22500 | HTTP       |
+| Game (ZIP)   | 22501    | 22501 | ZIP Server |
 
 **Custom ports** via environment variables:
+
 ```bash
 export WEB_PORT=8080
 export API_PORT=8001
@@ -86,7 +93,15 @@ All services include health checks:
 
 ```yaml
 healthcheck:
-  test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:3100/api/health"]
+  test:
+    [
+      'CMD',
+      'wget',
+      '--quiet',
+      '--tries=1',
+      '--spider',
+      'http://localhost:3100/api/health',
+    ]
   interval: 30s
   timeout: 10s
   retries: 3
@@ -94,24 +109,30 @@ healthcheck:
 ```
 
 Check status:
+
 ```bash
 docker-compose ps
 ```
 
 ## Nginx Configuration
 
-The frontend uses a template-based configuration with environment variable substitution.
+The frontend uses a template-based configuration with environment variable
+substitution.
 
 **Key files:**
+
 - `frontend/.nginx/nginx.conf` - Global settings (worker processes, logging)
-- `frontend/.nginx/default.conf.template` - Server block with `${BACKEND_HOST}`, `${BACKEND_PORT}` variables
+- `frontend/.nginx/default.conf.template` - Server block with `${BACKEND_HOST}`,
+  `${BACKEND_PORT}` variables
 
 **At runtime:**
+
 1. Docker entrypoint runs `envsubst` to substitute variables
 2. Processed config written to `/etc/nginx/conf.d/default.conf`
 3. Nginx starts with final configuration
 
 **Features:**
+
 - SPA routing (serves index.html for non-static routes)
 - Gzip compression
 - Security headers (HSTS, CSP, X-Frame-Options)
@@ -120,16 +141,19 @@ The frontend uses a template-based configuration with environment variable subst
 ## Running Containers
 
 Start all services:
+
 ```bash
 docker-compose up -d
 ```
 
 Stop services:
+
 ```bash
 docker-compose down
 ```
 
 Restart with rebuild:
+
 ```bash
 docker-compose up -d --build --force-recreate
 ```
@@ -137,6 +161,7 @@ docker-compose up -d --build --force-recreate
 ## Monitoring and Logs
 
 View logs:
+
 ```bash
 docker-compose logs -f backend
 docker-compose logs -f game-service
@@ -144,11 +169,13 @@ docker-compose logs -f frontend
 ```
 
 Container stats:
+
 ```bash
 docker stats
 ```
 
 Execute command in container:
+
 ```bash
 docker-compose exec backend node -v
 docker-compose exec backend sh  # Open shell
@@ -157,6 +184,7 @@ docker-compose exec backend sh  # Open shell
 ## Troubleshooting
 
 **Port already in use:**
+
 ```bash
 # Linux/Mac
 lsof -i :3100
@@ -166,11 +194,13 @@ netstat -ano | findstr :3100
 ```
 
 **Volume mount failed:**
+
 - Verify `FLASHPOINT_HOST_PATH` is set
 - Check path exists and is readable
 - On Windows, ensure Docker has drive access
 
 **Health check failing:**
+
 ```bash
 # Check directly
 curl http://localhost:3100/api/health
@@ -183,6 +213,7 @@ docker inspect flashpoint-backend --format='{{json .State.Health}}' | jq
 ```
 
 **Database connection issues:**
+
 ```bash
 # Verify database exists
 docker-compose exec backend ls -la /data/flashpoint/Data/flashpoint.sqlite
@@ -192,6 +223,7 @@ docker-compose exec backend sqlite3 /data/flashpoint/Data/flashpoint.sqlite "SEL
 ```
 
 **Network issues:**
+
 ```bash
 # Test backend to game-service
 docker-compose exec backend curl http://game-service:22500/
diff --git a/docs/09-deployment/environment-variables.md b/docs/09-deployment/environment-variables.md
index 9187902..efab225 100644
--- a/docs/09-deployment/environment-variables.md
+++ b/docs/09-deployment/environment-variables.md
@@ -8,51 +8,52 @@ Location: `backend/.env`
 
 **Server:**
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `NODE_ENV` | development | Environment: development, production, test |
-| `PORT` | 3100 | HTTP server port |
-| `HOST` | 0.0.0.0 | Bind address (use 127.0.0.1 for localhost only) |
+| Variable   | Default     | Description                                     |
+| ---------- | ----------- | ----------------------------------------------- |
+| `NODE_ENV` | development | Environment: development, production, test      |
+| `PORT`     | 3100        | HTTP server port                                |
+| `HOST`     | 0.0.0.0     | Bind address (use 127.0.0.1 for localhost only) |
 
 **Paths (only set FLASHPOINT_PATH):**
 
-| Variable | Description |
-|----------|-------------|
+| Variable          | Description                                                                                                            |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | `FLASHPOINT_PATH` | Root Flashpoint directory. All other paths auto-derived. Edition (Infinity/Ultimate) auto-detected from `version.txt`. |
 
 **Game Service Host:**
 
-| Variable | Default | Description |
-|----------|---------|-------------|
+| Variable            | Default   | Description                    |
+| ------------------- | --------- | ------------------------------ |
 | `GAME_SERVICE_HOST` | localhost | Hostname for game-service URLs |
 
 **Authentication & Security:**
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `JWT_SECRET` | INSECURE-... | Secret for JWT signing (CHANGE IN PRODUCTION!) |
-| `JWT_EXPIRES_IN` | 1h | Access token expiration (15m, 1h, 7d, etc.) |
-| `BCRYPT_SALT_ROUNDS` | 10 | Password hash cost (higher = more secure but slower) |
-| `DOMAIN` | http://localhost:5173 | CORS origin (use specific domain in production) |
+| Variable             | Default               | Description                                          |
+| -------------------- | --------------------- | ---------------------------------------------------- |
+| `JWT_SECRET`         | INSECURE-...          | Secret for JWT signing (CHANGE IN PRODUCTION!)       |
+| `JWT_EXPIRES_IN`     | 1h                    | Access token expiration (15m, 1h, 7d, etc.)          |
+| `BCRYPT_SALT_ROUNDS` | 10                    | Password hash cost (higher = more secure but slower) |
+| `DOMAIN`             | http://localhost:5173 | CORS origin (use specific domain in production)      |
 
 Generate secure JWT secret:
+
 ```bash
 openssl rand -hex 64
 ```
 
 **Rate Limiting:**
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `RATE_LIMIT_WINDOW_MS` | 60000 | Time window (ms) |
-| `RATE_LIMIT_MAX_REQUESTS` | 100 | Max requests per window |
+| Variable                  | Default | Description             |
+| ------------------------- | ------- | ----------------------- |
+| `RATE_LIMIT_WINDOW_MS`    | 60000   | Time window (ms)        |
+| `RATE_LIMIT_MAX_REQUESTS` | 100     | Max requests per window |
 
 **Logging:**
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `LOG_LEVEL` | info | Level: error, warn, info, debug |
-| `LOG_FILE` | - | Optional log file path |
+| Variable    | Default | Description                     |
+| ----------- | ------- | ------------------------------- |
+| `LOG_LEVEL` | info    | Level: error, warn, info, debug |
+| `LOG_FILE`  | -       | Optional log file path          |
 
 ## Game Service Variables
 
@@ -60,32 +61,34 @@ Location: `game-service/.env`
 
 **Ports:**
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `PROXY_PORT` | 22500 | HTTP proxy server port |
-| `GAMEZIPSERVER_PORT` | 22501 | GameZip server port |
+| Variable             | Default | Description            |
+| -------------------- | ------- | ---------------------- |
+| `PROXY_PORT`         | 22500   | HTTP proxy server port |
+| `GAMEZIPSERVER_PORT` | 22501   | GameZip server port    |
 
 **Paths:**
 
-| Variable | Description |
-|----------|-------------|
+| Variable          | Description                                                     |
+| ----------------- | --------------------------------------------------------------- |
 | `FLASHPOINT_PATH` | Root Flashpoint directory (auto-derives htdocs and games paths) |
 
 **Proxy:**
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `PROXY_CHUNK_SIZE` | 8192 | File streaming chunk size (bytes) |
+| Variable                 | Default   | Description                       |
+| ------------------------ | --------- | --------------------------------- |
+| `PROXY_CHUNK_SIZE`       | 8192      | File streaming chunk size (bytes) |
 | `EXTERNAL_FALLBACK_URLS` | See below | Comma-separated CDN fallback URLs |
 
 Default fallback URLs:
+
 ```
 http://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs,http://infinity.unstable.life/Flashpoint/Legacy/htdocs/
 ```
 
 ## Frontend Variables
 
-The frontend has no environment variables in development or production. API calls are proxied through the backend.
+The frontend has no environment variables in development or production. API
+calls are proxied through the backend.
 
 - **Development**: Via Vite proxy to `http://localhost:3100`
 - **Production**: Via Nginx or reverse proxy
@@ -96,27 +99,27 @@ Location: `.env` in project root
 
 **Core Configuration:**
 
-| Variable | Default | Description |
-|----------|---------|-------------|
+| Variable               | Default       | Description                          |
+| ---------------------- | ------------- | ------------------------------------ |
 | `FLASHPOINT_HOST_PATH` | D:/Flashpoint | Host path to Flashpoint installation |
-| `NODE_ENV` | production | Environment for all services |
-| `JWT_SECRET` | - | Secret for JWT signing (required) |
+| `NODE_ENV`             | production    | Environment for all services         |
+| `JWT_SECRET`           | -             | Secret for JWT signing (required)    |
 
 **Port Mapping:**
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `WEB_PORT` | 80 | Frontend exposed port |
-| `API_PORT` | 3100 | Backend exposed port |
-| `PROXY_PORT` | 22500 | Game proxy exposed port |
-| `GAMEZIP_PORT` | 22501 | GameZip exposed port |
+| Variable       | Default | Description             |
+| -------------- | ------- | ----------------------- |
+| `WEB_PORT`     | 80      | Frontend exposed port   |
+| `API_PORT`     | 3100    | Backend exposed port    |
+| `PROXY_PORT`   | 22500   | Game proxy exposed port |
+| `GAMEZIP_PORT` | 22501   | GameZip exposed port    |
 
 **Other:**
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `DOMAIN` | http://localhost | CORS origin |
-| `LOG_LEVEL` | info | Logging level |
+| Variable    | Default          | Description   |
+| ----------- | ---------------- | ------------- |
+| `DOMAIN`    | http://localhost | CORS origin   |
+| `LOG_LEVEL` | info             | Logging level |
 
 ## Docker Compose Setup
 
@@ -177,9 +180,11 @@ LOG_FILE=/var/log/flashpoint-backend.log
 **Required Variables:**
 
 **Backend:**
+
 - `FLASHPOINT_PATH` (only this is required; others auto-derive)
 
 **Docker Production:**
+
 - `JWT_SECRET` (must be changed from default)
 - `DOMAIN` (must match frontend URL)
 
@@ -199,7 +204,8 @@ node -e "require('dotenv').config(); console.log(process.env.FLASHPOINT_PATH)"
 5. Limit exposed ports (don't expose all services)
 6. Rotate secrets periodically
 7. Use environment-specific files (.env.production, .env.development)
-8. Store secrets in secure management system (AWS Secrets Manager, HashiCorp Vault)
+8. Store secrets in secure management system (AWS Secrets Manager, HashiCorp
+   Vault)
 9. Use read-only mounts for Flashpoint data in Docker
 
 ## Next Steps
diff --git a/docs/09-deployment/health-checks.md b/docs/09-deployment/health-checks.md
index e5780e5..efc998c 100644
--- a/docs/09-deployment/health-checks.md
+++ b/docs/09-deployment/health-checks.md
@@ -10,7 +10,15 @@ All services include wget-based health checks in docker-compose files.
 
 ```yaml
 healthcheck:
-  test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:3100/api/health"]
+  test:
+    [
+      'CMD',
+      'wget',
+      '--quiet',
+      '--tries=1',
+      '--spider',
+      'http://localhost:3100/api/health',
+    ]
   interval: 30s
   timeout: 10s
   retries: 3
@@ -18,6 +26,7 @@ healthcheck:
 ```
 
 Response:
+
 ```json
 {
   "status": "healthy",
@@ -38,7 +47,7 @@ Response:
 
 ```yaml
 healthcheck:
-  test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost/"]
+  test: ['CMD', 'wget', '--quiet', '--tries=1', '--spider', 'http://localhost/']
   interval: 30s
   timeout: 3s
   retries: 3
@@ -49,7 +58,15 @@ healthcheck:
 
 ```yaml
 healthcheck:
-  test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:22500/"]
+  test:
+    [
+      'CMD',
+      'wget',
+      '--quiet',
+      '--tries=1',
+      '--spider',
+      'http://localhost:22500/',
+    ]
   interval: 30s
   timeout: 10s
   retries: 3
@@ -100,6 +117,7 @@ backend:
 ```
 
 **Sequence:**
+
 1. Game Service → health check → healthy (30s)
 2. Backend → health check → healthy (40s)
 3. Frontend → health check → healthy (10s)
@@ -119,17 +137,20 @@ docker inspect flashpoint-backend --format='{{range .State.Health.Log}}{{.ExitCo
 **Health Check Keeps Failing:**
 
 1. **Service not fully started**: Increase `start_period`
+
    ```yaml
    healthcheck:
      start_period: 60s
    ```
 
 2. **Database issues**: Verify flashpoint.sqlite exists and is readable
+
    ```bash
    docker-compose exec backend ls -la /data/flashpoint/Data/flashpoint.sqlite
    ```
 
 3. **Port conflicts**: Ensure ports are available
+
    ```bash
    netstat -tulpn | grep -E '(3100|80|22500|22501)'
    ```
@@ -143,10 +164,10 @@ docker inspect flashpoint-backend --format='{{range .State.Health.Log}}{{.ExitCo
 
 ```yaml
 healthcheck:
-  interval: 60s      # Check less frequently
-  timeout: 30s       # Allow more time
-  retries: 5         # More retries
-  start_period: 90s  # Longer grace period
+  interval: 60s # Check less frequently
+  timeout: 30s # Allow more time
+  retries: 5 # More retries
+  start_period: 90s # Longer grace period
 ```
 
 ## Integration with Orchestrators
diff --git a/docs/09-deployment/security-considerations.md b/docs/09-deployment/security-considerations.md
index 0cf3e80..b7ac364 100644
--- a/docs/09-deployment/security-considerations.md
+++ b/docs/09-deployment/security-considerations.md
@@ -5,6 +5,7 @@ Production deployment security checklist for Flashpoint Web.
 ## Pre-Production Checklist
 
 **Critical Items:**
+
 - [ ] Change default JWT secret (min 64 characters)
 - [ ] Set strong CORS origin (no wildcards)
 - [ ] Enable HTTPS with valid SSL certificate
@@ -17,7 +18,8 @@ Production deployment security checklist for Flashpoint Web.
 - [ ] Configure Nginx reverse proxy
 - [ ] Set up fail2ban for intrusion detection
 - [ ] Enable security event logging
-- [ ] Implement password complexity requirements (min 12 chars, uppercase, lowercase, numbers)
+- [ ] Implement password complexity requirements (min 12 chars, uppercase,
+      lowercase, numbers)
 - [ ] Configure session timeout (1h access token, 7d refresh token)
 - [ ] Enable database encryption for sensitive fields
 - [ ] Set up encrypted backups
@@ -29,32 +31,38 @@ Production deployment security checklist for Flashpoint Web.
 **CRITICAL: Change default JWT secret in production!**
 
 Generate 64+ character secret:
+
 ```bash
 openssl rand -hex 64
 ```
 
 Set in environment:
+
 ```bash
 JWT_SECRET=a1b2c3d4e5f6789012345678901234567890abcdefghijklmnopqrstuvwxyz
 JWT_EXPIRES_IN=1h
 ```
 
-Store in secure secret management system (AWS Secrets Manager, HashiCorp Vault, not in config files).
+Store in secure secret management system (AWS Secrets Manager, HashiCorp Vault,
+not in config files).
 
 ## Authentication & Authorization
 
 **Password Hashing:**
+
 - Algorithm: bcrypt with cost 12
 - Min length: 8 (recommend 12+)
 - Requirements: uppercase, lowercase, numbers
 
 **Permission System:**
+
 - Admin > Moderator > User > Guest
 - Permissions cached 5 minutes (auto-invalidated on changes)
 - System roles (Admin, User, Guest) cannot be modified
 - All protected endpoints require explicit permissions
 
 **Session Management:**
+
 - Access tokens: 1 hour (short-lived)
 - Refresh tokens: 7 days (stored in database)
 - Old tokens automatically revoked on refresh
@@ -75,12 +83,14 @@ DOMAIN=https://flashpoint.example.com,https://www.flashpoint.example.com
 ## Rate Limiting
 
 Enable on all endpoints:
+
 ```bash
 RATE_LIMIT_WINDOW_MS=60000      # 1 minute window
 RATE_LIMIT_MAX_REQUESTS=100     # 100 requests per window
 ```
 
 Nginx rate limiting zones:
+
 ```nginx
 limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
 limit_req_zone $binary_remote_addr zone=auth:10m rate=1r/m;
@@ -91,6 +101,7 @@ Auth endpoints: max 5 attempts per 15 minutes
 ## HTTP Security Headers
 
 Using Helmet.js:
+
 ```typescript
 // Enabled in production
 - Strict-Transport-Security: 1 year, includeSubDomains, preload
@@ -108,6 +119,7 @@ Using Helmet.js:
 **Ciphers:** Modern Mozilla configuration (AES-GCM, ChaCha20-Poly1305)
 
 **Certificate:** Let's Encrypt with auto-renewal:
+
 ```bash
 certbot renew --dry-run
 # Add cron job: 0 3 * * * certbot renew --post-hook "systemctl reload nginx" --quiet
@@ -118,6 +130,7 @@ certbot renew --dry-run
 **Non-root user:** All containers run as non-root (UID 1000)
 
 **Resource limits:**
+
 ```yaml
 deploy:
   resources:
@@ -129,17 +142,20 @@ deploy:
 ```
 
 **Image scanning:**
+
 ```bash
 docker scout cves flashpoint-backend:latest
 # or
 trivy image flashpoint-backend:latest
 ```
 
-**Secrets management:** Never embed in images. Use environment variables or Docker secrets.
+**Secrets management:** Never embed in images. Use environment variables or
+Docker secrets.
 
 ## Network Security
 
 **Firewall (UFW):**
+
 ```bash
 sudo ufw allow 80/tcp
 sudo ufw allow 443/tcp
@@ -150,15 +166,18 @@ sudo ufw enable
 ```
 
 **Docker network isolation:**
+
 - Internal networks only accessible within Docker
 - Services behind reverse proxy only
 - Backend/game-service not exposed to host
 
-**Reverse proxy only:** All external traffic goes through Nginx, services bind to localhost.
+**Reverse proxy only:** All external traffic goes through Nginx, services bind
+to localhost.
 
 ## Input Validation
 
 All user input validated with Zod schemas:
+
 - Username: 3-50 chars, alphanumeric + hyphens/underscores
 - Email: valid format, max 255 chars
 - Password: 8+ chars, uppercase, lowercase, numbers
@@ -168,6 +187,7 @@ All user input validated with Zod schemas:
 ## Path Traversal Prevention
 
 All file paths validated:
+
 ```typescript
 const resolvedPath = path.resolve(baseDir, userPath);
 if (!resolvedPath.startsWith(baseDir)) {
@@ -180,6 +200,7 @@ URL paths sanitized before processing (null bytes, ../, backslash checks).
 ## SQL Injection Prevention
 
 **ALWAYS use parameterized queries:**
+
 ```typescript
 // Good
 db.prepare('SELECT * FROM game WHERE title LIKE ?').all(`%${query}%`);
@@ -189,6 +210,7 @@ db.prepare(`SELECT * FROM game WHERE title LIKE '%${query}%'`).all();
 ```
 
 **Database permissions:**
+
 - Flashpoint database: read-only
 - User database: read/write by app only
 - No DROP/ALTER permissions
@@ -197,6 +219,7 @@ db.prepare(`SELECT * FROM game WHERE title LIKE '%${query}%'`).all();
 ## Logging and Monitoring
 
 **Security events logged:**
+
 - Failed login attempts
 - Permission violations (403 errors)
 - Rate limit violations
@@ -205,11 +228,13 @@ db.prepare(`SELECT * FROM game WHERE title LIKE '%${query}%'`).all();
 - System configuration changes
 
 **Intrusion detection:** fail2ban with:
+
 - Max 5 failed logins per 600s
 - Ban for 3600s
 - Monitor `/var/log/nginx/flashpoint-access.log`
 
 **Alert on:**
+
 - Multiple failed logins from same IP
 - Repeated rate limit violations
 - Database access errors
@@ -218,6 +243,7 @@ db.prepare(`SELECT * FROM game WHERE title LIKE '%${query}%'`).all();
 ## Data Protection
 
 **Sensitive fields encrypted:**
+
 ```typescript
 // AES-256-GCM encryption for sensitive data
 encrypt(text) {
@@ -228,6 +254,7 @@ encrypt(text) {
 ```
 
 **Backups encrypted with GPG:**
+
 ```bash
 sqlite3 user.db ".backup user-db.backup"
 gpg --symmetric --cipher-algo AES256 user-db.backup
@@ -235,6 +262,7 @@ shred -u user-db.backup  # Securely delete unencrypted
 ```
 
 **Data retention:**
+
 ```sql
 -- Delete old play sessions
 DELETE FROM play_sessions WHERE created_at < datetime('now', '-90 days');
@@ -246,23 +274,27 @@ DELETE FROM audit_logs WHERE created_at < datetime('now', '-1 year');
 ## Regular Maintenance
 
 **Weekly:**
+
 - Review security logs for anomalies
 - Check failed login attempts
 - Monitor rate limit violations
 
 **Monthly:**
+
 - Update dependencies (`npm audit`)
 - Review user permissions
 - Check SSL certificate expiration
 - Test backup restoration
 
 **Quarterly:**
+
 - Rotate JWT secrets
 - Security audit of codebase
 - Penetration testing
 - Update firewall rules
 
 **Annually:**
+
 - Full security assessment
 - Third-party audit
 - Disaster recovery drill
diff --git a/docs/10-features/01-authentication-authorization.md b/docs/10-features/01-authentication-authorization.md
index c7b21c8..f372ec0 100644
--- a/docs/10-features/01-authentication-authorization.md
+++ b/docs/10-features/01-authentication-authorization.md
@@ -2,11 +2,14 @@
 
 ## Overview
 
-JWT-based authentication system with Role-Based Access Control (RBAC). Enables secure user registration, login, session management, and fine-grained permission control across the application.
+JWT-based authentication system with Role-Based Access Control (RBAC). Enables
+secure user registration, login, session management, and fine-grained permission
+control across the application.
 
 ## Architecture
 
 **Backend Components:**
+
 - `AuthService`: Core authentication logic
 - Auth routes (routes/auth.ts): REST API endpoints
 - JWT utilities (utils/jwt.ts): Token generation and verification
@@ -15,6 +18,7 @@ JWT-based authentication system with Role-Based Access Control (RBAC). Enables s
 - Auth middleware (middleware/auth.ts): JWT validation
 
 **Frontend Components:**
+
 - `AuthContext`: React context for auth state
 - `LoginForm`: Login UI component
 - `RegisterForm`: Registration UI component
@@ -25,6 +29,7 @@ JWT-based authentication system with Role-Based Access Control (RBAC). Enables s
 ## Database Schema
 
 **users table:**
+
 ```sql
 CREATE TABLE users (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -41,6 +46,7 @@ CREATE TABLE users (
 ```
 
 **refresh_tokens table:**
+
 ```sql
 CREATE TABLE refresh_tokens (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -54,6 +60,7 @@ CREATE TABLE refresh_tokens (
 ```
 
 **login_attempts table:**
+
 ```sql
 CREATE TABLE login_attempts (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -67,32 +74,43 @@ CREATE TABLE login_attempts (
 ## API Endpoints
 
 #### POST /api/auth/register
+
 Register a new user account.
+
 - **Body:** `{ "username", "email", "password" }`
 - **Response:** User object + tokens (201)
 - **Validation:** username 3-50 chars, email valid format, password min 6 chars
-- **Errors:** 400 validation, 403 registration disabled, 409 duplicate username/email
+- **Errors:** 400 validation, 403 registration disabled, 409 duplicate
+  username/email
 
 #### POST /api/auth/login
+
 Authenticate with username and password.
+
 - **Body:** `{ "username", "password" }`
 - **Response:** User object + tokens
 - **Rate Limiting:** 5 failed attempts locks account for 15 minutes
 - **Errors:** 401 invalid credentials, 429 too many attempts
 
 #### POST /api/auth/logout
+
 Revoke refresh token and logout.
+
 - **Body:** `{ "refreshToken" }`
 - **Response:** `{ "success": true }`
 
 #### POST /api/auth/refresh
+
 Refresh access token using refresh token.
+
 - **Body:** `{ "refreshToken" }`
 - **Response:** New access token + new refresh token
 - **Note:** Old refresh token automatically revoked
 
 #### GET /api/auth/me
+
 Get current authenticated user information.
+
 - **Headers:** `Authorization: Bearer {accessToken}`
 - **Response:** User object with permissions
 
@@ -135,25 +153,30 @@ Get current authenticated user information.
 ## Default Roles
 
 **Admin (priority: 100):**
+
 - All permissions granted
 - Can manage users, roles, and settings
 
 **User (priority: 50):**
+
 - games.read, games.play, games.download
 - playlists.read, .create, .update, .delete
 - Cannot manage users, roles, settings, or view activity logs
 
 **Guest (priority: 0):**
+
 - games.read, playlists.read
 - Read-only access only
 
 ## Permissions
 
-Complete permission list in [Role-Based Access Control](./07-role-permissions.md)
+Complete permission list in
+[Role-Based Access Control](./07-role-permissions.md)
 
 ## Configuration
 
 **Environment Variables (.env):**
+
 ```bash
 JWT_SECRET=your-secret-key-here        # Change in production
 JWT_EXPIRES_IN=1h                       # Token expiration
@@ -162,6 +185,7 @@ DOMAIN=http://localhost:5173           # Frontend URL
 ```
 
 **Auth Settings (Database):**
+
 - `auth.guestAccessEnabled` - Allow guest browsing (default: true)
 - `auth.userRegistrationEnabled` - Allow new user registration (default: true)
 - `auth.maxLoginAttempts` - Before lockout (default: 5)
@@ -170,11 +194,13 @@ DOMAIN=http://localhost:5173           # Frontend URL
 ## Security Features
 
 **Password Security:**
+
 - Bcrypt hashing with 10 salt rounds
 - Minimum 6 character requirement
 - Password not returned in API responses
 
 **Token Security:**
+
 - Access tokens expire in 1 hour
 - Refresh tokens expire in 30 days
 - Tokens use HS256 algorithm
@@ -182,12 +208,14 @@ DOMAIN=http://localhost:5173           # Frontend URL
 - Bulk token revocation available (admin)
 
 **Rate Limiting:**
+
 - 5 failed login attempts before lockout
 - 15 minute lockout duration
 - Tracking by both username and IP address
 - Old login attempts cleaned up after 24 hours
 
 **Session Security:**
+
 - IP address and user agent tracked per session
 - Activity logging for audit trail
 - Tokens stored in localStorage (client-side)
@@ -196,27 +224,30 @@ DOMAIN=http://localhost:5173           # Frontend URL
 ## Common Use Cases
 
 ### 1. User Registration
+
 ```typescript
 const registerMutation = useRegister();
 
 await registerMutation.mutateAsync({
   username: 'johndoe',
   email: 'john@example.com',
-  password: 'secure123'
+  password: 'secure123',
 });
 ```
 
 ### 2. User Login
+
 ```typescript
 const loginMutation = useLogin();
 
 await loginMutation.mutateAsync({
   username: 'johndoe',
-  password: 'secure123'
+  password: 'secure123',
 });
 ```
 
 ### 3. Guest Access
+
 ```typescript
 const { loginAsGuest } = useAuth();
 
@@ -224,31 +255,39 @@ loginAsGuest();
 ```
 
 ### 4. Protected Route
+
 ```tsx
-<Route path="/admin/users" element={
-  <ProtectedRoute requiredPermissions={['users.read']}>
-    <UsersView />
-  </ProtectedRoute>
-} />
+<Route
+  path="/admin/users"
+  element={
+    <ProtectedRoute requiredPermissions={['users.read']}>
+      <UsersView />
+    </ProtectedRoute>
+  }
+/>
 ```
 
 ### 5. Permission-Based UI
+
 ```tsx
 const { hasPermission } = useAuth();
 
-{hasPermission('users.create') && (
-  <Button onClick={handleCreateUser}>Create User</Button>
-)}
+{
+  hasPermission('users.create') && (
+    <Button onClick={handleCreateUser}>Create User</Button>
+  );
+}
 ```
 
 ### 6. Change Password
+
 ```typescript
 const mutation = useChangePassword();
 
 await mutation.mutateAsync({
   userId: currentUser.id,
   currentPassword: 'old123',
-  newPassword: 'new456'
+  newPassword: 'new456',
 });
 ```
 
@@ -266,21 +305,25 @@ await mutation.mutateAsync({
 ## Troubleshooting
 
 **"Invalid credentials" error:**
+
 - Verify username and password are correct
 - Check if account is active (is_active = 1)
 - Ensure password was hashed correctly during registration
 
 **"Too many login attempts" error:**
+
 - Wait for lockout duration to expire (15 minutes default)
 - Or manually clear login attempts from database
 - Check if IP address or username is being rate-limited
 
 **Token expired errors:**
+
 - Implement automatic token refresh on client
 - Check system clock synchronization
 - Verify JWT expiration times in configuration
 
 **Permission denied errors:**
+
 - Verify user has correct role assigned
 - Check role-permission mappings in database
 - Ensure permissions loaded correctly in token
diff --git a/docs/10-features/02-game-browsing-filtering.md b/docs/10-features/02-game-browsing-filtering.md
index c23fbd6..b1ba27e 100644
--- a/docs/10-features/02-game-browsing-filtering.md
+++ b/docs/10-features/02-game-browsing-filtering.md
@@ -2,16 +2,21 @@
 
 ## Overview
 
-Game browsing and filtering provides a comprehensive interface for discovering and exploring games from the Flashpoint Archive. Users can search, filter by multiple criteria, sort results, and navigate through paginated collections with grid and list view options.
+Game browsing and filtering provides a comprehensive interface for discovering
+and exploring games from the Flashpoint Archive. Users can search, filter by
+multiple criteria, sort results, and navigate through paginated collections with
+grid and list view options.
 
 ## Architecture
 
 **Backend Components:**
+
 - `GameService`: Database queries and filtering logic
 - Game routes (routes/games.ts): REST API endpoints
 - Query builder with dynamic WHERE clauses
 
 **Frontend Components:**
+
 - `BrowseView`: Main game browsing page
 - `FilterPanel`: Advanced filter UI
 - `SearchBar`: Search input component
@@ -22,11 +27,13 @@ Game browsing and filtering provides a comprehensive interface for discovering a
 ## Features
 
 **Search:**
+
 - Free-text search across game titles
 - Real-time search with debouncing (300ms)
 - Search persisted in URL query parameters
 
 **Filters:**
+
 - Platform, Series, Developer, Publisher
 - Play Mode, Language, Tags
 - Year Range (1970-2100)
@@ -34,15 +41,18 @@ Game browsing and filtering provides a comprehensive interface for discovering a
 - Show/hide broken games and extreme content
 
 **Sorting:**
+
 - By: Title, Release Date, Date Added, Developer
 - Order: Ascending (A-Z) or Descending (Z-A)
 
 **Pagination:**
+
 - Configurable items per page (default: 50, max: 100)
 - Page navigation controls
 - Total count display
 
 **View Modes:**
+
 - Grid view (responsive 1-5 columns)
 - List view (compact table format)
 - Adjustable card size
@@ -50,9 +60,11 @@ Game browsing and filtering provides a comprehensive interface for discovering a
 ## API Endpoints
 
 #### GET /api/games
+
 Get paginated list of games with filters.
 
 **Query Parameters:**
+
 - `search` - Search in titles
 - `platform`, `series`, `developers`, `publishers` - Comma-separated
 - `playModes`, `languages`, `tags` - Comma-separated
@@ -65,6 +77,7 @@ Get paginated list of games with filters.
 - `showBroken`, `showExtreme` - Boolean toggles
 
 **Response:**
+
 ```json
 {
   "data": [
@@ -88,25 +101,28 @@ Get paginated list of games with filters.
 ```
 
 #### GET /api/games/filter-options
+
 Get all available filter options with counts.
 
 **Response:**
+
 ```json
 {
   "platforms": [
     { "name": "Flash", "count": 85234 },
     { "name": "HTML5", "count": 12456 }
   ],
-  "series": [ { "name": "Mario", "count": 234 } ],
-  "developers": [ { "name": "Newgrounds", "count": 5432 } ],
-  "publishers": [ { "name": "Armor Games", "count": 2341 } ],
-  "playModes": [ { "name": "Single Player", "count": 45678 } ],
-  "languages": [ { "name": "en", "count": 67890 } ],
-  "tags": [ { "name": "Puzzle", "count": 8765 } ]
+  "series": [{ "name": "Mario", "count": 234 }],
+  "developers": [{ "name": "Newgrounds", "count": 5432 }],
+  "publishers": [{ "name": "Armor Games", "count": 2341 }],
+  "playModes": [{ "name": "Single Player", "count": 45678 }],
+  "languages": [{ "name": "en", "count": 67890 }],
+  "tags": [{ "name": "Puzzle", "count": 8765 }]
 }
 ```
 
 #### GET /api/games/:id
+
 Get detailed information for a single game.
 
 **Response:** Game object with full metadata and tags array
@@ -114,6 +130,7 @@ Get detailed information for a single game.
 ## Database Queries
 
 **Main Query Structure:**
+
 ```sql
 SELECT g.*, p.name as platformName,
   (SELECT COUNT(*) FROM game_data WHERE gameId = g.id) > 0 as presentOnDisk
@@ -125,6 +142,7 @@ LIMIT [limit] OFFSET [offset]
 ```
 
 **Filter Conditions:**
+
 - Search: `(g.title LIKE ? OR g.alternateTitles LIKE ?)`
 - Platforms: `p.name IN (?)`
 - Series: `g.series IN (?)`
@@ -134,16 +152,19 @@ LIMIT [limit] OFFSET [offset]
 ## Performance Optimizations
 
 **Debouncing:**
+
 - Search input: 300ms delay
 - Year inputs: 500ms delay
 - Prevents excessive API calls
 
 **Query Caching:**
+
 - Filter options cached for 5 minutes
 - Game results cached with unique query keys
 - Stale-while-revalidate strategy
 
 **Database Indexes:**
+
 ```sql
 CREATE INDEX idx_game_title ON game(title);
 CREATE INDEX idx_game_platform ON game(platformId);
@@ -154,16 +175,19 @@ CREATE INDEX idx_game_release_date ON game(releaseDate);
 ## State Management
 
 **URL State (React Router search params):**
+
 - All filter values, search, sort, pagination
 - Enables shareable URLs
 - Preserved on navigation
 
 **Query State (TanStack Query):**
+
 - Game data caching
 - Filter options caching
 - Automatic refetch on filter change
 
 **UI State (Local component state):**
+
 - Dropdown open/close states
 - View mode selection
 - Card size preference
@@ -171,18 +195,21 @@ CREATE INDEX idx_game_release_date ON game(releaseDate);
 ## Common Use Cases
 
 ### 1. Basic Search
+
 ```typescript
 // URL: ?search=mario
 // API: GET /api/games?search=mario&page=1&limit=50
 ```
 
 ### 2. Filter by Multiple Platforms
+
 ```typescript
 // URL: ?platform=Flash,HTML5
 // API: GET /api/games?platform=Flash,HTML5&page=1
 ```
 
 ### 3. Advanced Filtering
+
 ```typescript
 const filters = {
   platform: 'Flash,HTML5',
@@ -190,19 +217,18 @@ const filters = {
   yearFrom: 2000,
   yearTo: 2010,
   sortBy: 'releaseDate',
-  sortOrder: 'desc'
+  sortOrder: 'desc',
 };
 ```
 
 ### 4. Platform-Specific View
+
 ```tsx
-<BrowseView
-  platformFilter="Flash"
-  showPlatformFilter={false}
-/>
+<BrowseView platformFilter="Flash" showPlatformFilter={false} />
 ```
 
 ### 5. Shareable Filtered Link
+
 ```
 https://flashpoint.local/browse?platform=Flash&tags=Puzzle&yearFrom=2005
 ```
@@ -221,24 +247,28 @@ https://flashpoint.local/browse?platform=Flash&tags=Puzzle&yearFrom=2005
 ## Troubleshooting
 
 **No results found:**
+
 - Check if filters are too restrictive
 - Verify database connectivity
 - Check for typos in search query
 - Ensure filter values are valid
 
 **Slow filtering:**
+
 - Add database indexes on filter columns
 - Reduce page size
 - Check for complex tag queries
 - Monitor database query performance
 
 **Filters not working:**
+
 - Verify URL params are updating
 - Check API query parameter parsing
 - Ensure filter values are properly encoded
 - Validate query schema with Zod
 
 **Mobile filter issues:**
+
 - Check responsive breakpoints
 - Verify popover positioning
 - Test touch interactions
diff --git a/docs/10-features/03-game-playing.md b/docs/10-features/03-game-playing.md
index 605b6c8..452ab65 100644
--- a/docs/10-features/03-game-playing.md
+++ b/docs/10-features/03-game-playing.md
@@ -2,17 +2,22 @@
 
 ## Overview
 
-Game playing enables users to play Flash and HTML5 games directly in their web browser. Flash games use the Ruffle WebAssembly emulator, while HTML5 games run natively. The player supports fullscreen mode, loading indicators, and error handling.
+Game playing enables users to play Flash and HTML5 games directly in their web
+browser. Flash games use the Ruffle WebAssembly emulator, while HTML5 games run
+natively. The player supports fullscreen mode, loading indicators, and error
+handling.
 
 ## Architecture
 
 **Backend Components:**
+
 - Game Service: Provides game data and launch configuration
 - Game-Service Proxy: Serves game files (ports 22500/22501)
 - HTTP Proxy Server: Handles Flash content delivery
 - GameZip Server: Mounts and serves files from ZIP archives
 
 **Frontend Components:**
+
 - `GamePlayer`: Main player component (reusable)
 - `RufflePlayer`: Ruffle Flash emulator wrapper
 - `GamePlayerView`: Full-page player route
@@ -28,11 +33,13 @@ Game playing enables users to play Flash and HTML5 games directly in their web b
 ## Game Launch Process
 
 **Step 1: Fetch Launch Data**
+
 ```
 GET /api/games/:id/launch
 ```
 
 Backend:
+
 1. Fetch game from flashpoint.sqlite
 2. Check if game has data on disk
 3. Auto-mount ZIP file if needed
@@ -41,25 +48,30 @@ Backend:
 6. Return launch configuration
 
 **Step 2: Initialize Player**
+
 - Check if game can play in browser (canPlayInBrowser)
 - Select appropriate player (Ruffle vs iframe)
 - Mount player component
 
 **Step 3: Load Content**
+
 - **Flash:** Ruffle loads SWF from proxy URL
 - **HTML5:** Iframe loads game page from proxy URL
 - Game service proxies requests to local files or CDN
 
 **Step 4: Track Session**
+
 - POST /api/play/start with gameId
 - Backend creates play session record
 - Returns sessionId
 
 **Step 5: Play**
+
 - User interacts with game
 - All game assets served through proxy
 
 **Step 6: End Session**
+
 - User closes player or navigates away
 - POST /api/play/end with sessionId
 - Backend calculates duration and updates stats
@@ -67,9 +79,11 @@ Backend:
 ## API Endpoints
 
 #### GET /api/games/:id/launch
+
 Get game launch configuration.
 
 **Response:**
+
 ```json
 {
   "gameId": "550e8400-e29b-41d4-a716-446655440000",
@@ -84,6 +98,7 @@ Get game launch configuration.
 ```
 
 **For games without content:**
+
 ```json
 {
   "gameId": "...",
@@ -100,18 +115,20 @@ Get game launch configuration.
 Ruffle is a Flash Player emulator written in Rust and compiled to WebAssembly.
 
 **Installation:**
+
 - Installed from npm package `@ruffle-rs/ruffle`
 - Files copied to `frontend/public/ruffle/` during postinstall
 - Includes: ruffle.js, ruffle_web.wasm, ruffle_web.js
 
 **RufflePlayer Component:**
+
 ```typescript
 interface RufflePlayerProps {
-  swfUrl: string;           // URL to SWF file
-  width?: string;           // Player width
-  height?: string;          // Player height
-  className?: string;       // CSS classes
-  scaleMode?: ScaleMode;    // Scaling behavior
+  swfUrl: string; // URL to SWF file
+  width?: string; // Player width
+  height?: string; // Player height
+  className?: string; // CSS classes
+  scaleMode?: ScaleMode; // Scaling behavior
   onLoadError?: (error: Error) => void;
   onLoadSuccess?: () => void;
 }
@@ -120,6 +137,7 @@ type ScaleMode = 'exactfit' | 'noborder' | 'showall' | 'noscale';
 ```
 
 **Ruffle Configuration:**
+
 ```typescript
 const ruffleConfig = {
   autoplay: 'auto',
@@ -146,6 +164,7 @@ HTML5 games load in a sandboxed iframe:
 ```
 
 **Sandbox Permissions:**
+
 - allow-scripts, allow-same-origin, allow-forms
 - allow-popups, allow-modals, allow-pointer-lock
 - allow-top-navigation-by-user-activation
@@ -153,6 +172,7 @@ HTML5 games load in a sandboxed iframe:
 ## Game Service Proxy
 
 **HTTP Proxy Server (Port 22500):**
+
 - Serves legacy web content
 - Fallback chain:
   1. Local htdocs folder
@@ -162,6 +182,7 @@ HTML5 games load in a sandboxed iframe:
   5. Local cache for downloaded content
 
 **Example Request Flow:**
+
 ```
 Browser: GET http://localhost:22500/http://uploads.ungrounded.net/396000/396724_DAplayer_V6.swf
 Proxy: Check local htdocs, game data, mounted ZIPs, fetch from CDN if needed
@@ -169,6 +190,7 @@ Response: File with correct MIME type
 ```
 
 **GameZip Server (Port 22501):**
+
 - Mounts ZIP files from Data/Games/
 - Streams files without extraction
 - Uses node-stream-zip for efficiency
@@ -198,16 +220,17 @@ useEffect(() => {
 
 ## Ruffle Scale Modes
 
-| Mode | Behavior | Use Case |
-|------|----------|----------|
-| showall (default) | Maintains aspect ratio with letterboxing | Most games |
-| exactfit | Stretches to fill container | Full-screen games |
-| noborder | Maintains aspect ratio, crops if needed | No letterboxing needed |
-| noscale | Original game dimensions | Pixel-perfect games |
+| Mode              | Behavior                                 | Use Case               |
+| ----------------- | ---------------------------------------- | ---------------------- |
+| showall (default) | Maintains aspect ratio with letterboxing | Most games             |
+| exactfit          | Stretches to fill container              | Full-screen games      |
+| noborder          | Maintains aspect ratio, crops if needed  | No letterboxing needed |
+| noscale           | Original game dimensions                 | Pixel-perfect games    |
 
 ## Common Use Cases
 
 ### 1. Play Flash Game
+
 ```tsx
 const navigate = useNavigate();
 navigate(`/games/${gameId}/play`);
@@ -216,17 +239,20 @@ navigate(`/games/${gameId}/play`);
 ```
 
 ### 2. Play HTML5 Game
+
 ```tsx
 // Same flow as Flash, uses iframe instead of Ruffle
 ```
 
 ### 3. Fullscreen Mode
+
 ```tsx
 toggleFullscreen();
 // Player expands to fill screen, ESC to exit
 ```
 
 ### 4. Handle Unplayable Game
+
 ```tsx
 if (!launchData.canPlayInBrowser) {
   // Show error message
@@ -236,6 +262,7 @@ if (!launchData.canPlayInBrowser) {
 ```
 
 ### 5. Track Play Session
+
 ```typescript
 const { startSession, endSession } = usePlayTracking();
 
@@ -257,6 +284,7 @@ useEffect(() => {
 ## Error Handling
 
 **Flash Load Errors:**
+
 ```typescript
 onLoadError={(error) => {
   console.error('Ruffle error:', error);
@@ -266,6 +294,7 @@ onLoadError={(error) => {
 ```
 
 **HTML5 Load Errors:**
+
 ```typescript
 <iframe
   onError={() => {
@@ -275,6 +304,7 @@ onLoadError={(error) => {
 ```
 
 **No Content Available:**
+
 - Display alert with launch command
 - Show message "Cannot play in browser"
 
@@ -292,24 +322,28 @@ onLoadError={(error) => {
 ## Troubleshooting
 
 **Ruffle not loading:**
+
 - Verify ruffle.js is in public/ruffle/
 - Check browser console for errors
 - Ensure WebAssembly is supported
 - Update Ruffle to latest version
 
 **Black screen on Flash games:**
+
 - Check contentUrl is correct
 - Verify game file exists in htdocs or ZIPs
 - Inspect network requests for 404s
 - Check CORS headers from proxy
 
 **HTML5 games not loading:**
+
 - Verify iframe sandbox permissions
 - Check for mixed content warnings
 - Inspect browser console for errors
 - Test content URL directly
 
 **Fullscreen not working:**
+
 - Verify fullscreen button handler
 - Check CSS z-index conflicts
 - Ensure ESC key listener attached
diff --git a/docs/10-features/04-play-session-tracking.md b/docs/10-features/04-play-session-tracking.md
index ebf902c..9474727 100644
--- a/docs/10-features/04-play-session-tracking.md
+++ b/docs/10-features/04-play-session-tracking.md
@@ -2,16 +2,20 @@
 
 ## Overview
 
-Play session tracking automatically monitors and records user gameplay sessions, providing statistics on games played, playtime, and engagement metrics through visualizations and dashboard displays.
+Play session tracking automatically monitors and records user gameplay sessions,
+providing statistics on games played, playtime, and engagement metrics through
+visualizations and dashboard displays.
 
 ## Architecture
 
 **Backend Components:**
+
 - `PlayTrackingService`: Core session tracking logic
 - Play tracking routes (routes/play-tracking.ts): REST API
 - Background jobs: Abandoned session cleanup
 
 **Frontend Components:**
+
 - `DashboardView`: Main statistics page
 - `UserStatsPanel`: Overview stats widget
 - `TopGamesChart`: Bar chart component
@@ -23,6 +27,7 @@ Play session tracking automatically monitors and records user gameplay sessions,
 ## Database Schema
 
 **user_game_plays table:**
+
 ```sql
 CREATE TABLE user_game_plays (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -38,6 +43,7 @@ CREATE TABLE user_game_plays (
 ```
 
 **user_game_stats table (aggregated):**
+
 ```sql
 CREATE TABLE user_game_stats (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -54,6 +60,7 @@ CREATE TABLE user_game_stats (
 ```
 
 **user_stats table (overall stats):**
+
 ```sql
 CREATE TABLE user_stats (
   user_id INTEGER PRIMARY KEY,
@@ -70,17 +77,23 @@ CREATE TABLE user_stats (
 ## API Endpoints
 
 #### POST /api/play/start
+
 Start a new play session.
+
 - **Body:** `{ "gameId", "gameTitle" }`
 - **Response:** `{ "success": true, "sessionId": "uuid" }`
 
 #### POST /api/play/end
+
 End an active play session.
+
 - **Body:** `{ "sessionId" }`
 - **Response:** `{ "success": true }`
 
 #### GET /api/play/stats
+
 Get overall statistics for current user.
+
 - **Response:**
   ```json
   {
@@ -95,50 +108,64 @@ Get overall statistics for current user.
   ```
 
 #### GET /api/play/game-stats
+
 Get per-game statistics.
+
 - **Query:** `limit`, `offset`
 - **Response:** Array of game statistics with play counts and duration
 
 #### GET /api/play/history
+
 Get play session history.
+
 - **Query:** `limit`, `offset`
 - **Response:** Array of sessions with formatted duration
 
 #### GET /api/play/top-games
+
 Get top played games by playtime.
+
 - **Query:** `limit`
 - **Response:** Array of top games with playtime
 
 #### GET /api/play/activity-over-time
+
 Get daily play activity aggregated over time.
+
 - **Query:** `days` (max 365, default 30)
 - **Response:** Array with date, sessions count, and total playtime
 
 #### GET /api/play/games-distribution
+
 Get playtime distribution across games.
+
 - **Query:** `limit`
 - **Response:** Array with game titles, playtime, and percentage
 
 ## Session Lifecycle
 
 **1. Session Start:**
+
 - Generate unique session ID (UUID)
 - Create record in user_game_plays table
 - Set started_at to current timestamp
 - Leave ended_at and duration_seconds NULL
 
 **2. Active Session:**
+
 - Session remains "active" while user plays
 - ended_at is NULL
 - Frontend keeps sessionId in memory
 
 **3. Session End:**
+
 - Set ended_at to current timestamp
 - Calculate duration: ended_at - started_at
 - Update user_game_stats (aggregate data)
 - Update user_stats (overall stats)
 
 **4. Abandoned Session Cleanup:**
+
 - Background job runs every 6 hours
 - Find sessions older than 24 hours with NULL ended_at
 - Set ended_at to started_at + 24 hours
@@ -146,11 +173,13 @@ Get playtime distribution across games.
 
 ## Permissions
 
-Play session tracking requires no special permissions. All authenticated users can track their own sessions.
+Play session tracking requires no special permissions. All authenticated users
+can track their own sessions.
 
 ## Common Use Cases
 
 ### 1. Automatic Session Tracking
+
 ```typescript
 const { startSession, endSession } = usePlayTracking();
 
@@ -172,14 +201,16 @@ useEffect(() => {
 ```
 
 ### 2. View Dashboard Statistics
+
 ```typescript
 const { data: stats } = useQuery({
   queryKey: ['play-stats'],
-  queryFn: () => api.get('/play/stats').then(res => res.data)
+  queryFn: () => api.get('/play/stats').then((res) => res.data),
 });
 ```
 
 ### 3. Analyze Top Games
+
 ```typescript
 const { data: topGames } = useQuery({
   queryKey: ['top-games', limit],
@@ -192,6 +223,7 @@ const { data: topGames } = useQuery({
 ```
 
 ### 4. Track Playtime Trends
+
 ```typescript
 const [days, setDays] = useState(30);
 
@@ -221,24 +253,28 @@ const { data: activity } = useQuery({
 ## Troubleshooting
 
 **Sessions not ending:**
+
 - Check if endSession() is called on unmount
 - Verify sessionId is preserved correctly
 - Look for network errors in console
 - Check abandoned session cleanup job
 
 **Incorrect playtime:**
+
 - Verify duration calculation (ended_at - started_at)
 - Check for sessions with NULL ended_at
 - Ensure timestamps are in UTC
 - Validate aggregation queries
 
 **Missing statistics:**
+
 - Verify sessions are ending properly
 - Check if user_game_stats is updating
 - Ensure aggregate triggers are working
 - Look for database constraints violations
 
 **Charts not rendering:**
+
 - Check if data format matches chart expectations
 - Verify Recharts is installed
 - Inspect console for errors
diff --git a/docs/10-features/05-playlists-favorites.md b/docs/10-features/05-playlists-favorites.md
index 53f3dcf..be45948 100644
--- a/docs/10-features/05-playlists-favorites.md
+++ b/docs/10-features/05-playlists-favorites.md
@@ -2,17 +2,21 @@
 
 ## Overview
 
-Playlists are JSON files stored in the Flashpoint Playlists directory for organizing games. Favorites are database-driven per-user favorites stored in the `user_favorites` table. Both features allow users to curate game collections.
+Playlists are JSON files stored in the Flashpoint Playlists directory for
+organizing games. Favorites are database-driven per-user favorites stored in the
+`user_favorites` table. Both features allow users to curate game collections.
 
 ## Architecture
 
 **Backend Components:**
+
 - `PlaylistService`: File-based playlist management
 - `FavoritesService`: Database-driven favorites management
 - Playlist routes (routes/playlists.ts): REST API for playlists
 - Favorites routes (routes/favorites.ts): REST API for favorites
 
 **Frontend Components:**
+
 - `PlaylistsView`: List all playlists
 - `PlaylistDetailView`: Single playlist with games
 - `FavoritesView`: Favorites-specific view
@@ -30,9 +34,7 @@ Playlists are JSON files stored in the Flashpoint Playlists directory for organi
   "author": "John Doe",
   "library": "arcade",
   "icon": "",
-  "games": [
-    { "gameId": "550e8400-e29b-41d4-a716-446655440001" }
-  ]
+  "games": [{ "gameId": "550e8400-e29b-41d4-a716-446655440001" }]
 }
 ```
 
@@ -40,10 +42,11 @@ Playlists are JSON files stored in the Flashpoint Playlists directory for organi
 
 ## Database Schema
 
-**Playlists:**
-Stored as JSON files in Flashpoint directory. NOT in database. This maintains compatibility with Flashpoint Launcher.
+**Playlists:** Stored as JSON files in Flashpoint directory. NOT in database.
+This maintains compatibility with Flashpoint Launcher.
 
 **Favorites:**
+
 ```sql
 CREATE TABLE user_favorites (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -58,30 +61,42 @@ CREATE TABLE user_favorites (
 ## API Endpoints
 
 #### GET /api/playlists
+
 Get all playlists.
+
 - **Response:** Array of playlist summaries with game IDs
 
 #### GET /api/playlists/:id
+
 Get single playlist with full game data.
+
 - **Response:** Playlist with games array containing full game metadata
 
 #### POST /api/playlists
+
 Create a new playlist.
+
 - **Body:** `{ "title", "description", "author", "library" }`
 - **Response:** Created playlist (201)
 
 #### POST /api/playlists/:id/games
+
 Add games to a playlist.
+
 - **Body:** `{ "gameIds": [...] }`
 - **Response:** Updated playlist with full game data
 
 #### DELETE /api/playlists/:id/games
+
 Remove games from a playlist.
+
 - **Body:** `{ "gameIds": [...] }`
 - **Response:** Updated playlist
 
 #### DELETE /api/playlists/:id
+
 Delete a playlist.
+
 - **Response:** `{ "success": true }`
 
 #### Favorites API Endpoints
@@ -89,6 +104,7 @@ Delete a playlist.
 Complete documentation: [Favorites API](../../06-api-reference/favorites-api.md)
 
 **Key Endpoints:**
+
 - `GET /api/favorites` - Get user's favorites
 - `GET /api/favorites/games` - Get favorites with full game data
 - `POST /api/favorites` - Add game to favorites
@@ -124,17 +140,20 @@ toggleFavorite(userId: number, gameId: string): { isFavorited: boolean } {
 ## Permissions
 
 **Playlist Permissions:**
+
 - `playlists.read` - View playlists
 - `playlists.create` - Create new playlists
 - `playlists.update` - Add/remove games
 - `playlists.delete` - Delete playlists
 
 **Favorites Permissions:**
+
 - `playlists.read` - View favorites
 - `playlists.create` - Add games to favorites
 - `playlists.delete` - Remove games from favorites
 
 **Default Assignments:**
+
 - **Admin:** All permissions
 - **User:** All permissions
 - **Guest:** Read-only (playlists.read)
@@ -142,38 +161,42 @@ toggleFavorite(userId: number, gameId: string): { isFavorited: boolean } {
 ## Common Use Cases
 
 ### 1. Create New Playlist
+
 ```typescript
 const createMutation = useCreatePlaylist();
 
 await createMutation.mutateAsync({
-  title: "My Puzzle Games",
-  description: "All my favorite puzzle games",
-  author: "John Doe",
-  library: "arcade"
+  title: 'My Puzzle Games',
+  description: 'All my favorite puzzle games',
+  author: 'John Doe',
+  library: 'arcade',
 });
 ```
 
 ### 2. Add Games to Playlist
+
 ```typescript
 const addMutation = useAddToPlaylist();
 
 await addMutation.mutateAsync({
-  playlistId: "my-playlist-id",
-  gameIds: ["game1", "game2", "game3"]
+  playlistId: 'my-playlist-id',
+  gameIds: ['game1', 'game2', 'game3'],
 });
 ```
 
 ### 3. Toggle Favorite
+
 ```typescript
 const { data } = await api.post('/favorites/toggle', { gameId });
 // isFavorited is now true or false
 ```
 
 ### 4. Get Favorites with Full Data
+
 ```typescript
 const { data: favorites } = useQuery({
   queryKey: ['favorites-games'],
-  queryFn: () => api.get('/favorites/games').then(res => res.data)
+  queryFn: () => api.get('/favorites/games').then((res) => res.data),
 });
 ```
 
@@ -193,17 +216,20 @@ const { data: favorites } = useQuery({
 ## Troubleshooting
 
 **Playlist not found:**
+
 - Verify playlistId is correct
 - Check if JSON file exists in Playlists directory
 - Ensure file is valid JSON
 - Check file permissions
 
 **Duplicate games in playlist:**
+
 - Verify duplicate detection logic
 - Check gameId format consistency
 - Ensure proper filtering on add
 
 **Favorites not persisting:**
+
 - Verify database migrations ran successfully
 - Check user_favorites table exists in user.db
 - Ensure user is authenticated
@@ -211,6 +237,7 @@ const { data: favorites } = useQuery({
 - Review backend logs for database errors
 
 **File write errors:**
+
 - Check directory permissions
 - Verify disk space available
 - Ensure Flashpoint path is correct
diff --git a/docs/10-features/06-user-management.md b/docs/10-features/06-user-management.md
index 46b101a..badd9e9 100644
--- a/docs/10-features/06-user-management.md
+++ b/docs/10-features/06-user-management.md
@@ -2,16 +2,20 @@
 
 ## Overview
 
-User management provides administrators with tools to create, view, update, and delete user accounts, assign roles, and manage user activation status. The system ensures at least one admin account exists.
+User management provides administrators with tools to create, view, update, and
+delete user accounts, assign roles, and manage user activation status. The
+system ensures at least one admin account exists.
 
 ## Architecture
 
 **Backend Components:**
+
 - `UserService`: User CRUD operations
 - User routes (routes/users.ts): REST API endpoints
 - `UserDatabaseService`: Database operations
 
 **Frontend Components:**
+
 - `UsersView`: Main user management page
 - `UserTable`: User list with actions
 - `UserForm`: Create/edit user dialog
@@ -20,6 +24,7 @@ User management provides administrators with tools to create, view, update, and
 ## Database Schema
 
 **users table:**
+
 ```sql
 CREATE TABLE users (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -36,6 +41,7 @@ CREATE TABLE users (
 ```
 
 **user_settings table:**
+
 ```sql
 CREATE TABLE user_settings (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -52,52 +58,67 @@ CREATE TABLE user_settings (
 ## API Endpoints
 
 #### GET /api/users
+
 Get all users with pagination.
+
 - **Permission:** users.read
 - **Query:** `page`, `limit`
 - **Response:** Paginated user list with role info
 
 #### GET /api/users/:id
+
 Get single user by ID.
+
 - **Permission:** users.read
 - **Response:** User object with permissions list
 
 #### POST /api/users
+
 Create a new user account.
+
 - **Permission:** users.create
 - **Body:** `{ "username", "email", "password", "roleId", "isActive" }`
 - **Response:** Created user (201)
 - **Validation:** Username/email unique, password min 6 chars
 
 #### PATCH /api/users/:id
+
 Update existing user account.
+
 - **Permission:** users.update
 - **Body:** Partial update of `{ "email", "roleId", "isActive" }`
 - **Response:** Updated user
 - **Note:** Cannot change username (immutable)
 
 #### DELETE /api/users/:id
+
 Delete a user account.
+
 - **Permission:** users.delete
 - **Rules:** Cannot delete self, cannot delete last admin
 - **Cascade:** Deletes tokens, sessions, settings
 - **Response:** `{ "success": true }`
 
 #### POST /api/users/:id/change-password
+
 Change user password.
+
 - **Permission:** Own account OR users.update
 - **Body:** `{ "currentPassword", "newPassword" }`
 - **Response:** `{ "success": true }`
 - **Note:** Admins don't need current password
 
 #### PATCH /api/users/me/settings
+
 Update current user's settings.
+
 - **Body:** Key-value pairs for user settings
 - **Response:** Updated settings object
 
 ## Business Rules
 
 **User Creation:**
+
 1. Username must be unique (case-insensitive)
 2. Email must be unique (case-insensitive)
 3. Password must meet minimum length requirement
@@ -105,18 +126,21 @@ Update current user's settings.
 5. Account is active by default
 
 **User Update:**
+
 1. Cannot change username
 2. Email must remain unique if changed
 3. Can change role to any valid role
 4. Can toggle active status
 
 **User Deletion:**
+
 1. Cannot delete yourself
 2. Cannot delete last admin user
 3. Cascade deletes tokens, play sessions, user settings
 4. Activity logs preserved (user_id set to NULL)
 
 **Password Changes:**
+
 1. Users can change own password (requires current password)
 2. Admins can change any password (no current password required)
 3. Password hashed with bcrypt before storage
@@ -124,12 +148,14 @@ Update current user's settings.
 ## Permissions
 
 User management operations require:
+
 - `users.read` - View user list and details
 - `users.create` - Create new user accounts
 - `users.update` - Update user information and roles
 - `users.delete` - Delete user accounts
 
 **Default Assignments:**
+
 - **Admin:** All user management permissions
 - **User:** None (can only manage own account)
 - **Guest:** None
@@ -137,6 +163,7 @@ User management operations require:
 ## Common Use Cases
 
 ### 1. Create New User
+
 ```typescript
 const createMutation = useCreateUser();
 
@@ -145,31 +172,34 @@ await createMutation.mutateAsync({
   email: 'newuser@example.com',
   password: 'secure123',
   roleId: 2,
-  isActive: true
+  isActive: true,
 });
 ```
 
 ### 2. Update User Role
+
 ```typescript
 const updateMutation = useUpdateUser();
 
 await updateMutation.mutateAsync({
   userId: 10,
-  data: { roleId: 3 }
+  data: { roleId: 3 },
 });
 ```
 
 ### 3. Deactivate User
+
 ```typescript
 const updateMutation = useUpdateUser();
 
 await updateMutation.mutateAsync({
   userId: 10,
-  data: { isActive: false }
+  data: { isActive: false },
 });
 ```
 
 ### 4. Delete User
+
 ```typescript
 const deleteMutation = useDeleteUser();
 
@@ -179,13 +209,14 @@ if (confirm(`Delete user ${user.username}?`)) {
 ```
 
 ### 5. Change Own Password
+
 ```typescript
 const changePasswordMutation = useChangePassword();
 
 await changePasswordMutation.mutateAsync({
   userId: currentUser.id,
   currentPassword: 'oldpass',
-  newPassword: 'newpass'
+  newPassword: 'newpass',
 });
 ```
 
@@ -205,24 +236,28 @@ await changePasswordMutation.mutateAsync({
 ## Troubleshooting
 
 **Cannot create user:**
+
 - Check username/email uniqueness
 - Verify password meets requirements
 - Ensure role exists
 - Check permissions (users.create)
 
 **Cannot delete user:**
+
 - Verify not deleting self
 - Check if last admin user
 - Ensure users.delete permission
 - Look for foreign key constraints
 
 **Password change fails:**
+
 - Verify current password is correct
 - Check new password meets requirements
 - Ensure user exists and is active
 - Validate permissions
 
 **User list not loading:**
+
 - Check users.read permission
 - Verify database connection
 - Look for query errors in logs
diff --git a/docs/10-features/07-role-permissions.md b/docs/10-features/07-role-permissions.md
index 033f1ca..80ef750 100644
--- a/docs/10-features/07-role-permissions.md
+++ b/docs/10-features/07-role-permissions.md
@@ -2,16 +2,20 @@
 
 ## Overview
 
-RBAC provides fine-grained permission management through a flexible role and permission model. Administrators can create custom roles, assign specific permissions, and control user access to features and resources.
+RBAC provides fine-grained permission management through a flexible role and
+permission model. Administrators can create custom roles, assign specific
+permissions, and control user access to features and resources.
 
 ## Architecture
 
 **Backend Components:**
+
 - `RoleService`: Role and permission management
 - Role routes (routes/roles.ts): REST API endpoints
 - RBAC middleware (middleware/rbac.ts): Permission enforcement
 
 **Frontend Components:**
+
 - `RolesView`: Main roles management page
 - `RoleTable`: Roles list with actions
 - `RoleForm`: Create/edit role dialog
@@ -21,6 +25,7 @@ RBAC provides fine-grained permission management through a flexible role and per
 ## Database Schema
 
 **roles table:**
+
 ```sql
 CREATE TABLE roles (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -33,6 +38,7 @@ CREATE TABLE roles (
 ```
 
 **permissions table:**
+
 ```sql
 CREATE TABLE permissions (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -46,75 +52,91 @@ CREATE TABLE permissions (
 
 ## Default Permissions
 
-| Permission | Description | Resource | Action |
-|-----------|-------------|----------|--------|
-| games.read | View and browse games | games | read |
-| games.play | Play games in browser | games | play |
-| games.download | Download game files | games | download |
-| playlists.read | View playlists | playlists | read |
-| playlists.create | Create new playlists | playlists | create |
-| playlists.update | Update existing playlists | playlists | update |
-| playlists.delete | Delete playlists | playlists | delete |
-| users.read | View user accounts | users | read |
-| users.create | Create new user accounts | users | create |
-| users.update | Update user accounts | users | update |
-| users.delete | Delete user accounts | users | delete |
-| roles.read | View roles and permissions | roles | read |
-| roles.create | Create new roles | roles | create |
-| roles.update | Update roles and permissions | roles | update |
-| roles.delete | Delete roles | roles | delete |
-| settings.read | View system settings | settings | read |
-| settings.update | Update system settings | settings | update |
-| activities.read | View activity logs | activities | read |
+| Permission       | Description                  | Resource   | Action   |
+| ---------------- | ---------------------------- | ---------- | -------- |
+| games.read       | View and browse games        | games      | read     |
+| games.play       | Play games in browser        | games      | play     |
+| games.download   | Download game files          | games      | download |
+| playlists.read   | View playlists               | playlists  | read     |
+| playlists.create | Create new playlists         | playlists  | create   |
+| playlists.update | Update existing playlists    | playlists  | update   |
+| playlists.delete | Delete playlists             | playlists  | delete   |
+| users.read       | View user accounts           | users      | read     |
+| users.create     | Create new user accounts     | users      | create   |
+| users.update     | Update user accounts         | users      | update   |
+| users.delete     | Delete user accounts         | users      | delete   |
+| roles.read       | View roles and permissions   | roles      | read     |
+| roles.create     | Create new roles             | roles      | create   |
+| roles.update     | Update roles and permissions | roles      | update   |
+| roles.delete     | Delete roles                 | roles      | delete   |
+| settings.read    | View system settings         | settings   | read     |
+| settings.update  | Update system settings       | settings   | update   |
+| activities.read  | View activity logs           | activities | read     |
 
 ## Default Roles
 
 **Admin (priority: 100):**
+
 - All permissions granted
 - Can manage users, roles, and settings
 
 **User (priority: 50):**
+
 - games.read, games.play, games.download
 - playlists.read, playlists.create, playlists.update, playlists.delete
 - Cannot manage users, roles, settings
 
 **Guest (priority: 0):**
+
 - games.read, playlists.read
 - Read-only access only
 
 ## API Endpoints
 
 #### GET /api/roles
+
 Get all roles with their permissions.
+
 - **Permission:** roles.read
 - **Response:** Array of roles with assigned permissions
 
 #### GET /api/roles/:id
+
 Get single role by ID with permissions.
+
 - **Permission:** roles.read
 - **Response:** Role object with full permission list
 
 #### POST /api/roles
+
 Create a new role with permissions.
+
 - **Permission:** roles.create
 - **Body:** `{ "name", "description", "priority", "permissionIds" }`
 - **Response:** Created role (201)
 
 #### PATCH /api/roles/:id
+
 Update role metadata (name, description, priority).
+
 - **Permission:** roles.update
 - **Response:** Updated role
 
 #### PUT /api/roles/:id/permissions
+
 Update role permissions (replaces all).
+
 - **Permission:** roles.update
 - **Body:** `{ "permissionIds": [1, 2, 3] }`
 - **Response:** Updated role with new permissions
 
 #### DELETE /api/roles/:id
+
 Delete a role.
+
 - **Permission:** roles.delete
-- **Rules:** Cannot delete system roles (admin, user, guest) or roles with assigned users
+- **Rules:** Cannot delete system roles (admin, user, guest) or roles with
+  assigned users
 
 ## Frontend Permission Checking
 
@@ -141,16 +163,20 @@ if (hasAllPermissions('users.read', 'users.update')) {
 ## Protected Routes
 
 ```tsx
-<Route path="/admin/users" element={
-  <ProtectedRoute requiredPermissions={['users.read']}>
-    <UsersView />
-  </ProtectedRoute>
-} />
+<Route
+  path="/admin/users"
+  element={
+    <ProtectedRoute requiredPermissions={['users.read']}>
+      <UsersView />
+    </ProtectedRoute>
+  }
+/>
 ```
 
 ## Permission Caching
 
 **Performance Optimization:**
+
 - User permissions cached for 5 minutes
 - Role permissions cached for 10 minutes
 - Automatic cleanup every 5 minutes
@@ -158,6 +184,7 @@ if (hasAllPermissions('users.read', 'users.update')) {
 - 90%+ reduction in database queries
 
 **Cache Management (Admin):**
+
 - `GET /_cache/permissions/stats` - View cache statistics
 - `POST /_cache/permissions/clear` - Manually clear cache
 
@@ -182,18 +209,21 @@ if (hasAllPermissions('users.read', 'users.update')) {
 ## Troubleshooting
 
 **Permission denied errors:**
+
 - Verify user has correct role
 - Check role has required permission
 - Validate role-permission mapping exists
 - Check if user is active
 
 **UI shows unauthorized content:**
+
 - Frontend permission check may be incorrect
 - Check if user permissions loaded
 - Verify hasPermission() logic
 - Inspect auth state in DevTools
 
 **Backend allows unauthorized access:**
+
 - Ensure requirePermission() middleware applied
 - Check middleware order (auth before RBAC)
 - Verify permission names match exactly
diff --git a/docs/10-features/08-activity-logging.md b/docs/10-features/08-activity-logging.md
index b3d4246..f20518d 100644
--- a/docs/10-features/08-activity-logging.md
+++ b/docs/10-features/08-activity-logging.md
@@ -2,23 +2,29 @@
 
 ## Overview
 
-Activity logging automatically tracks user actions throughout the application. Every significant operation is logged with details including the user, action type, resource affected, timestamp, IP address, and user agent for security monitoring, troubleshooting, and compliance.
+Activity logging automatically tracks user actions throughout the application.
+Every significant operation is logged with details including the user, action
+type, resource affected, timestamp, IP address, and user agent for security
+monitoring, troubleshooting, and compliance.
 
 ## Architecture
 
 **Backend Components:**
+
 - `ActivityService`: Activity logging operations
 - Activity routes (routes/activities.ts): REST API
 - `UserDatabaseService`: Database operations
 - Activity logger middleware (middleware/activityLogger.ts)
 
 **Frontend Components:**
+
 - `ActivitiesView`: Main activity log viewer
 - `ActivityTable`: Activity list with filters
 
 ## Database Schema
 
 **activity_logs table:**
+
 ```sql
 CREATE TABLE activity_logs (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -41,6 +47,7 @@ CREATE INDEX idx_activity_logs_created_at ON activity_logs(created_at);
 ```
 
 **Key Fields:**
+
 - `user_id`: Reference to users table (NULL if user deleted)
 - `username`: Username at time of action (preserved)
 - `action`: Type of action (login, create, update, delete, etc.)
@@ -53,11 +60,13 @@ CREATE INDEX idx_activity_logs_created_at ON activity_logs(created_at);
 ## API Endpoints
 
 #### GET /api/activities
+
 Get activity logs with pagination and filters.
 
 **Permission:** activities.read
 
 **Query Parameters:**
+
 - `page` - Page number (default: 1)
 - `limit` - Items per page (default: 50)
 - `userId` - Filter by user ID
@@ -68,6 +77,7 @@ Get activity logs with pagination and filters.
 - `endDate` - Filter by end date (ISO 8601)
 
 **Response:**
+
 ```json
 {
   "data": [
@@ -93,24 +103,28 @@ Get activity logs with pagination and filters.
 ## Logged Actions
 
 **Authentication:**
+
 - `login` - User login
 - `logout` - User logout
 - `register` - New user registration
 - `auth.refresh` - Token refresh
 
 **User Management:**
+
 - `users.create` - Create new user
 - `users.update` - Update user information
 - `users.delete` - Delete user
 - `users.updateSettings` - Update user settings
 
 **Role Management:**
+
 - `roles.create` - Create new role
 - `roles.update` - Update role metadata
 - `roles.update_permissions` - Update role permissions
 - `roles.delete` - Delete role
 
 **Game Actions:**
+
 - `games.view` - View game details
 - `play.start` - Start play session
 - `play.end` - End play session
@@ -122,7 +136,7 @@ export const logActivity = (action: string, resource?: string) => {
   return async (req: Request, res: Response, next: NextFunction) => {
     const originalEnd = res.end;
 
-    res.end = function(this: Response, ...args: any[]): Response {
+    res.end = function (this: Response, ...args: any[]): Response {
       // Log activity asynchronously (non-blocking)
       setImmediate(async () => {
         try {
@@ -135,7 +149,7 @@ export const logActivity = (action: string, resource?: string) => {
             resource,
             resourceId,
             ipAddress: req.ip,
-            userAgent: req.headers['user-agent']
+            userAgent: req.headers['user-agent'],
           });
         } catch (error) {
           console.error('Failed to log activity:', error);
@@ -151,8 +165,10 @@ export const logActivity = (action: string, resource?: string) => {
 ```
 
 **Usage in Routes:**
+
 ```typescript
-router.post('/',
+router.post(
+  '/',
   authenticate,
   requirePermission('users.create'),
   logActivity('users.create', 'users'),
@@ -166,9 +182,11 @@ router.post('/',
 ## Permissions
 
 Activity log operations require:
+
 - `activities.read` - View activity logs
 
 **Default Assignments:**
+
 - **Admin:** activities.read
 - **User:** None
 - **Guest:** None
@@ -176,24 +194,28 @@ Activity log operations require:
 ## Security Considerations
 
 **Data Retention:**
+
 - Activity logs stored indefinitely by default
 - Consider implementing data retention policy
 - Archive old logs to separate table/database
 - Implement automated cleanup (> 1 year old)
 
 **Sensitive Information:**
+
 - User agent strings may contain version info
 - IP addresses are personally identifiable
 - Details field may contain sensitive data
 - Consider masking/hashing sensitive fields
 
 **Privacy Compliance:**
+
 - GDPR considerations for user data
 - Right to be forgotten (delete user activities)
 - Data minimization (only log necessary info)
 - Purpose limitation (security/audit only)
 
 **Access Control:**
+
 - Strict permission checks (activities.read)
 - Only admins should access logs
 - Audit log access itself (who viewed logs)
@@ -214,41 +236,54 @@ Activity log operations require:
 ## Common Use Cases
 
 ### 1. View All Activities
+
 ```typescript
 const { data: activities } = useQuery({
   queryKey: ['activities', page],
-  queryFn: () => api.get('/activities', {
-    params: { page, limit: 50 }
-  }).then(res => res.data)
+  queryFn: () =>
+    api
+      .get('/activities', {
+        params: { page, limit: 50 },
+      })
+      .then((res) => res.data),
 });
 ```
 
 ### 2. Filter by User
+
 ```typescript
 const { data: activities } = useQuery({
   queryKey: ['activities', { userId }],
-  queryFn: () => api.get('/activities', {
-    params: { userId, page: 1, limit: 50 }
-  }).then(res => res.data)
+  queryFn: () =>
+    api
+      .get('/activities', {
+        params: { userId, page: 1, limit: 50 },
+      })
+      .then((res) => res.data),
 });
 ```
 
 ### 3. Filter by Date Range
+
 ```typescript
 const startDate = '2024-03-01T00:00:00.000Z';
 const endDate = '2024-03-31T23:59:59.999Z';
 
 const { data: activities } = useQuery({
   queryKey: ['activities', { startDate, endDate }],
-  queryFn: () => api.get('/activities', {
-    params: { startDate, endDate, page: 1, limit: 50 }
-  }).then(res => res.data)
+  queryFn: () =>
+    api
+      .get('/activities', {
+        params: { startDate, endDate, page: 1, limit: 50 },
+      })
+      .then((res) => res.data),
 });
 ```
 
 ## Troubleshooting
 
 **Logs not appearing:**
+
 - Check if middleware is applied to route
 - Verify activityService.log() is called
 - Look for errors in console/logs
@@ -256,6 +291,7 @@ const { data: activities } = useQuery({
 - Check if logging is async (setImmediate)
 
 **Slow log queries:**
+
 - Verify indexes exist on filtered columns
 - Limit result set with pagination
 - Avoid querying large date ranges
@@ -263,6 +299,7 @@ const { data: activities } = useQuery({
 - Check database performance
 
 **Missing log data:**
+
 - Verify all required fields provided
 - Check for NULL constraints
 - Ensure user context available
@@ -270,6 +307,7 @@ const { data: activities } = useQuery({
 - Check user agent header
 
 **Duplicate logs:**
+
 - Ensure middleware not applied twice
 - Check for manual + automatic logging
 - Verify setImmediate usage
diff --git a/docs/10-features/09-system-settings.md b/docs/10-features/09-system-settings.md
index 91348fb..a13e8b7 100644
--- a/docs/10-features/09-system-settings.md
+++ b/docs/10-features/09-system-settings.md
@@ -2,27 +2,31 @@
 
 ## Overview
 
-System Settings provides flexible, centralized configuration management for Flashpoint Web. Settings are organized into categories, validated using JSON schemas, cached for performance, and accessible through web UI and REST API.
+System Settings provides flexible, centralized configuration management for
+Flashpoint Web. Settings are organized into categories, validated using JSON
+schemas, cached for performance, and accessible through web UI and REST API.
 
 ## Settings Categories
 
-| Category | Purpose | Example Keys |
-|----------|---------|--------------|
-| auth | Authentication/security | guestAccessEnabled, maxLoginAttempts, lockoutDurationMinutes |
-| app | Application settings | siteName, maintenanceMode, dateFormat, timeFormat |
-| metadata | Metadata sync config | autoSyncEnabled, syncIntervalMinutes, syncTags, syncPlatforms |
-| features | Feature flags | enablePlaylists, enableFavorites, enableStatistics |
-| game | Game player config | defaultScaleMode, defaultVolume, enableFlash |
+| Category | Purpose                 | Example Keys                                                  |
+| -------- | ----------------------- | ------------------------------------------------------------- |
+| auth     | Authentication/security | guestAccessEnabled, maxLoginAttempts, lockoutDurationMinutes  |
+| app      | Application settings    | siteName, maintenanceMode, dateFormat, timeFormat             |
+| metadata | Metadata sync config    | autoSyncEnabled, syncIntervalMinutes, syncTags, syncPlatforms |
+| features | Feature flags           | enablePlaylists, enableFavorites, enableStatistics            |
+| game     | Game player config      | defaultScaleMode, defaultVolume, enableFlash                  |
 
 ## Architecture
 
 **Backend Components:**
+
 - `SystemSettingsService` - Core settings CRUD operations
 - `CachedSystemSettingsService` - Caching layer wrapper
 - Settings routes (routes/system-settings.ts) - REST API
 - Validation middleware using JSON Schema
 
 **Frontend Components:**
+
 - `SettingsView` - Main settings page with tabs
 - `systemSettingsApi` - API client for settings
 - React Query for server state management
@@ -49,12 +53,17 @@ CREATE TABLE system_settings (
 ## Settings Tabs
 
 #### General Tab
-- **Version Information** - View Flashpoint version and edition (auto-detected from `version.txt`, served via `/api/settings/public`), web app version, and Ruffle emulator version
+
+- **Version Information** - View Flashpoint version and edition (auto-detected
+  from `version.txt`, served via `/api/settings/public`), web app version, and
+  Ruffle emulator version
 - **Date & Time Format** - Choose from 7 date and 4 time formats
 - **Ruffle Emulator Management** - Check for and install updates (admin only)
-- **Authentication Settings** - Control registration and guest access (admin only)
+- **Authentication Settings** - Control registration and guest access (admin
+  only)
 
 #### App Tab
+
 - **Site Name** - Customize application name
 - **Maintenance Mode** - Enable/disable maintenance mode
 - **Default Theme** - Set default theme (light, dark, system)
@@ -62,25 +71,34 @@ CREATE TABLE system_settings (
 
 #### Domain Settings (in App Tab)
 
-The App settings tab includes a **Domain Settings** card below the application settings card:
+The App settings tab includes a **Domain Settings** card below the application
+settings card:
 
-- **Add Domain** - Text input with inline validation (no protocol, valid format, no duplicates)
-- **Domain List** - All configured domains with radio buttons to select the default
+- **Add Domain** - Text input with inline validation (no protocol, valid format,
+  no duplicates)
+- **Domain List** - All configured domains with radio buttons to select the
+  default
 - **Delete Domain** - Remove any domain with the trash icon
-- **Empty State** - "No domains configured. Share links will use the current browser URL."
+- **Empty State** - "No domains configured. Share links will use the current
+  browser URL."
 
-The default domain is used when non-admin users share playlists. Admin users see a domain selector dropdown in the Share Playlist dialog to choose which domain to use per share link. When no domains are configured, all share links fall back to `window.location.origin`.
+The default domain is used when non-admin users share playlists. Admin users see
+a domain selector dropdown in the Share Playlist dialog to choose which domain
+to use per share link. When no domains are configured, all share links fall back
+to `window.location.origin`.
 
-**Permissions:** Requires `settings.update` (admin only)
-**API:** See [Domains API](../06-api-reference/domains-api.md)
+**Permissions:** Requires `settings.update` (admin only) **API:** See
+[Domains API](../06-api-reference/domains-api.md)
 
 #### Metadata Tab
+
 - **Auto Sync on Startup** - Automatically sync metadata when server starts
 - **Sync Interval** - How often to check for updates (in minutes)
 - **Sync Tags** - Include tags in metadata sync
 - **Sync Platforms** - Include platforms in metadata sync
 
 #### Features Tab
+
 - **Enable Playlists** - Allow users to create playlists
 - **Enable Favorites** - Allow users to favorite games
 - **Enable Statistics** - Track and display play statistics
@@ -88,6 +106,7 @@ The default domain is used when non-admin users share playlists. Admin users see
 - **Enable User Profiles** - Allow profile customization
 
 #### Game Tab
+
 - **Default Scale Mode** - Default Ruffle scale mode for Flash games
 - **Default Volume** - Default audio volume (0-100%)
 - **Enable Flash Games** - Allow Flash game playback
@@ -96,12 +115,14 @@ The default domain is used when non-admin users share playlists. Admin users see
 ## Caching Strategy
 
 **CachedSystemSettingsService:**
+
 - **TTL:** 60 seconds (configurable)
 - **Invalidation:** Automatic on update
 - **Cleanup:** Every 5 minutes
 - **Statistics:** Hit rate, key count, size tracking
 
 **Cache Benefits:**
+
 - Response time: <1ms (cache hit) vs ~10ms (DB query)
 - Database load reduced by ~85%
 - No contention with concurrent reads
@@ -112,6 +133,7 @@ The default domain is used when non-admin users share playlists. Admin users see
 All settings use JSON Schema validation:
 
 **Example Schema (maxLoginAttempts):**
+
 ```json
 {
   "type": "integer",
@@ -122,6 +144,7 @@ All settings use JSON Schema validation:
 ```
 
 **Validation Process:**
+
 1. Client sends update request
 2. Backend validates against JSON schema
 3. Type checking enforced
@@ -132,12 +155,14 @@ All settings use JSON Schema validation:
 ## Default Values
 
 **Auth Defaults:**
+
 - guestAccessEnabled: true
 - userRegistrationEnabled: true
 - maxLoginAttempts: 5
 - lockoutDurationMinutes: 15
 
 **App Defaults:**
+
 - siteName: "Flashpoint Web"
 - maintenanceMode: false
 - defaultTheme: "dark"
@@ -146,17 +171,22 @@ All settings use JSON Schema validation:
 - timeFormat: "hh:mm a"
 
 **Metadata Defaults:**
+
 - autoSyncEnabled: false
 - syncIntervalMinutes: 60
 - syncTags: true
 - syncPlatforms: true
 
-**Note:** Flashpoint edition and version are not database settings. They are auto-detected from `version.txt` at startup and injected into the `/api/settings/public` response from the backend `config` object.
+**Note:** Flashpoint edition and version are not database settings. They are
+auto-detected from `version.txt` at startup and injected into the
+`/api/settings/public` response from the backend `config` object.
 
 **Features Defaults:**
+
 - All features enabled by default
 
 **Game Defaults:**
+
 - defaultScaleMode: "showall"
 - defaultVolume: 0.7
 - enableFlash: true
@@ -165,16 +195,19 @@ All settings use JSON Schema validation:
 ## Features
 
 **Real-time Updates:**
+
 - Changes saved automatically when modified
 - No page refresh required
 - Validation feedback shown immediately
 
 **Permission-Based Access:**
+
 - Only administrators can view and modify
 - Regular users see only what they need
 - Guest users have no access
 
 **Validation:**
+
 - All inputs validated before saving
 - Type checking (boolean, number, string)
 - Range checking (min/max values)
@@ -183,23 +216,25 @@ All settings use JSON Schema validation:
 ## Security
 
 **Access Control:**
+
 - `settings.read` - View settings (admin only)
 - `settings.update` - Modify settings (admin only)
 
 **Validation:**
+
 - All inputs validated against schemas
 - Type safety enforced
 - SQL injection prevented (prepared statements)
 - XSS prevention (no HTML in values)
 
-**Audit Trail:**
-All setting changes logged via `ActivityService`:
+**Audit Trail:** All setting changes logged via `ActivityService`:
+
 ```typescript
 await activityService.log({
   userId: user.id,
   action: 'settings.update',
   resource: 'system_settings',
-  details: { category: 'auth', changes: { guestAccessEnabled: false } }
+  details: { category: 'auth', changes: { guestAccessEnabled: false } },
 });
 ```
 
@@ -214,6 +249,7 @@ await activityService.log({
 5. Test validation and caching thoroughly
 
 **Example:**
+
 ```sql
 INSERT INTO system_settings (category, key, value, value_type, description, validation_schema)
 VALUES (
@@ -243,17 +279,21 @@ VALUES (
 ## Troubleshooting
 
 **Settings not applying immediately:**
+
 - Cache TTL not expired (60 seconds)
 - Solution: Clear cache or wait for TTL
 
 **Validation errors on valid values:**
+
 - Validation schema mismatch
 - Solution: Check schema in database, update if needed
 
 **Performance degradation:**
+
 - Cache disabled or not working
 - Solution: Verify CachedSystemSettingsService is in use
 
 **Missing settings:**
+
 - Migration didn't run or failed
 - Solution: Check migration logs, run manually if needed
diff --git a/docs/10-features/10-date-time-formatting.md b/docs/10-features/10-date-time-formatting.md
index b6675d2..8422d9c 100644
--- a/docs/10-features/10-date-time-formatting.md
+++ b/docs/10-features/10-date-time-formatting.md
@@ -2,7 +2,10 @@
 
 ## Overview
 
-Date & Time Formatting provides customizable date and time display formats throughout Flashpoint Web. Users can choose from multiple format options that apply globally to all date and time displays, ensuring consistent and localized presentation.
+Date & Time Formatting provides customizable date and time display formats
+throughout Flashpoint Web. Users can choose from multiple format options that
+apply globally to all date and time displays, ensuring consistent and localized
+presentation.
 
 ## User-Facing Functionality
 
@@ -10,45 +13,50 @@ Date & Time Formatting provides customizable date and time display formats throu
 
 ## Date Format Options
 
-| Format | Example | Description |
-|--------|---------|-------------|
-| MM/dd/yyyy | 01/24/2026 | US format (Month/Day/Year) |
-| dd/MM/yyyy | 24/01/2026 | European format (Day/Month/Year) |
-| yyyy-MM-dd | 2026-01-24 | ISO 8601 format |
-| MMM dd, yyyy | Jan 24, 2026 | Short month name |
-| MMMM dd, yyyy | January 24, 2026 | Full month name |
-| dd MMM yyyy | 24 Jan 2026 | Day-first with short month |
-| dd MMMM yyyy | 24 January 2026 | Day-first with full month |
+| Format        | Example          | Description                      |
+| ------------- | ---------------- | -------------------------------- |
+| MM/dd/yyyy    | 01/24/2026       | US format (Month/Day/Year)       |
+| dd/MM/yyyy    | 24/01/2026       | European format (Day/Month/Year) |
+| yyyy-MM-dd    | 2026-01-24       | ISO 8601 format                  |
+| MMM dd, yyyy  | Jan 24, 2026     | Short month name                 |
+| MMMM dd, yyyy | January 24, 2026 | Full month name                  |
+| dd MMM yyyy   | 24 Jan 2026      | Day-first with short month       |
+| dd MMMM yyyy  | 24 January 2026  | Day-first with full month        |
 
 ## Time Format Options
 
-| Format | Example | Description |
-|--------|---------|-------------|
-| hh:mm a | 02:30 PM | 12-hour with AM/PM |
-| HH:mm | 14:30 | 24-hour (military time) |
-| hh:mm:ss a | 02:30:45 PM | 12-hour with seconds |
-| HH:mm:ss | 14:30:45 | 24-hour with seconds |
+| Format     | Example     | Description             |
+| ---------- | ----------- | ----------------------- |
+| hh:mm a    | 02:30 PM    | 12-hour with AM/PM      |
+| HH:mm      | 14:30       | 24-hour (military time) |
+| hh:mm:ss a | 02:30:45 PM | 12-hour with seconds    |
+| HH:mm:ss   | 14:30:45    | 24-hour with seconds    |
 
 ## Where Formats Apply
 
 **Activity Logs:**
+
 - Timestamp column (datetime)
 - Last activity in user leaderboard (datetime)
 - Activity trend chart axis labels
 
 **User Management:**
+
 - Last login column (datetime)
 
 **Play Statistics:**
+
 - First played date (date)
 - Last played date (date)
 - Play activity chart axis labels (date)
 
 **Settings:**
+
 - Ruffle update published date (date)
 - Last metadata sync time (datetime)
 
 **General:**
+
 - All timestamps in tables
 - All dates in charts and graphs
 - All activity history displays
@@ -80,6 +88,7 @@ VALUES (
 ```
 
 **Properties:**
+
 - `is_public = 1` - Accessible without authentication
 - Validation schemas enforce allowed format values
 - Default values set to US formats
@@ -104,6 +113,7 @@ export function MyComponent() {
 ```
 
 **Features:**
+
 - Automatic caching with React Query
 - Falls back to defaults if settings not loaded
 - Handles Date objects, ISO strings, and timestamps
@@ -125,6 +135,7 @@ interface FormattedDateProps {
 ```
 
 **Usage:**
+
 ```tsx
 <FormattedDate date={user.lastLoginAt} type="datetime" />
 <FormattedDate date={stats.firstPlayAt} type="date" />
@@ -134,6 +145,7 @@ interface FormattedDateProps {
 ## Common Use Cases
 
 ### 1. Format Dates in Table Columns
+
 ```typescript
 const columns: ColumnDef<ActivityLog>[] = [
   {
@@ -152,6 +164,7 @@ const columns: ColumnDef<ActivityLog>[] = [
 ```
 
 ### 2. Format Dates in Charts
+
 ```typescript
 export function PlaytimeChart() {
   const { formatDate } = useDateTimeFormat();
@@ -167,6 +180,7 @@ export function PlaytimeChart() {
 ```
 
 ### 3. Format Relative Time with Fallback
+
 ```typescript
 export function GameDetailView() {
   const { formatDate } = useDateTimeFormat();
@@ -192,18 +206,21 @@ export function GameDetailView() {
 ### When to Use Each Type
 
 **Use `type="datetime"` for:**
+
 - Activity timestamps
 - Last login times
 - Session start/end times
 - Any event with specific time
 
 **Use `type="date"` for:**
+
 - First/last played dates
 - Release dates
 - Published dates
 - Any date without time
 
 **Use `type="time"` for:**
+
 - Time-only displays
 - Chart axes for hourly data
 - Duration displays
@@ -211,16 +228,19 @@ export function GameDetailView() {
 ### Performance Optimization
 
 **Do:**
+
 - Use `<FormattedDate>` component for table cells
 - Cache formats in components rendering many dates
 - Call `useDateTimeFormat()` at component level, not in loops
 
 **Don't:**
+
 - Call `useDateTimeFormat()` inside map functions
 - Create new Date objects unnecessarily
 - Format dates multiple times for same value
 
 **Example:**
+
 ```typescript
 // Good - hook called once per component
 export function ActivityTable() {
@@ -254,8 +274,8 @@ Always handle null/undefined dates:
 
 Format validation enforced at multiple levels:
 
-**Backend Validation:**
-JSON Schema ensures only valid formats accepted:
+**Backend Validation:** JSON Schema ensures only valid formats accepted:
+
 ```json
 {
   "type": "string",
@@ -271,22 +291,24 @@ JSON Schema ensures only valid formats accepted:
 }
 ```
 
-**Frontend Validation:**
-Select component restricts choices to valid options.
+**Frontend Validation:** Select component restricts choices to valid options.
 
 ## Troubleshooting
 
 **Dates Not Updating:**
+
 - React Query cache not invalidating
 - Component not using formatting hook
 - Hard-coded date formats still in use
 
 **Invalid Date Display:**
+
 - Invalid date string
 - Incorrect date parsing
 - Timezone issues
 
 **Format Not Applied:**
+
 - Component not updated to use hook
 - Manual date formatting still present
 - Library using hard-coded format
@@ -294,21 +316,36 @@ Select component restricts choices to valid options.
 ## Migration Guide
 
 **Before:**
+
 ```typescript
-{new Date(timestamp).toLocaleString()}
-{date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+{
+  new Date(timestamp).toLocaleString();
+}
+{
+  date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
 ```
 
 **After:**
+
 ```typescript
 <FormattedDate date={timestamp} type="datetime" />
 <FormattedDate date={date} type="date" />
 ```
 
 **Or using hook:**
+
 ```typescript
 const { formatDate, formatDateTime } = useDateTimeFormat();
 
-{formatDateTime(timestamp)}
-{formatDate(date)}
+{
+  formatDateTime(timestamp);
+}
+{
+  formatDate(date);
+}
 ```
diff --git a/docs/10-features/README.md b/docs/10-features/README.md
index bbe595a..76fda2e 100644
--- a/docs/10-features/README.md
+++ b/docs/10-features/README.md
@@ -1,67 +1,84 @@
 # Feature Documentation
 
-This directory contains documentation for all major features in the Flashpoint Web application.
+This directory contains documentation for all major features in the Flashpoint
+Web application.
 
 ## Features
 
-1. [Authentication & Authorization](./01-authentication-authorization.md) - User registration, JWT tokens, session management, and RBAC
-2. [Game Browsing & Filtering](./02-game-browsing-filtering.md) - Free-text search, multi-criteria filtering, sorting, and pagination
-3. [Game Playing](./03-game-playing.md) - Browser-based game playback with Ruffle emulator and game service proxy
-4. [Play Session Tracking](./04-play-session-tracking.md) - Automatic gameplay monitoring with statistics and analytics
-5. [Playlists & Favorites](./05-playlists-favorites.md) - Game organization through playlists and favorites with Flashpoint Launcher compatibility
-6. [User Management](./06-user-management.md) - Administrator tools for managing user accounts, roles, and access control
-7. [Role-Based Access Control](./07-role-permissions.md) - Fine-grained permission system with custom roles and flexible access control
-8. [Activity Logging & Audit Trail](./08-activity-logging.md) - Comprehensive audit logging for security monitoring and troubleshooting
-9. [System Settings](./09-system-settings.md) - Centralized configuration management with validation and caching
-10. [Date & Time Formatting](./10-date-time-formatting.md) - Consistent date/time formatting and localization across the application
+1. [Authentication & Authorization](./01-authentication-authorization.md) - User
+   registration, JWT tokens, session management, and RBAC
+2. [Game Browsing & Filtering](./02-game-browsing-filtering.md) - Free-text
+   search, multi-criteria filtering, sorting, and pagination
+3. [Game Playing](./03-game-playing.md) - Browser-based game playback with
+   Ruffle emulator and game service proxy
+4. [Play Session Tracking](./04-play-session-tracking.md) - Automatic gameplay
+   monitoring with statistics and analytics
+5. [Playlists & Favorites](./05-playlists-favorites.md) - Game organization
+   through playlists and favorites with Flashpoint Launcher compatibility
+6. [User Management](./06-user-management.md) - Administrator tools for managing
+   user accounts, roles, and access control
+7. [Role-Based Access Control](./07-role-permissions.md) - Fine-grained
+   permission system with custom roles and flexible access control
+8. [Activity Logging & Audit Trail](./08-activity-logging.md) - Comprehensive
+   audit logging for security monitoring and troubleshooting
+9. [System Settings](./09-system-settings.md) - Centralized configuration
+   management with validation and caching
+10. [Date & Time Formatting](./10-date-time-formatting.md) - Consistent
+    date/time formatting and localization across the application
 
 ## Quick Reference
 
 ### All Permissions
 
-| Permission | Resource | Action | Description |
-|------------|----------|--------|-------------|
-| games.read | games | read | View and browse games |
-| games.play | games | play | Play games in browser |
-| games.download | games | download | Download game files |
-| playlists.read | playlists | read | View playlists |
-| playlists.create | playlists | create | Create new playlists |
-| playlists.update | playlists | update | Update existing playlists |
-| playlists.delete | playlists | delete | Delete playlists |
-| users.read | users | read | View user accounts |
-| users.create | users | create | Create new user accounts |
-| users.update | users | update | Update user accounts |
-| users.delete | users | delete | Delete user accounts |
-| roles.read | roles | read | View roles and permissions |
-| roles.create | roles | create | Create new roles |
-| roles.update | roles | update | Update roles and permissions |
-| roles.delete | roles | delete | Delete roles |
-| settings.read | settings | read | View system settings |
-| settings.update | settings | update | Update system settings |
-| activities.read | activities | read | View activity logs |
+| Permission       | Resource   | Action   | Description                  |
+| ---------------- | ---------- | -------- | ---------------------------- |
+| games.read       | games      | read     | View and browse games        |
+| games.play       | games      | play     | Play games in browser        |
+| games.download   | games      | download | Download game files          |
+| playlists.read   | playlists  | read     | View playlists               |
+| playlists.create | playlists  | create   | Create new playlists         |
+| playlists.update | playlists  | update   | Update existing playlists    |
+| playlists.delete | playlists  | delete   | Delete playlists             |
+| users.read       | users      | read     | View user accounts           |
+| users.create     | users      | create   | Create new user accounts     |
+| users.update     | users      | update   | Update user accounts         |
+| users.delete     | users      | delete   | Delete user accounts         |
+| roles.read       | roles      | read     | View roles and permissions   |
+| roles.create     | roles      | create   | Create new roles             |
+| roles.update     | roles      | update   | Update roles and permissions |
+| roles.delete     | roles      | delete   | Delete roles                 |
+| settings.read    | settings   | read     | View system settings         |
+| settings.update  | settings   | update   | Update system settings       |
+| activities.read  | activities | read     | View activity logs           |
 
 **Total:** 18 permissions across 6 resources
 
 ### Database Tables
 
 **User Database (user.db):**
+
 - users, roles, permissions, role_permissions, refresh_tokens, login_attempts
-- system_settings, user_settings, user_game_plays, user_game_stats, user_stats, activity_logs
+- system_settings, user_settings, user_game_plays, user_game_stats, user_stats,
+  activity_logs
 
 **Flashpoint Database (flashpoint.sqlite - read-only):**
+
 - game, platform, tag, game_tags_tag, playlist, playlist_game
 
 ### Default Roles
 
-| Role | Priority | Permissions |
-|------|----------|-------------|
-| admin | 100 | All 18 permissions |
-| user | 50 | games.*, playlists.* (10 total) |
-| guest | 0 | games.read, playlists.read (2 total) |
+| Role  | Priority | Permissions                          |
+| ----- | -------- | ------------------------------------ |
+| admin | 100      | All 18 permissions                   |
+| user  | 50       | games._, playlists._ (10 total)      |
+| guest | 0        | games.read, playlists.read (2 total) |
 
 ## Related Documentation
 
-- [System Architecture](../02-architecture/system-architecture.md) - System architecture and components
-- [Database Schema](../12-reference/database-schema-reference.md) - Complete database documentation
+- [System Architecture](../02-architecture/system-architecture.md) - System
+  architecture and components
+- [Database Schema](../12-reference/database-schema-reference.md) - Complete
+  database documentation
 - [API Reference](../06-api-reference/README.md) - REST API documentation
-- [Development Guide](../08-development/setup-guide.md) - Project setup and development
+- [Development Guide](../08-development/setup-guide.md) - Project setup and
+  development
diff --git a/docs/11-diagrams/README.md b/docs/11-diagrams/README.md
index 652a20a..a1748d9 100644
--- a/docs/11-diagrams/README.md
+++ b/docs/11-diagrams/README.md
@@ -1,14 +1,18 @@
 # Mermaid Diagrams
 
-This directory contains Mermaid diagram source files for the Flashpoint Web documentation. These diagrams can be rendered in any Markdown viewer that supports Mermaid syntax (GitHub, GitLab, VS Code with Mermaid extension, etc.).
+This directory contains Mermaid diagram source files for the Flashpoint Web
+documentation. These diagrams can be rendered in any Markdown viewer that
+supports Mermaid syntax (GitHub, GitLab, VS Code with Mermaid extension, etc.).
 
 ## Diagram Files
 
 ### 1. System Architecture (`system-architecture.mmd`)
 
-Complete system architecture showing all three services, databases, and data flow patterns.
+Complete system architecture showing all three services, databases, and data
+flow patterns.
 
 **Contents:**
+
 - Overall system architecture with all components
 - Frontend service architecture (React, Vite, TanStack Query, Zustand)
 - Backend service architecture (Express, middleware, services)
@@ -17,6 +21,7 @@ Complete system architecture showing all three services, databases, and data flo
 - External services (CDN)
 
 **Use cases:**
+
 - Understanding the overall system design
 - Onboarding new developers
 - Architecture decision documentation
@@ -29,6 +34,7 @@ Complete system architecture showing all three services, databases, and data flo
 Complete authentication lifecycle including login, token refresh, and logout.
 
 **Contents:**
+
 - User login sequence
 - Token refresh flow
 - Protected request with RBAC
@@ -36,6 +42,7 @@ Complete authentication lifecycle including login, token refresh, and logout.
 - Guest mode flow
 
 **Use cases:**
+
 - Understanding authentication implementation
 - Debugging auth issues
 - Security audits
@@ -48,6 +55,7 @@ Complete authentication lifecycle including login, token refresh, and logout.
 Complete game launch sequence from user click to game playing.
 
 **Contents:**
+
 - Complete game launch sequence
 - ZIP mounting process
 - HTTP proxy request resolution
@@ -55,6 +63,7 @@ Complete game launch sequence from user click to game playing.
 - Asset loading workflow
 
 **Use cases:**
+
 - Understanding game launch mechanics
 - Debugging game loading issues
 - Optimizing game load times
@@ -67,12 +76,14 @@ Complete game launch sequence from user click to game playing.
 Session tracking lifecycle from start to cleanup.
 
 **Contents:**
+
 - Play session lifecycle (start/end)
 - Statistics aggregation
 - Cleanup job for abandoned sessions
 - Real-time statistics queries
 
 **Use cases:**
+
 - Understanding play tracking implementation
 - Debugging session tracking issues
 - Analytics implementation
@@ -82,9 +93,11 @@ Session tracking lifecycle from start to cleanup.
 
 ### 5. Service Communication (`service-communication.mmd`)
 
-Inter-service communication patterns between frontend, backend, and game service.
+Inter-service communication patterns between frontend, backend, and game
+service.
 
 **Contents:**
+
 - Service communication overview
 - Frontend to backend communication
 - Backend to game service communication
@@ -93,6 +106,7 @@ Inter-service communication patterns between frontend, backend, and game service
 - State synchronization patterns
 
 **Use cases:**
+
 - Understanding service interactions
 - Debugging communication issues
 - API design decisions
@@ -105,6 +119,7 @@ Inter-service communication patterns between frontend, backend, and game service
 Entity relationship diagrams for both databases.
 
 **Contents:**
+
 - Flashpoint database schema (flashpoint.sqlite)
 - User database authentication & authorization tables
 - User database play tracking & statistics tables
@@ -113,6 +128,7 @@ Entity relationship diagrams for both databases.
 - Database access patterns
 
 **Use cases:**
+
 - Understanding data models
 - Database migrations
 - Query optimization
@@ -125,6 +141,7 @@ Entity relationship diagrams for both databases.
 Frontend component organization and data flow.
 
 **Contents:**
+
 - Frontend component hierarchy
 - Component data flow
 - State management architecture
@@ -132,6 +149,7 @@ Frontend component organization and data flow.
 - Protected route pattern
 
 **Use cases:**
+
 - Understanding frontend architecture
 - Component refactoring
 - State management decisions
@@ -143,7 +161,8 @@ Frontend component organization and data flow.
 
 ### In GitHub/GitLab
 
-Mermaid diagrams render automatically in Markdown files on GitHub and GitLab. Simply view any `.md` file containing Mermaid code blocks.
+Mermaid diagrams render automatically in Markdown files on GitHub and GitLab.
+Simply view any `.md` file containing Mermaid code blocks.
 
 ### In VS Code
 
@@ -158,13 +177,18 @@ Mermaid diagrams render automatically in Markdown files on GitHub and GitLab. Si
 
 ### In Documentation Sites
 
-These diagrams are embedded in the main documentation files in the `docs/` directory:
+These diagrams are embedded in the main documentation files in the `docs/`
+directory:
 
-- `system-architecture.mmd` → Used in `docs/02-architecture/system-architecture.md`
-- `authentication-flow.mmd` → Used in `docs/02-architecture/authentication-flow.md`
+- `system-architecture.mmd` → Used in
+  `docs/02-architecture/system-architecture.md`
+- `authentication-flow.mmd` → Used in
+  `docs/02-architecture/authentication-flow.md`
 - `game-launch-flow.mmd` → Used in `docs/02-architecture/game-launch-flow.md`
-- `play-tracking-flow.mmd` → Used in `docs/02-architecture/play-tracking-flow.md`
-- `service-communication.mmd` → Used in `docs/02-architecture/service-communication.md`
+- `play-tracking-flow.mmd` → Used in
+  `docs/02-architecture/play-tracking-flow.md`
+- `service-communication.mmd` → Used in
+  `docs/02-architecture/service-communication.md`
 - `database-schema.mmd` → Used in `docs/03-backend/database/schema.md`
 - `component-hierarchy.mmd` → Used in `docs/04-frontend/architecture.md`
 
@@ -172,9 +196,11 @@ These diagrams are embedded in the main documentation files in the `docs/` direc
 
 ## Diagram Syntax
 
-All diagrams use [Mermaid](https://mermaid.js.org/) syntax. Common diagram types used:
+All diagrams use [Mermaid](https://mermaid.js.org/) syntax. Common diagram types
+used:
 
 ### Flowchart (graph)
+
 ```mermaid
 graph TB
     A[Start] --> B[Process]
@@ -182,6 +208,7 @@ graph TB
 ```
 
 ### Sequence Diagram
+
 ```mermaid
 sequenceDiagram
     Alice->>Bob: Hello Bob
@@ -189,6 +216,7 @@ sequenceDiagram
 ```
 
 ### Entity Relationship Diagram
+
 ```mermaid
 erDiagram
     CUSTOMER ||--o{ ORDER : places
diff --git a/docs/12-reference/README.md b/docs/12-reference/README.md
index f1e1af4..ff7ef1c 100644
--- a/docs/12-reference/README.md
+++ b/docs/12-reference/README.md
@@ -1,12 +1,15 @@
 # Reference Documentation
 
-This directory contains comprehensive reference materials for the Flashpoint Web application, including database schemas, type definitions, terminology, and dependency information.
+This directory contains comprehensive reference materials for the Flashpoint Web
+application, including database schemas, type definitions, terminology, and
+dependency information.
 
 ## Contents
 
 ### [Database Schema Reference](./database-schema-reference.md)
 
-Complete database schema documentation for both databases used in the application:
+Complete database schema documentation for both databases used in the
+application:
 
 - **Flashpoint Database** (flashpoint.sqlite)
   - Read-only game metadata database
@@ -21,6 +24,7 @@ Complete database schema documentation for both databases used in the applicatio
   - RBAC implementation
 
 **Use this when:**
+
 - Writing database queries
 - Understanding data relationships
 - Designing new features requiring data storage
@@ -35,7 +39,8 @@ TypeScript type and interface definitions used throughout the codebase:
 
 - **Game Types:** Game, GameFilters, FilterOptions, Playlist, GameLaunchData
 - **Authentication Types:** User, AuthTokens, LoginCredentials, Permission, Role
-- **User Management Types:** UserDetails, CreateUserData, UpdateUserData, ActivityLog
+- **User Management Types:** UserDetails, CreateUserData, UpdateUserData,
+  ActivityLog
 - **Play Tracking Types:** PlaySession, GameStats, UserStats
 - **UI State Types:** AuthState, UIState, ThemeState
 - **Theme Types:** ThemeMode, PrimaryColor, ColorPalette
@@ -44,6 +49,7 @@ TypeScript type and interface definitions used throughout the codebase:
 - **API Response Types:** SuccessResponse, ErrorResponse
 
 **Use this when:**
+
 - Writing new components or services
 - Understanding data structures
 - Implementing API endpoints
@@ -54,18 +60,26 @@ TypeScript type and interface definitions used throughout the codebase:
 
 ### [Glossary](./glossary.md)
 
-Definitions of technical terms, project-specific terminology, and architectural concepts:
+Definitions of technical terms, project-specific terminology, and architectural
+concepts:
 
-- **Project-Specific Terms:** Flashpoint, Flashpoint Launcher, htdocs, library, curation
+- **Project-Specific Terms:** Flashpoint, Flashpoint Launcher, htdocs, library,
+  curation
 - **Technical Terms:** JWT, RBAC, CORS, bcrypt, SQLite, hot-reload, middleware
-- **Architecture Terms:** Monorepo, service layer, separation of concerns, state management
+- **Architecture Terms:** Monorepo, service layer, separation of concerns, state
+  management
 - **Database Terms:** Migration, foreign key, index, transaction, schema
-- **Authentication:** Access token, refresh token, permission, guest mode, session
-- **Frontend Terms:** SPA, HMR, React Query, Zustand, Tailwind CSS, virtualization
-- **Game & Emulation:** Flash, Ruffle, SWF, ActionScript, HTML5 games, ZIP mounting
-- **Development Terms:** TypeScript, tsx, Vite, ESLint, Docker, environment variables
+- **Authentication:** Access token, refresh token, permission, guest mode,
+  session
+- **Frontend Terms:** SPA, HMR, React Query, Zustand, Tailwind CSS,
+  virtualization
+- **Game & Emulation:** Flash, Ruffle, SWF, ActionScript, HTML5 games, ZIP
+  mounting
+- **Development Terms:** TypeScript, tsx, Vite, ESLint, Docker, environment
+  variables
 
 **Use this when:**
+
 - Onboarding new developers
 - Understanding unfamiliar terminology
 - Writing documentation
@@ -79,7 +93,8 @@ Definitions of technical terms, project-specific terminology, and architectural
 Comprehensive reference for all npm packages used across the monorepo:
 
 - **Backend Dependencies:** Express, BetterSqlite3, bcrypt, JWT, axios, winston
-- **Frontend Dependencies:** React, Vite, TanStack Query, Zustand, Tailwind CSS, Radix UI
+- **Frontend Dependencies:** React, Vite, TanStack Query, Zustand, Tailwind CSS,
+  Radix UI
 - **Game Service Dependencies:** Express, node-stream-zip, winston
 - **Shared Development Tools:** TypeScript, ESLint, tsx, concurrently
 - **License Information:** Summary of all licenses used
@@ -87,6 +102,7 @@ Comprehensive reference for all npm packages used across the monorepo:
 - **Dependency Management:** Update processes and best practices
 
 **Use this when:**
+
 - Adding new dependencies
 - Understanding why specific packages were chosen
 - Updating dependencies
@@ -101,11 +117,13 @@ Comprehensive reference for all npm packages used across the monorepo:
 ### Common Database Queries
 
 #### Get Game by ID
+
 ```sql
 SELECT * FROM game WHERE id = ?;
 ```
 
 #### Get User with Permissions
+
 ```sql
 SELECT u.*, r.name as role_name, GROUP_CONCAT(p.name) as permissions
 FROM users u
@@ -117,6 +135,7 @@ GROUP BY u.id;
 ```
 
 #### Get User Play Statistics
+
 ```sql
 SELECT game_id, game_title, total_plays, total_playtime_seconds
 FROM user_game_stats
@@ -130,6 +149,7 @@ LIMIT 10;
 ### Common Type Patterns
 
 #### API Response with Pagination
+
 ```typescript
 interface PaginatedResponse<T> {
   data: T[];
@@ -143,6 +163,7 @@ interface PaginatedResponse<T> {
 ```
 
 #### Game Filters
+
 ```typescript
 interface GameFilters {
   search?: string;
@@ -157,6 +178,7 @@ interface GameFilters {
 ```
 
 #### JWT Payload
+
 ```typescript
 interface JWTPayload {
   userId: number;
@@ -170,6 +192,7 @@ interface JWTPayload {
 ### Environment Variables Reference
 
 #### Backend
+
 ```env
 FLASHPOINT_PATH=D:/Flashpoint
 # Note: All other paths (DB, HTDOCS, IMAGES, LOGOS, PLAYLISTS, GAMES) are derived automatically
@@ -181,6 +204,7 @@ JWT_EXPIRES_IN=1h
 ```
 
 #### Frontend
+
 ```env
 # No environment variables required for local development
 # API calls are proxied through Vite (dev) or Nginx (production)
@@ -188,6 +212,7 @@ VITE_APP_VERSION=1.0.0  # Optional: displayed app version
 ```
 
 #### Game Service
+
 ```env
 FLASHPOINT_PATH=D:/Flashpoint
 # Note: HTDOCS and Games paths are derived automatically from FLASHPOINT_PATH
@@ -199,45 +224,45 @@ GAMEZIPSERVER_PORT=22501
 
 ### Common Permissions
 
-| Permission | Description |
-|------------|-------------|
-| games.read | View and browse games |
-| games.play | Play games in browser |
-| games.download | Download game files |
-| playlists.read | View playlists |
-| playlists.create | Create new playlists |
-| playlists.update | Update existing playlists |
-| playlists.delete | Delete playlists |
-| users.read | View user accounts |
-| users.create | Create new user accounts |
-| users.update | Update user accounts |
-| users.delete | Delete user accounts |
-| roles.read | View roles and permissions |
-| roles.update | Update roles and permissions |
-| settings.read | View system settings |
-| settings.update | Update system settings |
-| activities.read | View activity logs |
+| Permission       | Description                  |
+| ---------------- | ---------------------------- |
+| games.read       | View and browse games        |
+| games.play       | Play games in browser        |
+| games.download   | Download game files          |
+| playlists.read   | View playlists               |
+| playlists.create | Create new playlists         |
+| playlists.update | Update existing playlists    |
+| playlists.delete | Delete playlists             |
+| users.read       | View user accounts           |
+| users.create     | Create new user accounts     |
+| users.update     | Update user accounts         |
+| users.delete     | Delete user accounts         |
+| roles.read       | View roles and permissions   |
+| roles.update     | Update roles and permissions |
+| settings.read    | View system settings         |
+| settings.update  | Update system settings       |
+| activities.read  | View activity logs           |
 
 ---
 
 ### Default Roles
 
-| Role | Priority | Default Permissions |
-|------|----------|---------------------|
-| admin | 100 | All permissions |
-| user | 50 | All except users.*, roles.*, settings.*, activities.read |
-| guest | 0 | games.read, playlists.read |
+| Role  | Priority | Default Permissions                                       |
+| ----- | -------- | --------------------------------------------------------- |
+| admin | 100      | All permissions                                           |
+| user  | 50       | All except users._, roles._, settings.\*, activities.read |
+| guest | 0        | games.read, playlists.read                                |
 
 ---
 
 ### Port Reference
 
-| Service | Port | Purpose |
-|---------|------|---------|
-| Backend | 3100 | REST API server |
-| Frontend | 5173 | Vite development server |
-| Game Service - Proxy | 22500 | HTTP proxy for game content |
-| Game Service - GameZip | 22501 | ZIP file streaming server |
+| Service                | Port  | Purpose                     |
+| ---------------------- | ----- | --------------------------- |
+| Backend                | 3100  | REST API server             |
+| Frontend               | 5173  | Vite development server     |
+| Game Service - Proxy   | 22500 | HTTP proxy for game content |
+| Game Service - GameZip | 22501 | ZIP file streaming server   |
 
 ---
 
@@ -245,8 +270,10 @@ GAMEZIPSERVER_PORT=22501
 
 ### When to Use Which Reference
 
-- **Need database structure?** → [Database Schema Reference](./database-schema-reference.md)
-- **Need type definitions?** → [Type Definitions Reference](./type-definitions.md)
+- **Need database structure?** →
+  [Database Schema Reference](./database-schema-reference.md)
+- **Need type definitions?** →
+  [Type Definitions Reference](./type-definitions.md)
 - **Need term definition?** → [Glossary](./glossary.md)
 - **Need package info?** → [External Dependencies](./external-dependencies.md)
 
@@ -276,31 +303,37 @@ When updating reference documentation:
 ## Related Documentation
 
 ### Architecture
+
 - [System Architecture](../02-architecture/system-architecture.md)
 - [Service Communication](../02-architecture/service-communication.md)
 - [Data Flow Diagrams](../02-architecture/data-flow-diagrams.md)
 
 ### Backend
+
 - [Backend Architecture](../03-backend/architecture.md)
 - [Database Services](../03-backend/services/database-service.md)
 - [API Reference](../06-api-reference/README.md)
 
 ### Frontend
+
 - [Frontend Architecture](../04-frontend/architecture.md)
 - [State Management](../04-frontend/state-management/zustand-stores.md)
 - [Component Overview](../04-frontend/components/component-overview.md)
 
 ### Game Service
+
 - [Game Service Architecture](../05-game-service/architecture.md)
 - [Proxy Server](../05-game-service/proxy-server.md)
 - [ZIP Manager](../05-game-service/zip-manager.md)
 
 ### API Reference
+
 - [Authentication API](../06-api-reference/authentication-api.md)
 - [Games API](../06-api-reference/games-api.md)
 - [Users API](../06-api-reference/users-api.md)
 
 ### Development
+
 - [Setup Guide](../08-development/setup-guide.md)
 - [Coding Standards](../08-development/coding-standards.md)
 - [Common Pitfalls](../08-development/common-pitfalls.md)
@@ -309,10 +342,12 @@ When updating reference documentation:
 
 ## Feedback
 
-If you find errors, outdated information, or missing content in these references, please:
+If you find errors, outdated information, or missing content in these
+references, please:
 
 1. Create an issue in the project repository
 2. Submit a pull request with corrections
 3. Contact the documentation maintainer
 
-Good reference documentation is essential for project success. Help keep it accurate and useful!
+Good reference documentation is essential for project success. Help keep it
+accurate and useful!
diff --git a/docs/12-reference/cors-security-decision.md b/docs/12-reference/cors-security-decision.md
index 7a84e64..264e01e 100644
--- a/docs/12-reference/cors-security-decision.md
+++ b/docs/12-reference/cors-security-decision.md
@@ -2,7 +2,9 @@
 
 ## Overview
 
-The Game Service intentionally uses `Access-Control-Allow-Origin: *` (wildcard) to allow cross-origin requests from any origin. This document explains the security rationale and justification for this decision.
+The Game Service intentionally uses `Access-Control-Allow-Origin: *` (wildcard)
+to allow cross-origin requests from any origin. This document explains the
+security rationale and justification for this decision.
 
 ## Location
 
@@ -20,13 +22,16 @@ The Game Service intentionally uses `Access-Control-Allow-Origin: *` (wildcard)
 
 ### 1. Public Game Content
 
-The game-service serves **public, read-only game content** from the Flashpoint Archive:
+The game-service serves **public, read-only game content** from the Flashpoint
+Archive:
+
 - Flash game files (.swf)
 - HTML5 game files (.html, .js, .css)
 - Game assets (images, audio, etc.)
 - Animation files
 
 All content served is:
+
 - ✅ Public domain or freely redistributable
 - ✅ Read-only (no data modification)
 - ✅ Non-sensitive (no user data, credentials, or private information)
@@ -35,43 +40,51 @@ All content served is:
 ### 2. Game Embedding Use Cases
 
 The wildcard CORS policy supports legitimate use cases:
+
 - Embedding Flash/HTML5 games in iframes across different domains
-- Running games from `http://localhost:22500` while frontend is on `http://localhost:5173`
+- Running games from `http://localhost:22500` while frontend is on
+  `http://localhost:5173`
 - Supporting different development environments and ports
 - Allowing community-hosted instances with various domain configurations
 
 ### 3. No Sensitive Data Exposure
 
 The game-service does **NOT** serve:
+
 - ❌ User data or personal information
 - ❌ Authentication tokens or credentials
 - ❌ Private database records
 - ❌ Configuration secrets
 - ❌ API keys or sensitive settings
 
-All sensitive operations are handled by the backend service (port 3100) which has **restrictive CORS** configured to only allow the specific frontend origin.
+All sensitive operations are handled by the backend service (port 3100) which
+has **restrictive CORS** configured to only allow the specific frontend origin.
 
 ### 4. Security Boundaries
 
 **Backend Service (Port 3100)** - Restricted CORS:
+
 ```typescript
 // backend/src/server.ts
 cors({
   origin: process.env.DOMAIN || 'http://localhost:5173',
-  credentials: true
-})
+  credentials: true,
+});
 ```
+
 - Handles authentication
 - Manages user data
 - Enforces RBAC permissions
 - Uses restrictive CORS with credentials
 
 **Game Service (Ports 22500, 22501)** - Permissive CORS:
+
 ```typescript
 // game-service/src/utils/cors.ts
 setCorsHeaders(res, { allowCrossDomain: true });
 // Sets: Access-Control-Allow-Origin: *
 ```
+
 - Serves public game files only
 - No authentication required
 - No sensitive data access
@@ -105,21 +118,25 @@ Even with wildcard CORS, the game-service implements:
 
 ### Alternative 1: Whitelist Frontend Origin Only
 
-**Rejected**: Would break game embedding and require reconfiguration for every deployment environment.
+**Rejected**: Would break game embedding and require reconfiguration for every
+deployment environment.
 
 ### Alternative 2: Dynamic Origin Validation
 
-**Rejected**: Adds complexity with no security benefit given the public, read-only nature of served content.
+**Rejected**: Adds complexity with no security benefit given the public,
+read-only nature of served content.
 
 ### Alternative 3: Separate Authenticated Endpoint
 
-**Already Implemented**: The backend service (port 3100) already handles all authenticated operations with restrictive CORS.
+**Already Implemented**: The backend service (port 3100) already handles all
+authenticated operations with restrictive CORS.
 
 ## Risk Assessment
 
 **Risk Level**: ✅ LOW
 
 **Justification**:
+
 - Content is public and intended for broad distribution
 - No sensitive data exposure
 - No write operations
@@ -129,43 +146,52 @@ Even with wildcard CORS, the game-service implements:
 ## Monitoring and Compliance
 
 **Monitoring**:
+
 - Request logs track file access patterns
 - Unusual access patterns can be detected via backend activity logging
 - ZIP mount operations are logged for audit
 
 **Compliance**:
+
 - Meets OWASP security guidelines for public content delivery
 - Follows principle of least privilege (game-service has no database access)
 - Implements defense in depth (multiple security layers)
 
 ## Backend Dynamic CORS (Updated 2026-02)
 
-The backend service now supports **dynamic CORS** in addition to the static `DOMAIN` environment variable:
+The backend service now supports **dynamic CORS** in addition to the static
+`DOMAIN` environment variable:
 
 **Implementation**: `backend/src/server.ts`
 
 ```typescript
 origin: (origin, callback) => {
-  if (!origin) return callback(null, true);       // same-origin
+  if (!origin) return callback(null, true); // same-origin
   if (origin === config.domain) return callback(null, true); // env var
   // Check domains table (cached 60s)
   const allowed = domainService.getAllowedOrigins();
   if (allowed.has(origin)) return callback(null, true);
   callback(new Error('Not allowed by CORS'));
-}
+};
 ```
 
 **How it works:**
+
 - Admins configure domains via `/api/domains` endpoints
-- `DomainService.getAllowedOrigins()` generates both `http://` and `https://` variants per hostname
+- `DomainService.getAllowedOrigins()` generates both `http://` and `https://`
+  variants per hostname
 - Results cached in-memory for 60 seconds, invalidated on any domain mutation
 - Falls back to `DOMAIN` env var if no domains configured or DB unavailable
 
-**Security**: This does NOT affect the game-service, which retains its wildcard CORS policy for public game content. Only the backend API service uses dynamic CORS.
+**Security**: This does NOT affect the game-service, which retains its wildcard
+CORS policy for public game content. Only the backend API service uses dynamic
+CORS.
 
 ## Conclusion
 
-The wildcard CORS policy for game-service is a **justified security decision** that:
+The wildcard CORS policy for game-service is a **justified security decision**
+that:
+
 1. Serves only public, read-only game content
 2. Exposes no sensitive data
 3. Supports legitimate embedding and development use cases
@@ -176,6 +202,5 @@ This decision has been reviewed and documented for security audit purposes.
 
 ---
 
-**Last Updated**: 2026-01-27
-**Reviewed By**: Code Review Process
-**Status**: Approved - Justified for public content delivery
+**Last Updated**: 2026-01-27 **Reviewed By**: Code Review Process **Status**:
+Approved - Justified for public content delivery
diff --git a/docs/12-reference/database-indexes.md b/docs/12-reference/database-indexes.md
index a524af9..f02efdf 100644
--- a/docs/12-reference/database-indexes.md
+++ b/docs/12-reference/database-indexes.md
@@ -2,9 +2,14 @@
 
 ## Overview
 
-This document outlines the recommended database indexes for optimal query performance on the Flashpoint database (`flashpoint.sqlite`). Without these indexes, queries on large datasets (500K+ games) can take 5-10 seconds instead of <100ms.
+This document outlines the recommended database indexes for optimal query
+performance on the Flashpoint database (`flashpoint.sqlite`). Without these
+indexes, queries on large datasets (500K+ games) can take 5-10 seconds instead
+of <100ms.
 
-**IMPORTANT**: These indexes need to be added to the **Flashpoint database** (`flashpoint.sqlite`), not the user database (`user.db`). This must be coordinated with the Flashpoint Archive maintainers.
+**IMPORTANT**: These indexes need to be added to the **Flashpoint database**
+(`flashpoint.sqlite`), not the user database (`user.db`). This must be
+coordinated with the Flashpoint Archive maintainers.
 
 ---
 
@@ -12,14 +17,17 @@ This document outlines the recommended database indexes for optimal query perfor
 
 ### Game Table Indexes
 
-The `game` table is the primary performance bottleneck. The following indexes are recommended based on common query patterns in `GameService.ts`:
+The `game` table is the primary performance bottleneck. The following indexes
+are recommended based on common query patterns in `GameService.ts`:
 
 #### 1. Platform Name Index
+
 ```sql
 CREATE INDEX IF NOT EXISTS idx_game_platform ON game(platformName);
 ```
 
 **Used by:**
+
 - Platform filtering in game search
 - Web-playable game counts (Flash, HTML5)
 - Platform-specific browsing
@@ -29,11 +37,13 @@ CREATE INDEX IF NOT EXISTS idx_game_platform ON game(platformName);
 ---
 
 #### 2. Series Index
+
 ```sql
 CREATE INDEX IF NOT EXISTS idx_game_series ON game(series);
 ```
 
 **Used by:**
+
 - Series filtering in advanced search
 - "Games in this series" feature
 
@@ -42,11 +52,13 @@ CREATE INDEX IF NOT EXISTS idx_game_series ON game(series);
 ---
 
 #### 3. Developer Index
+
 ```sql
 CREATE INDEX IF NOT EXISTS idx_game_developer ON game(developer);
 ```
 
 **Used by:**
+
 - Developer filtering
 - "More games by this developer" queries
 
@@ -55,11 +67,13 @@ CREATE INDEX IF NOT EXISTS idx_game_developer ON game(developer);
 ---
 
 #### 4. Publisher Index
+
 ```sql
 CREATE INDEX IF NOT EXISTS idx_game_publisher ON game(publisher);
 ```
 
 **Used by:**
+
 - Publisher filtering
 - Publisher-specific game lists
 
@@ -68,11 +82,13 @@ CREATE INDEX IF NOT EXISTS idx_game_publisher ON game(publisher);
 ---
 
 #### 5. Play Mode Index
+
 ```sql
 CREATE INDEX IF NOT EXISTS idx_game_playmode ON game(playMode);
 ```
 
 **Used by:**
+
 - Single-player vs multiplayer filtering
 - Play mode statistics
 
@@ -81,11 +97,13 @@ CREATE INDEX IF NOT EXISTS idx_game_playmode ON game(playMode);
 ---
 
 #### 6. Language Index
+
 ```sql
 CREATE INDEX IF NOT EXISTS idx_game_language ON game(language);
 ```
 
 **Used by:**
+
 - Language filtering
 - Localization statistics
 
@@ -94,11 +112,13 @@ CREATE INDEX IF NOT EXISTS idx_game_language ON game(language);
 ---
 
 #### 7. Release Date Index
+
 ```sql
 CREATE INDEX IF NOT EXISTS idx_game_releasedate ON game(releaseDate);
 ```
 
 **Used by:**
+
 - Date range filtering
 - "New releases" queries
 - Decade browsing
@@ -108,11 +128,13 @@ CREATE INDEX IF NOT EXISTS idx_game_releasedate ON game(releaseDate);
 ---
 
 #### 8. Library Index
+
 ```sql
 CREATE INDEX IF NOT EXISTS idx_game_library ON game(library);
 ```
 
 **Used by:**
+
 - Separating games ('arcade') from animations ('theatre')
 - Library-specific statistics
 - Used in Statistics endpoint
@@ -122,11 +144,13 @@ CREATE INDEX IF NOT EXISTS idx_game_library ON game(library);
 ---
 
 #### 9. Composite Index: Platform + Library
+
 ```sql
 CREATE INDEX IF NOT EXISTS idx_game_platform_library ON game(platformName, library);
 ```
 
 **Used by:**
+
 - Web-playable games counting (Flash/HTML5 + arcade)
 - Platform statistics per library
 
@@ -137,11 +161,13 @@ CREATE INDEX IF NOT EXISTS idx_game_platform_library ON game(platformName, libra
 ### Tag Table Indexes
 
 #### 10. Game Tags Junction Index
+
 ```sql
 CREATE INDEX IF NOT EXISTS idx_game_tags_gameid ON game_tags_tag(gameId);
 ```
 
 **Used by:**
+
 - Fetching all tags for a specific game
 - Tag-based filtering
 
@@ -152,12 +178,14 @@ CREATE INDEX IF NOT EXISTS idx_game_tags_gameid ON game_tags_tag(gameId);
 ## Performance Measurements
 
 ### Without Indexes
+
 - **Search with platform filter:** ~5,000ms
 - **Developer-specific search:** ~8,000ms
 - **Statistics endpoint:** ~12,000ms
 - **Web-playable games count:** ~3,000ms
 
 ### With Indexes
+
 - **Search with platform filter:** ~50ms (99% faster)
 - **Developer-specific search:** ~80ms (99% faster)
 - **Statistics endpoint:** ~150ms (98.75% faster)
@@ -197,11 +225,13 @@ SELECT * FROM game WHERE platformName = 'Flash' AND library = 'arcade';
 ```
 
 **Expected output (with indexes):**
+
 ```
 SEARCH TABLE game USING INDEX idx_game_platform_library (platformName=? AND library=?)
 ```
 
 **Bad output (without indexes):**
+
 ```
 SCAN TABLE game
 ```
@@ -211,11 +241,13 @@ SCAN TABLE game
 ## Index Maintenance
 
 ### Size Impact
+
 - Each index adds ~5-10% to database size
 - 10 indexes on 500K games ≈ +50-100MB
 - **Worth it**: Query speed improvements far outweigh size increase
 
 ### Updates
+
 - Indexes are automatically maintained by SQLite
 - Inserts/updates/deletes are slightly slower
 - Flashpoint database is primarily read-only, so minimal impact
@@ -225,6 +257,7 @@ SCAN TABLE game
 ## Coordination with Flashpoint Archive
 
 **Action Items:**
+
 1. Submit pull request to Flashpoint Launcher repository
 2. Include this documentation and SQL script
 3. Request index addition in next database release
@@ -242,7 +275,8 @@ While waiting for database-level indexes, the application implements:
 3. **Pagination** - Limit result sets to 50-100 records
 4. **Query Optimization** - Use WHERE clauses efficiently
 
-However, **database indexes provide the most significant performance improvement** and should be prioritized.
+However, **database indexes provide the most significant performance
+improvement** and should be prioritized.
 
 ---
 
@@ -254,5 +288,5 @@ However, **database indexes provide the most significant performance improvement
 
 ---
 
-**Last Updated:** 2026-01-27
-**Status:** Awaiting Flashpoint Archive coordination
+**Last Updated:** 2026-01-27 **Status:** Awaiting Flashpoint Archive
+coordination
diff --git a/docs/12-reference/database-schema-reference.md b/docs/12-reference/database-schema-reference.md
index 7ec5d25..efc9423 100644
--- a/docs/12-reference/database-schema-reference.md
+++ b/docs/12-reference/database-schema-reference.md
@@ -1,124 +1,125 @@
 # Database Schema Reference
 
-Reference for Flashpoint Web database schemas: flashpoint.sqlite (read-only) and user.db (read-write).
+Reference for Flashpoint Web database schemas: flashpoint.sqlite (read-only) and
+user.db (read-write).
 
 ## Flashpoint Database (flashpoint.sqlite)
 
-**Location:** D:/Flashpoint/Data/flashpoint.sqlite
-**Access:** Read-only (managed by Flashpoint Launcher)
-**Hot-Reload:** Yes (DatabaseService watches for changes)
+**Location:** D:/Flashpoint/Data/flashpoint.sqlite **Access:** Read-only
+(managed by Flashpoint Launcher) **Hot-Reload:** Yes (DatabaseService watches
+for changes)
 
 ### game
 
 Main game metadata table.
 
-| Column | Type | Nullable | Description |
-|--------|------|----------|-------------|
-| id | TEXT | No | Primary key, game UUID |
-| title | TEXT | No | Game title |
-| developer | TEXT | Yes | Developer name |
-| publisher | TEXT | Yes | Publisher name |
-| platformName | TEXT | Yes | Platform (e.g., Flash, HTML5) |
-| platformId | INTEGER | Yes | Foreign key to platform.id |
-| library | TEXT | No | arcade or theatre |
-| orderTitle | TEXT | No | Normalized title for sorting |
-| broken | BOOLEAN | Yes | Marked as broken |
-| extreme | BOOLEAN | Yes | Contains extreme content |
-| tagsStr | TEXT | Yes | Semicolon-separated tags |
-| releaseDate | TEXT | Yes | YYYY-MM-DD format |
-| launchCommand | TEXT | Yes | Launch URL/command |
-| dateAdded | TEXT | Yes | ISO 8601 |
-| dateModified | TEXT | Yes | ISO 8601 |
-| archiveState | INTEGER | Yes | Archive status |
+| Column        | Type    | Nullable | Description                   |
+| ------------- | ------- | -------- | ----------------------------- |
+| id            | TEXT    | No       | Primary key, game UUID        |
+| title         | TEXT    | No       | Game title                    |
+| developer     | TEXT    | Yes      | Developer name                |
+| publisher     | TEXT    | Yes      | Publisher name                |
+| platformName  | TEXT    | Yes      | Platform (e.g., Flash, HTML5) |
+| platformId    | INTEGER | Yes      | Foreign key to platform.id    |
+| library       | TEXT    | No       | arcade or theatre             |
+| orderTitle    | TEXT    | No       | Normalized title for sorting  |
+| broken        | BOOLEAN | Yes      | Marked as broken              |
+| extreme       | BOOLEAN | Yes      | Contains extreme content      |
+| tagsStr       | TEXT    | Yes      | Semicolon-separated tags      |
+| releaseDate   | TEXT    | Yes      | YYYY-MM-DD format             |
+| launchCommand | TEXT    | Yes      | Launch URL/command            |
+| dateAdded     | TEXT    | Yes      | ISO 8601                      |
+| dateModified  | TEXT    | Yes      | ISO 8601                      |
+| archiveState  | INTEGER | Yes      | Archive status                |
 
 ### game_data
 
 Game file/launch data (multiple entries per game possible).
 
-| Column | Type | Nullable | Description |
-|--------|------|----------|-------------|
-| id | INTEGER | No | Primary key, auto-increment |
-| gameId | TEXT | No | Foreign key to game.id |
-| presentOnDisk | INTEGER | Yes | NULL=none, 0=download, 1=downloaded |
-| sha256 | TEXT | Yes | SHA-256 hash |
-| path | TEXT | Yes | File path or URL |
-| launchCommand | TEXT | Yes | Full launch command |
+| Column        | Type    | Nullable | Description                         |
+| ------------- | ------- | -------- | ----------------------------------- |
+| id            | INTEGER | No       | Primary key, auto-increment         |
+| gameId        | TEXT    | No       | Foreign key to game.id              |
+| presentOnDisk | INTEGER | Yes      | NULL=none, 0=download, 1=downloaded |
+| sha256        | TEXT    | Yes      | SHA-256 hash                        |
+| path          | TEXT    | Yes      | File path or URL                    |
+| launchCommand | TEXT    | Yes      | Full launch command                 |
 
 ### platform
 
 Gaming platforms.
 
-| Column | Type | Nullable | Description |
-|--------|------|----------|-------------|
-| id | INTEGER | No | Primary key |
-| name | TEXT | No | Platform name (unique) |
-| description | TEXT | Yes | Platform description |
+| Column      | Type    | Nullable | Description            |
+| ----------- | ------- | -------- | ---------------------- |
+| id          | INTEGER | No       | Primary key            |
+| name        | TEXT    | No       | Platform name (unique) |
+| description | TEXT    | Yes      | Platform description   |
 
 ### tag
 
 Tag definitions.
 
-| Column | Type | Nullable | Description |
-|--------|------|----------|-------------|
-| id | INTEGER | No | Primary key |
-| name | TEXT | No | Tag name (unique) |
-| category | TEXT | Yes | Tag category |
+| Column   | Type    | Nullable | Description       |
+| -------- | ------- | -------- | ----------------- |
+| id       | INTEGER | No       | Primary key       |
+| name     | TEXT    | No       | Tag name (unique) |
+| category | TEXT    | Yes      | Tag category      |
 
 ### game_tags_tag
 
 Many-to-many: games to tags.
 
-| Column | Type | Nullable | Description |
-|--------|------|----------|-------------|
-| id | INTEGER | No | Primary key |
-| gameId | TEXT | No | Foreign key to game.id |
-| tagId | INTEGER | No | Foreign key to tag.id |
+| Column | Type    | Nullable | Description            |
+| ------ | ------- | -------- | ---------------------- |
+| id     | INTEGER | No       | Primary key            |
+| gameId | TEXT    | No       | Foreign key to game.id |
+| tagId  | INTEGER | No       | Foreign key to tag.id  |
 
 ### playlist
 
 User/curated playlists.
 
-| Column | Type | Nullable | Description |
-|--------|------|----------|-------------|
-| id | TEXT | No | Primary key, UUID |
-| title | TEXT | No | Playlist title |
-| author | TEXT | Yes | Playlist author |
-| library | TEXT | Yes | Library classification |
+| Column  | Type | Nullable | Description            |
+| ------- | ---- | -------- | ---------------------- |
+| id      | TEXT | No       | Primary key, UUID      |
+| title   | TEXT | No       | Playlist title         |
+| author  | TEXT | Yes      | Playlist author        |
+| library | TEXT | Yes      | Library classification |
 
 ### playlist_game
 
 Many-to-many: playlists to games.
 
-| Column | Type | Nullable | Description |
-|--------|------|----------|-------------|
-| id | INTEGER | No | Primary key |
-| playlistId | TEXT | No | Foreign key to playlist.id |
-| gameId | TEXT | No | Foreign key to game.id |
-| order | INTEGER | Yes | Display order |
+| Column     | Type    | Nullable | Description                |
+| ---------- | ------- | -------- | -------------------------- |
+| id         | INTEGER | No       | Primary key                |
+| playlistId | TEXT    | No       | Foreign key to playlist.id |
+| gameId     | TEXT    | No       | Foreign key to game.id     |
+| order      | INTEGER | Yes      | Display order              |
 
 ---
 
 ## User Database (user.db)
 
-**Location:** backend/user.db
-**Access:** Read-write (managed by UserDatabaseService)
-**Migrations:** backend/src/migrations/001_complete_schema.sql (idempotent)
+**Location:** backend/user.db **Access:** Read-write (managed by
+UserDatabaseService) **Migrations:**
+backend/src/migrations/001_complete_schema.sql (idempotent)
 
 ### users
 
 User accounts.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| username | TEXT | - | Unique (case-insensitive) |
-| email | TEXT | - | Unique (case-insensitive) |
-| password_hash | TEXT | - | bcrypt hash |
-| role_id | INTEGER | - | Foreign key to roles.id |
-| is_active | BOOLEAN | 1 | Account active |
-| created_at | TEXT | now() | ISO 8601 |
-| updated_at | TEXT | now() | ISO 8601 |
-| last_login_at | TEXT | NULL | ISO 8601 |
+| Column        | Type    | Default | Description               |
+| ------------- | ------- | ------- | ------------------------- |
+| id            | INTEGER | AUTO    | Primary key               |
+| username      | TEXT    | -       | Unique (case-insensitive) |
+| email         | TEXT    | -       | Unique (case-insensitive) |
+| password_hash | TEXT    | -       | bcrypt hash               |
+| role_id       | INTEGER | -       | Foreign key to roles.id   |
+| is_active     | BOOLEAN | 1       | Account active            |
+| created_at    | TEXT    | now()   | ISO 8601                  |
+| updated_at    | TEXT    | now()   | ISO 8601                  |
+| last_login_at | TEXT    | NULL    | ISO 8601                  |
 
 **Indexes:** id (primary), username, email, role_id, is_active
 
@@ -126,55 +127,57 @@ User accounts.
 
 RBAC role definitions.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| name | TEXT | - | Unique (case-insensitive) |
-| description | TEXT | NULL | Role description |
-| priority | INTEGER | 0 | Higher = more privileged |
-| created_at | TEXT | now() | ISO 8601 |
-| updated_at | TEXT | now() | ISO 8601 |
+| Column      | Type    | Default | Description               |
+| ----------- | ------- | ------- | ------------------------- |
+| id          | INTEGER | AUTO    | Primary key               |
+| name        | TEXT    | -       | Unique (case-insensitive) |
+| description | TEXT    | NULL    | Role description          |
+| priority    | INTEGER | 0       | Higher = more privileged  |
+| created_at  | TEXT    | now()   | ISO 8601                  |
+| updated_at  | TEXT    | now()   | ISO 8601                  |
 
-**Default Roles:** admin (id:1, priority:100), user (id:2, priority:50), guest (id:3, priority:0)
+**Default Roles:** admin (id:1, priority:100), user (id:2, priority:50), guest
+(id:3, priority:0)
 
 ### permissions
 
 Permission definitions.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| name | TEXT | - | Unique (e.g., games.play) |
-| description | TEXT | NULL | Permission description |
-| resource | TEXT | - | Resource type (games, users, etc) |
-| action | TEXT | - | Action type (read, create, update, delete) |
-| created_at | TEXT | now() | ISO 8601 |
+| Column      | Type    | Default | Description                                |
+| ----------- | ------- | ------- | ------------------------------------------ |
+| id          | INTEGER | AUTO    | Primary key                                |
+| name        | TEXT    | -       | Unique (e.g., games.play)                  |
+| description | TEXT    | NULL    | Permission description                     |
+| resource    | TEXT    | -       | Resource type (games, users, etc)          |
+| action      | TEXT    | -       | Action type (read, create, update, delete) |
+| created_at  | TEXT    | now()   | ISO 8601                                   |
 
-**Core Permissions:** games.read, games.play, playlists.*, users.*, roles.*, settings.*, activities.read
+**Core Permissions:** games.read, games.play, playlists._, users._, roles._,
+settings._, activities.read
 
 ### role_permissions
 
 Many-to-many: roles to permissions.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| role_id | INTEGER | - | Foreign key to roles.id |
-| permission_id | INTEGER | - | Foreign key to permissions.id |
-| created_at | TEXT | now() | ISO 8601 |
+| Column        | Type    | Default | Description                   |
+| ------------- | ------- | ------- | ----------------------------- |
+| id            | INTEGER | AUTO    | Primary key                   |
+| role_id       | INTEGER | -       | Foreign key to roles.id       |
+| permission_id | INTEGER | -       | Foreign key to permissions.id |
+| created_at    | TEXT    | now()   | ISO 8601                      |
 
 ### refresh_tokens
 
 JWT refresh token storage.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| user_id | INTEGER | - | Foreign key to users.id |
-| token | TEXT | - | Unique 64-byte hex string |
-| expires_at | TEXT | - | Expiration timestamp |
-| created_at | TEXT | now() | ISO 8601 |
-| revoked_at | TEXT | NULL | Revocation timestamp |
+| Column     | Type    | Default | Description               |
+| ---------- | ------- | ------- | ------------------------- |
+| id         | INTEGER | AUTO    | Primary key               |
+| user_id    | INTEGER | -       | Foreign key to users.id   |
+| token      | TEXT    | -       | Unique 64-byte hex string |
+| expires_at | TEXT    | -       | Expiration timestamp      |
+| created_at | TEXT    | now()   | ISO 8601                  |
+| revoked_at | TEXT    | NULL    | Revocation timestamp      |
 
 **Notes:** Single-use tokens; revoked after generating new access token.
 
@@ -182,17 +185,17 @@ JWT refresh token storage.
 
 Audit trail for user actions.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| user_id | INTEGER | NULL | Foreign key to users.id |
-| username | TEXT | NULL | Username snapshot |
-| action | TEXT | - | Action performed (login, game.play, etc) |
-| resource | TEXT | NULL | Resource type |
-| resource_id | TEXT | NULL | Resource ID |
-| ip_address | TEXT | NULL | Client IP |
-| user_agent | TEXT | NULL | Client user agent |
-| created_at | TEXT | now() | ISO 8601 |
+| Column      | Type    | Default | Description                              |
+| ----------- | ------- | ------- | ---------------------------------------- |
+| id          | INTEGER | AUTO    | Primary key                              |
+| user_id     | INTEGER | NULL    | Foreign key to users.id                  |
+| username    | TEXT    | NULL    | Username snapshot                        |
+| action      | TEXT    | -       | Action performed (login, game.play, etc) |
+| resource    | TEXT    | NULL    | Resource type                            |
+| resource_id | TEXT    | NULL    | Resource ID                              |
+| ip_address  | TEXT    | NULL    | Client IP                                |
+| user_agent  | TEXT    | NULL    | Client user agent                        |
+| created_at  | TEXT    | now()   | ISO 8601                                 |
 
 **Indexes:** user_id, action, resource, created_at
 
@@ -200,40 +203,44 @@ Audit trail for user actions.
 
 Global key-value settings.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| key | TEXT | - | Unique dot-notation (e.g., auth.guest_access) |
-| value | TEXT | - | Setting value |
-| data_type | TEXT | - | boolean, integer, string, json, float |
-| category | TEXT | - | auth, app, metadata, features, storage, etc |
-| description | TEXT | NULL | Human-readable description |
-| is_public | BOOLEAN | 0 | Publicly readable |
-| default_value | TEXT | NULL | Default value |
-| updated_at | TEXT | now() | ISO 8601 |
-| updated_by | INTEGER | NULL | User ID who updated |
+| Column        | Type    | Default | Description                                   |
+| ------------- | ------- | ------- | --------------------------------------------- |
+| id            | INTEGER | AUTO    | Primary key                                   |
+| key           | TEXT    | -       | Unique dot-notation (e.g., auth.guest_access) |
+| value         | TEXT    | -       | Setting value                                 |
+| data_type     | TEXT    | -       | boolean, integer, string, json, float         |
+| category      | TEXT    | -       | auth, app, metadata, features, storage, etc   |
+| description   | TEXT    | NULL    | Human-readable description                    |
+| is_public     | BOOLEAN | 0       | Publicly readable                             |
+| default_value | TEXT    | NULL    | Default value                                 |
+| updated_at    | TEXT    | now()   | ISO 8601                                      |
+| updated_by    | INTEGER | NULL    | User ID who updated                           |
 
 **Categories:** auth, app, metadata, features, storage, rate_limit, jobs
 
 **Metadata keys:**
+
 - `metadata.auto_sync_enabled` — Enable automatic metadata sync on startup
 - `metadata.sync_interval_minutes` — Metadata sync interval
 - `metadata.sync_tags` — Include tags in sync
 - `metadata.sync_platforms` — Include platforms in sync
 
-**Note:** Flashpoint edition and version are **not** stored in `system_settings`. They are auto-detected from `version.txt` at startup and held in the backend `config` object. The frontend receives them via the `/api/settings/public` endpoint.
+**Note:** Flashpoint edition and version are **not** stored in
+`system_settings`. They are auto-detected from `version.txt` at startup and held
+in the backend `config` object. The frontend receives them via the
+`/api/settings/public` endpoint.
 
 ### login_attempts
 
 Login attempt tracking for security.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| username | TEXT | - | Username attempted |
-| ip_address | TEXT | - | Client IP |
-| success | BOOLEAN | 0 | Successful attempt |
-| attempted_at | TEXT | now() | ISO 8601 |
+| Column       | Type    | Default | Description        |
+| ------------ | ------- | ------- | ------------------ |
+| id           | INTEGER | AUTO    | Primary key        |
+| username     | TEXT    | -       | Username attempted |
+| ip_address   | TEXT    | -       | Client IP          |
+| success      | BOOLEAN | 0       | Successful attempt |
+| attempted_at | TEXT    | now()   | ISO 8601           |
 
 **Indexes:** username, ip_address, attempted_at
 
@@ -241,34 +248,35 @@ Login attempt tracking for security.
 
 Individual game play sessions.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| user_id | INTEGER | - | Foreign key to users.id |
-| game_id | TEXT | - | Game UUID |
-| game_title | TEXT | NULL | Game title snapshot |
-| started_at | TEXT | now() | ISO 8601 |
-| ended_at | TEXT | NULL | ISO 8601 or NULL (active/abandoned) |
-| duration_seconds | INTEGER | NULL | Session duration |
-| session_id | TEXT | - | Unique UUID |
+| Column           | Type    | Default | Description                         |
+| ---------------- | ------- | ------- | ----------------------------------- |
+| id               | INTEGER | AUTO    | Primary key                         |
+| user_id          | INTEGER | -       | Foreign key to users.id             |
+| game_id          | TEXT    | -       | Game UUID                           |
+| game_title       | TEXT    | NULL    | Game title snapshot                 |
+| started_at       | TEXT    | now()   | ISO 8601                            |
+| ended_at         | TEXT    | NULL    | ISO 8601 or NULL (active/abandoned) |
+| duration_seconds | INTEGER | NULL    | Session duration                    |
+| session_id       | TEXT    | -       | Unique UUID                         |
 
-**Indexes:** user_id, game_id, started_at, session_id
-**Session States:** Active (ended_at NULL, <24h), Completed (ended_at set), Abandoned (ended_at NULL, >=24h)
+**Indexes:** user_id, game_id, started_at, session_id **Session States:** Active
+(ended_at NULL, <24h), Completed (ended_at set), Abandoned (ended_at
+NULL, >=24h)
 
 ### user_game_stats
 
 Aggregated play statistics per user per game.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| user_id | INTEGER | - | Foreign key to users.id |
-| game_id | TEXT | - | Game UUID |
-| game_title | TEXT | NULL | Game title snapshot |
-| total_plays | INTEGER | 0 | Total play sessions |
-| total_playtime_seconds | INTEGER | 0 | Total playtime |
-| first_played_at | TEXT | NULL | First play timestamp |
-| last_played_at | TEXT | NULL | Most recent play timestamp |
+| Column                 | Type    | Default | Description                |
+| ---------------------- | ------- | ------- | -------------------------- |
+| id                     | INTEGER | AUTO    | Primary key                |
+| user_id                | INTEGER | -       | Foreign key to users.id    |
+| game_id                | TEXT    | -       | Game UUID                  |
+| game_title             | TEXT    | NULL    | Game title snapshot        |
+| total_plays            | INTEGER | 0       | Total play sessions        |
+| total_playtime_seconds | INTEGER | 0       | Total playtime             |
+| first_played_at        | TEXT    | NULL    | First play timestamp       |
+| last_played_at         | TEXT    | NULL    | Most recent play timestamp |
 
 **Indexes:** user_id, game_id, total_plays, total_playtime_seconds
 
@@ -276,68 +284,70 @@ Aggregated play statistics per user per game.
 
 Flexible user preference storage (key-value).
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| user_id | INTEGER | - | Foreign key to users.id |
-| setting_key | TEXT | - | Setting key (theme_mode, primary_color, etc) |
-| setting_value | TEXT | - | Setting value |
-| created_at | TEXT | now() | ISO 8601 |
-| updated_at | TEXT | now() | ISO 8601 |
+| Column        | Type    | Default | Description                                  |
+| ------------- | ------- | ------- | -------------------------------------------- |
+| id            | INTEGER | AUTO    | Primary key                                  |
+| user_id       | INTEGER | -       | Foreign key to users.id                      |
+| setting_key   | TEXT    | -       | Setting key (theme_mode, primary_color, etc) |
+| setting_value | TEXT    | -       | Setting value                                |
+| created_at    | TEXT    | now()   | ISO 8601                                     |
+| updated_at    | TEXT    | now()   | ISO 8601                                     |
 
-**Common Settings:** theme_mode (light/dark/system), primary_color, card_size, view_mode, sidebar_collapsed
+**Common Settings:** theme_mode (light/dark/system), primary_color, card_size,
+view_mode, sidebar_collapsed
 
 ### user_playlists
 
 User-created playlists with sharing.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| user_id | INTEGER | - | Foreign key to users.id |
-| title | TEXT | - | Playlist title (1-255 chars) |
-| description | TEXT | NULL | Playlist description |
-| icon | TEXT | NULL | Icon identifier |
-| created_at | TEXT | now() | ISO 8601 |
-| updated_at | TEXT | now() | ISO 8601 |
-| is_public | BOOLEAN | 0 | Publicly visible |
-| game_count | INTEGER | 0 | Game count (auto-updated by trigger) |
-| share_token | TEXT | NULL | Unique share token |
-| share_expires_at | TEXT | NULL | Share link expiration |
-| show_owner | BOOLEAN | 0 | Show owner name when shared |
+| Column           | Type    | Default | Description                          |
+| ---------------- | ------- | ------- | ------------------------------------ |
+| id               | INTEGER | AUTO    | Primary key                          |
+| user_id          | INTEGER | -       | Foreign key to users.id              |
+| title            | TEXT    | -       | Playlist title (1-255 chars)         |
+| description      | TEXT    | NULL    | Playlist description                 |
+| icon             | TEXT    | NULL    | Icon identifier                      |
+| created_at       | TEXT    | now()   | ISO 8601                             |
+| updated_at       | TEXT    | now()   | ISO 8601                             |
+| is_public        | BOOLEAN | 0       | Publicly visible                     |
+| game_count       | INTEGER | 0       | Game count (auto-updated by trigger) |
+| share_token      | TEXT    | NULL    | Unique share token                   |
+| share_expires_at | TEXT    | NULL    | Share link expiration                |
+| show_owner       | BOOLEAN | 0       | Show owner name when shared          |
 
-**Indexes:** user_id, created_at, title, share_token
-**Triggers:** trg_playlist_games_insert, trg_playlist_games_delete (maintain game_count)
+**Indexes:** user_id, created_at, title, share_token **Triggers:**
+trg_playlist_games_insert, trg_playlist_games_delete (maintain game_count)
 
 ### domains
 
 Configured domains for dynamic CORS and sharing.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| hostname | TEXT | - | Domain hostname (UNIQUE, case-insensitive) |
-| is_default | BOOLEAN | 0 | Default domain for sharing (at most one) |
-| created_at | TEXT | now() | ISO 8601 |
-| created_by | INTEGER | NULL | Foreign key to users.id |
+| Column     | Type    | Default | Description                                |
+| ---------- | ------- | ------- | ------------------------------------------ |
+| id         | INTEGER | AUTO    | Primary key                                |
+| hostname   | TEXT    | -       | Domain hostname (UNIQUE, case-insensitive) |
+| is_default | BOOLEAN | 0       | Default domain for sharing (at most one)   |
+| created_at | TEXT    | now()   | ISO 8601                                   |
+| created_by | INTEGER | NULL    | Foreign key to users.id                    |
 
-**Indexes:** idx_domains_hostname on hostname
-**Constraints:** Unique (hostname COLLATE NOCASE), at most one row with is_default=1
-**Migration:** 002_domains.sql
-**Note:** Service layer enforces at most one default domain. CORS origin generation creates both `http://` and `https://` variants per hostname.
+**Indexes:** idx_domains_hostname on hostname **Constraints:** Unique (hostname
+COLLATE NOCASE), at most one row with is_default=1 **Migration:**
+002_domains.sql **Note:** Service layer enforces at most one default domain.
+CORS origin generation creates both `http://` and `https://` variants per
+hostname.
 
 ### user_playlist_games
 
 Games within user playlists (many-to-many).
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| playlist_id | INTEGER | - | Foreign key to user_playlists.id |
-| game_id | TEXT | - | Game UUID |
-| order_index | INTEGER | 0 | Display order |
-| notes | TEXT | NULL | User notes |
-| added_at | TEXT | now() | ISO 8601 |
+| Column      | Type    | Default | Description                      |
+| ----------- | ------- | ------- | -------------------------------- |
+| id          | INTEGER | AUTO    | Primary key                      |
+| playlist_id | INTEGER | -       | Foreign key to user_playlists.id |
+| game_id     | TEXT    | -       | Game UUID                        |
+| order_index | INTEGER | 0       | Display order                    |
+| notes       | TEXT    | NULL    | User notes                       |
+| added_at    | TEXT    | now()   | ISO 8601                         |
 
 **Indexes:** playlist_id, game_id, (playlist_id, order_index)
 
@@ -345,63 +355,66 @@ Games within user playlists (many-to-many).
 
 User favorite games.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| user_id | INTEGER | - | Foreign key to users.id |
-| game_id | TEXT | - | Game UUID |
-| added_at | TEXT | now() | ISO 8601 |
+| Column   | Type    | Default | Description             |
+| -------- | ------- | ------- | ----------------------- |
+| id       | INTEGER | AUTO    | Primary key             |
+| user_id  | INTEGER | -       | Foreign key to users.id |
+| game_id  | TEXT    | -       | Game UUID               |
+| added_at | TEXT    | now()   | ISO 8601                |
 
-**Indexes:** user_id, game_id, added_at
-**Constraint:** Unique (user_id, game_id)
+**Indexes:** user_id, game_id, added_at **Constraint:** Unique (user_id,
+game_id)
 
 ### job_execution_logs
 
 Background job execution tracking.
 
-| Column | Type | Default | Description |
-|--------|------|---------|-------------|
-| id | INTEGER | AUTO | Primary key |
-| job_id | TEXT | - | Unique execution ID |
-| job_name | TEXT | - | Job name (metadata_sync, ruffle_update, etc) |
-| status | TEXT | - | running, success, failed |
-| started_at | TEXT | now() | ISO 8601 |
-| completed_at | TEXT | NULL | ISO 8601 |
-| duration_seconds | INTEGER | NULL | Execution duration |
-| message | TEXT | NULL | Status message |
-| error_details | TEXT | NULL | Error details if failed |
-| triggered_by | TEXT | NULL | scheduler, manual, etc |
+| Column           | Type    | Default | Description                                  |
+| ---------------- | ------- | ------- | -------------------------------------------- |
+| id               | INTEGER | AUTO    | Primary key                                  |
+| job_id           | TEXT    | -       | Unique execution ID                          |
+| job_name         | TEXT    | -       | Job name (metadata_sync, ruffle_update, etc) |
+| status           | TEXT    | -       | running, success, failed                     |
+| started_at       | TEXT    | now()   | ISO 8601                                     |
+| completed_at     | TEXT    | NULL    | ISO 8601                                     |
+| duration_seconds | INTEGER | NULL    | Execution duration                           |
+| message          | TEXT    | NULL    | Status message                               |
+| error_details    | TEXT    | NULL    | Error details if failed                      |
+| triggered_by     | TEXT    | NULL    | scheduler, manual, etc                       |
 
 ---
 
 ## Triggers
 
-**trg_playlist_games_insert** - Increments user_playlists.game_count when game added
-**trg_playlist_games_delete** - Decrements user_playlists.game_count when game removed
+**trg_playlist_games_insert** - Increments user_playlists.game_count when game
+added **trg_playlist_games_delete** - Decrements user_playlists.game_count when
+game removed
 
 ## Performance Indexes
 
 Composite and partial indexes optimized for common queries:
 
-| Index | Table | Purpose |
-|-------|-------|---------|
-| idx_login_attempts_success_time | login_attempts | Failed attempt lookups |
-| idx_user_game_plays_active | user_game_plays | Active sessions (WHERE ended_at IS NULL) |
-| idx_user_game_plays_user_time | user_game_plays | User play history by time |
-| idx_activity_logs_user_time | activity_logs | User activity by time |
-| idx_refresh_tokens_cleanup | refresh_tokens | Expired token cleanup |
-| idx_user_game_stats_plays | user_game_stats | Most played games |
-| idx_user_game_stats_playtime | user_game_stats | Most playtime |
-| idx_user_game_stats_recent | user_game_stats | Recently played games |
+| Index                           | Table           | Purpose                                  |
+| ------------------------------- | --------------- | ---------------------------------------- |
+| idx_login_attempts_success_time | login_attempts  | Failed attempt lookups                   |
+| idx_user_game_plays_active      | user_game_plays | Active sessions (WHERE ended_at IS NULL) |
+| idx_user_game_plays_user_time   | user_game_plays | User play history by time                |
+| idx_activity_logs_user_time     | activity_logs   | User activity by time                    |
+| idx_refresh_tokens_cleanup      | refresh_tokens  | Expired token cleanup                    |
+| idx_user_game_stats_plays       | user_game_stats | Most played games                        |
+| idx_user_game_stats_playtime    | user_game_stats | Most playtime                            |
+| idx_user_game_stats_recent      | user_game_stats | Recently played games                    |
 
 ## Access Patterns
 
 **Flashpoint Database:**
+
 - Never write; use prepared statements for reads
 - Leverage indexes for efficient queries
 - DatabaseService maintains single read-only connection
 
 **User Database:**
+
 - Use transactions for multi-table operations
 - Always use prepared statements to prevent SQL injection
 - UserDatabaseService maintains single read-write connection
diff --git a/docs/12-reference/external-dependencies.md b/docs/12-reference/external-dependencies.md
index 7df814b..534b0aa 100644
--- a/docs/12-reference/external-dependencies.md
+++ b/docs/12-reference/external-dependencies.md
@@ -4,108 +4,112 @@ Reference for all npm packages used across the Flashpoint Web monorepo.
 
 ## Backend Dependencies
 
-| Package | Version | License | Purpose |
-|---------|---------|---------|---------|
-| axios | ^1.13.2 | MIT | HTTP client for external requests |
-| bcrypt | ^6.0.0 | MIT | Password hashing (cost factor: 10) |
-| better-sqlite3 | ^12.6.0 | MIT | Synchronous SQLite database driver |
-| cheerio | ^1.1.2 | MIT | Server-side HTML parsing |
-| compression | ^1.7.4 | MIT | Gzip/deflate response compression |
-| cors | ^2.8.5 | MIT | CORS middleware for Express |
-| dotenv | ^16.4.5 | BSD-2-Clause | Load environment variables from .env |
-| express | ^4.18.3 | MIT | Web framework and routing |
-| express-rate-limit | ^7.1.5 | MIT | Rate limiting middleware (login: 5/15min, API: 100/15min) |
-| helmet | ^7.1.0 | MIT | Security headers (CSP, HSTS, X-Frame-Options) |
-| http-proxy-middleware | ^2.0.6 | MIT | Proxy game file requests to game-service |
-| jsonwebtoken | ^9.0.3 | MIT | JWT implementation (HS256, 1hr expiration) |
-| node-stream-zip | ^1.15.0 | MIT | Stream files from ZIPs without extraction |
+| Package               | Version | License      | Purpose                                                   |
+| --------------------- | ------- | ------------ | --------------------------------------------------------- |
+| axios                 | ^1.13.2 | MIT          | HTTP client for external requests                         |
+| bcrypt                | ^6.0.0  | MIT          | Password hashing (cost factor: 10)                        |
+| better-sqlite3        | ^12.6.0 | MIT          | Synchronous SQLite database driver                        |
+| cheerio               | ^1.1.2  | MIT          | Server-side HTML parsing                                  |
+| compression           | ^1.7.4  | MIT          | Gzip/deflate response compression                         |
+| cors                  | ^2.8.5  | MIT          | CORS middleware for Express                               |
+| dotenv                | ^16.4.5 | BSD-2-Clause | Load environment variables from .env                      |
+| express               | ^4.18.3 | MIT          | Web framework and routing                                 |
+| express-rate-limit    | ^7.1.5  | MIT          | Rate limiting middleware (login: 5/15min, API: 100/15min) |
+| helmet                | ^7.1.0  | MIT          | Security headers (CSP, HSTS, X-Frame-Options)             |
+| http-proxy-middleware | ^2.0.6  | MIT          | Proxy game file requests to game-service                  |
+| jsonwebtoken          | ^9.0.3  | MIT          | JWT implementation (HS256, 1hr expiration)                |
+| node-stream-zip       | ^1.15.0 | MIT          | Stream files from ZIPs without extraction                 |
 
-| winston | ^3.11.0 | MIT | Logging with multiple transports |
-| zod | ^3.22.4 | MIT | TypeScript schema validation |
+| winston | ^3.11.0 | MIT | Logging with multiple transports | | zod | ^3.22.4 |
+MIT | TypeScript schema validation |
 
 ## Frontend Dependencies
 
-| Package | Version | License | Purpose |
-|---------|---------|---------|---------|
-| @hookform/resolvers | ^5.2.2 | MIT | Form validation resolvers for Zod |
-| @radix-ui/react-* | latest | MIT | Accessible UI primitives (dialogs, menus, selects, etc.) |
-| @ruffle-rs/ruffle | ^0.2.0-nightly | MIT/Apache-2.0 | Flash emulator (WebAssembly) |
-| @tanstack/react-query | ^5.28.9 | MIT | Server state caching and syncing |
-| @tanstack/react-table | ^8.21.3 | MIT | Headless data table library |
-| @tanstack/react-virtual | ^3.2.0 | MIT | Virtualization for large lists |
-| axios | ^1.6.8 | MIT | HTTP client with interceptors |
-| class-variance-authority | ^0.7.1 | MIT | Component variant styling |
-| clsx | ^2.1.0 | MIT | Conditional className construction |
-| cmdk | ^1.1.1 | MIT | Command palette interface |
-| date-fns | ^3.6.0 | MIT | Date utilities (formatting, parsing, relative time) |
-| lucide-react | ^0.358.0 | ISC | Icon library |
-| next-themes | ^0.4.6 | MIT | Theme management (dark/light mode, system detection) |
-| react | ^18.3.1 | MIT | UI library with hooks |
-| react-dom | ^18.3.1 | MIT | React DOM rendering |
-| react-hook-form | ^7.71.1 | MIT | Performant form library with validation |
-| react-router-dom | ^6.22.3 | MIT | Client-side routing with nested routes |
-| recharts | ^3.6.0 | MIT | Composable charting library |
-| sonner | ^2.0.7 | MIT | Toast notifications (keyboard dismissal, promises) |
-| tailwind-merge | ^3.4.0 | MIT | Merge Tailwind classes without conflicts |
-| tailwindcss-animate | ^1.0.7 | MIT | Pre-built animations (fade, slide, scale, spin) |
-| zod | ^4.3.5 | MIT | Schema validation |
-| zustand | ^4.5.2 | MIT | Client state management (auth, theme, UI) |
+| Package                  | Version        | License        | Purpose                                                  |
+| ------------------------ | -------------- | -------------- | -------------------------------------------------------- |
+| @hookform/resolvers      | ^5.2.2         | MIT            | Form validation resolvers for Zod                        |
+| @radix-ui/react-\*       | latest         | MIT            | Accessible UI primitives (dialogs, menus, selects, etc.) |
+| @ruffle-rs/ruffle        | ^0.2.0-nightly | MIT/Apache-2.0 | Flash emulator (WebAssembly)                             |
+| @tanstack/react-query    | ^5.28.9        | MIT            | Server state caching and syncing                         |
+| @tanstack/react-table    | ^8.21.3        | MIT            | Headless data table library                              |
+| @tanstack/react-virtual  | ^3.2.0         | MIT            | Virtualization for large lists                           |
+| axios                    | ^1.6.8         | MIT            | HTTP client with interceptors                            |
+| class-variance-authority | ^0.7.1         | MIT            | Component variant styling                                |
+| clsx                     | ^2.1.0         | MIT            | Conditional className construction                       |
+| cmdk                     | ^1.1.1         | MIT            | Command palette interface                                |
+| date-fns                 | ^3.6.0         | MIT            | Date utilities (formatting, parsing, relative time)      |
+| lucide-react             | ^0.358.0       | ISC            | Icon library                                             |
+| next-themes              | ^0.4.6         | MIT            | Theme management (dark/light mode, system detection)     |
+| react                    | ^18.3.1        | MIT            | UI library with hooks                                    |
+| react-dom                | ^18.3.1        | MIT            | React DOM rendering                                      |
+| react-hook-form          | ^7.71.1        | MIT            | Performant form library with validation                  |
+| react-router-dom         | ^6.22.3        | MIT            | Client-side routing with nested routes                   |
+| recharts                 | ^3.6.0         | MIT            | Composable charting library                              |
+| sonner                   | ^2.0.7         | MIT            | Toast notifications (keyboard dismissal, promises)       |
+| tailwind-merge           | ^3.4.0         | MIT            | Merge Tailwind classes without conflicts                 |
+| tailwindcss-animate      | ^1.0.7         | MIT            | Pre-built animations (fade, slide, scale, spin)          |
+| zod                      | ^4.3.5         | MIT            | Schema validation                                        |
+| zustand                  | ^4.5.2         | MIT            | Client state management (auth, theme, UI)                |
 
 ## Game Service Dependencies
 
-| Package | Version | License | Purpose |
-|---------|---------|---------|---------|
-| axios | ^1.6.8 | MIT | HTTP client for CDN fallback requests |
-| cors | ^2.8.5 | MIT | CORS for cross-domain game content |
-| dotenv | ^16.4.5 | BSD-2-Clause | Environment configuration |
-| express | ^4.18.3 | MIT | HTTP servers on ports 22500/22501 |
-| node-stream-zip | ^1.15.0 | MIT | ZIP streaming without extraction |
-| winston | ^3.11.0 | MIT | Logging with transports |
+| Package         | Version | License      | Purpose                               |
+| --------------- | ------- | ------------ | ------------------------------------- |
+| axios           | ^1.6.8  | MIT          | HTTP client for CDN fallback requests |
+| cors            | ^2.8.5  | MIT          | CORS for cross-domain game content    |
+| dotenv          | ^16.4.5 | BSD-2-Clause | Environment configuration             |
+| express         | ^4.18.3 | MIT          | HTTP servers on ports 22500/22501     |
+| node-stream-zip | ^1.15.0 | MIT          | ZIP streaming without extraction      |
+| winston         | ^3.11.0 | MIT          | Logging with transports               |
 
 ## Development Dependencies
 
 ### Backend
-| Package | Purpose |
-|---------|---------|
-| @types/* | TypeScript definitions for bcrypt, better-sqlite3, cors, express, etc. |
-| @typescript-eslint/* | TypeScript linting and ESLint parser |
-| concurrently | Run multiple npm scripts concurrently |
-| eslint | Code quality linting |
-| tsx | TypeScript runner with watch mode |
-| typescript | TypeScript compiler |
-| vitest | Fast unit test framework (Vite-powered, Jest API) |
+
+| Package               | Purpose                                                                |
+| --------------------- | ---------------------------------------------------------------------- |
+| @types/\*             | TypeScript definitions for bcrypt, better-sqlite3, cors, express, etc. |
+| @typescript-eslint/\* | TypeScript linting and ESLint parser                                   |
+| concurrently          | Run multiple npm scripts concurrently                                  |
+| eslint                | Code quality linting                                                   |
+| tsx                   | TypeScript runner with watch mode                                      |
+| typescript            | TypeScript compiler                                                    |
+| vitest                | Fast unit test framework (Vite-powered, Jest API)                      |
 
 ### Frontend
-| Package | Purpose |
-|---------|---------|
-| @types/react | TypeScript definitions for React |
-| @types/react-dom | TypeScript definitions for React DOM |
-| @vitejs/plugin-react | React Fast Refresh and JSX transformation |
-| autoprefixer | CSS vendor prefix injection |
-| postcss | CSS transformation with plugins |
-| shx | Cross-platform shell commands for npm scripts |
-| tailwindcss | Utility-first CSS framework |
-| typescript | TypeScript compiler |
-| vite | Frontend build tool with HMR |
-| vite-plugin-static-copy | Copy static assets to build output |
+
+| Package                 | Purpose                                       |
+| ----------------------- | --------------------------------------------- |
+| @types/react            | TypeScript definitions for React              |
+| @types/react-dom        | TypeScript definitions for React DOM          |
+| @vitejs/plugin-react    | React Fast Refresh and JSX transformation     |
+| autoprefixer            | CSS vendor prefix injection                   |
+| postcss                 | CSS transformation with plugins               |
+| shx                     | Cross-platform shell commands for npm scripts |
+| tailwindcss             | Utility-first CSS framework                   |
+| typescript              | TypeScript compiler                           |
+| vite                    | Frontend build tool with HMR                  |
+| vite-plugin-static-copy | Copy static assets to build output            |
 
 ### Game Service
-| Package | Purpose |
-|---------|---------|
+
+| Package                                  | Purpose                |
+| ---------------------------------------- | ---------------------- |
 | @types/cors, @types/express, @types/node | TypeScript definitions |
-| tsx | TypeScript runner |
-| typescript | TypeScript compiler |
+| tsx                                      | TypeScript runner      |
+| typescript                               | TypeScript compiler    |
 
 ## License Summary
 
-| License | Count | Permissive | Copyleft |
-|---------|-------|-----------|----------|
-| MIT | ~95% | Yes | No |
-| Apache-2.0 | ~3% | Yes | No |
-| ISC | ~1% | Yes | No |
-| BSD-2-Clause | ~1% | Yes | No |
+| License      | Count | Permissive | Copyleft |
+| ------------ | ----- | ---------- | -------- |
+| MIT          | ~95%  | Yes        | No       |
+| Apache-2.0   | ~3%   | Yes        | No       |
+| ISC          | ~1%   | Yes        | No       |
+| BSD-2-Clause | ~1%   | Yes        | No       |
 
-All dependencies use permissive open-source licenses. **No GPL/LGPL/AGPL licenses** are used.
+All dependencies use permissive open-source licenses. **No GPL/LGPL/AGPL
+licenses** are used.
 
 ## Security Audits
 
diff --git a/docs/12-reference/glossary.md b/docs/12-reference/glossary.md
index 7b0be08..5d8c8cf 100644
--- a/docs/12-reference/glossary.md
+++ b/docs/12-reference/glossary.md
@@ -4,155 +4,223 @@ Technical terms and project-specific terminology used throughout Flashpoint Web.
 
 ## Project-Specific Terms
 
-**Flashpoint** - Community-driven preservation project for web games and animations. Primarily Flash content.
+**Flashpoint** - Community-driven preservation project for web games and
+animations. Primarily Flash content.
 
-**Flashpoint Launcher** - Official desktop application for browsing and playing Flashpoint content. Manages flashpoint.sqlite database.
+**Flashpoint Launcher** - Official desktop application for browsing and playing
+Flashpoint content. Manages flashpoint.sqlite database.
 
-**Flashpoint Database** - Read-only SQLite database (flashpoint.sqlite) containing all game metadata. Located at D:/Flashpoint/Data/flashpoint.sqlite.
+**Flashpoint Database** - Read-only SQLite database (flashpoint.sqlite)
+containing all game metadata. Located at D:/Flashpoint/Data/flashpoint.sqlite.
 
-**htdocs** - Directory containing legacy web content and assets for Flash games. Located at D:/Flashpoint/Legacy/htdocs.
+**htdocs** - Directory containing legacy web content and assets for Flash games.
+Located at D:/Flashpoint/Legacy/htdocs.
 
-**Library** - Top-level categorization: "arcade" (games) or "theatre" (animations).
+**Library** - Top-level categorization: "arcade" (games) or "theatre"
+(animations).
 
-**Game Data** - Individual game file entries in game_data table. A single game may have multiple entries.
+**Game Data** - Individual game file entries in game_data table. A single game
+may have multiple entries.
 
-**Present on Disk** - Status indicator: NULL (no data needed), 0 (needs download), 1 (downloaded).
+**Present on Disk** - Status indicator: NULL (no data needed), 0 (needs
+download), 1 (downloaded).
 
-**Archive State** - Game's archival status within Flashpoint (fully preserved vs partially documented).
+**Archive State** - Game's archival status within Flashpoint (fully preserved vs
+partially documented).
 
-**Order Title** - Normalized, lowercase game title for sorting (e.g., "legend of zelda").
+**Order Title** - Normalized, lowercase game title for sorting (e.g., "legend of
+zelda").
 
-**Curation** - Community process of adding, verifying, and preserving games in Flashpoint Archive.
+**Curation** - Community process of adding, verifying, and preserving games in
+Flashpoint Archive.
 
 ## Technical Terms
 
-**JWT (JSON Web Token)** - Compact token format for authentication. Contains header, payload (user claims), and HMAC SHA-256 signature. Access tokens: 1 hour; Refresh tokens: 7 days.
+**JWT (JSON Web Token)** - Compact token format for authentication. Contains
+header, payload (user claims), and HMAC SHA-256 signature. Access tokens: 1
+hour; Refresh tokens: 7 days.
 
-**RBAC (Role-Based Access Control)** - Authorization model where permissions are assigned to roles, users inherit role permissions.
+**RBAC (Role-Based Access Control)** - Authorization model where permissions are
+assigned to roles, users inherit role permissions.
 
-**CORS (Cross-Origin Resource Sharing)** - Browser security mechanism. Backend restricts to frontend origin; game-service allows all origins.
+**CORS (Cross-Origin Resource Sharing)** - Browser security mechanism. Backend
+restricts to frontend origin; game-service allows all origins.
 
-**bcrypt** - Password hashing function based on Blowfish cipher. Cost factor 10 (2^10 = 1024 rounds). Automatically salts and one-way hashes.
+**bcrypt** - Password hashing function based on Blowfish cipher. Cost factor 10
+(2^10 = 1024 rounds). Automatically salts and one-way hashes.
 
-**SQLite** - Serverless SQL database. Flashpoint Web uses two: flashpoint.sqlite (read-only) and user.db (read-write). No separate server required.
+**SQLite** - Serverless SQL database. Flashpoint Web uses two: flashpoint.sqlite
+(read-only) and user.db (read-write). No separate server required.
 
-**Hot-Reload** - Automatic reloading when database files change. DatabaseService uses fs.watchFile() to detect changes from Flashpoint Launcher.
+**Hot-Reload** - Automatic reloading when database files change. DatabaseService
+uses fs.watchFile() to detect changes from Flashpoint Launcher.
 
-**Middleware** - Functions executing during request-response cycle with access to request, response, and next function.
+**Middleware** - Functions executing during request-response cycle with access
+to request, response, and next function.
 
-**Prepared Statements** - Parameterized SQL queries separating structure from data values, preventing SQL injection.
+**Prepared Statements** - Parameterized SQL queries separating structure from
+data values, preventing SQL injection.
 
-**Proxy Server** - Intermediate server forwarding requests with optional modification. Game-service proxies to CDN fallback.
+**Proxy Server** - Intermediate server forwarding requests with optional
+modification. Game-service proxies to CDN fallback.
 
-**MIME Type** - File format identifier for HTTP Content-Type headers (e.g., application/x-shockwave-flash for SWF).
+**MIME Type** - File format identifier for HTTP Content-Type headers (e.g.,
+application/x-shockwave-flash for SWF).
 
-**Rate Limiting** - Request frequency control to prevent abuse. Login: 5/15min, API: 100/15min.
+**Rate Limiting** - Request frequency control to prevent abuse. Login: 5/15min,
+API: 100/15min.
 
 **Singleton** - Design pattern ensuring only one class instance exists globally.
 
 ## Architecture Terms
 
-**Monorepo** - Single repository for multiple projects: backend (Express), frontend (React), game-service (Node.js).
+**Monorepo** - Single repository for multiple projects: backend (Express),
+frontend (React), game-service (Node.js).
 
-**Service Layer Pattern** - Separating business logic into dedicated services, decoupling from HTTP routes.
+**Service Layer Pattern** - Separating business logic into dedicated services,
+decoupling from HTTP routes.
 
-**Separation of Concerns** - Backend (metadata/auth), game-service (file serving), frontend (UI).
+**Separation of Concerns** - Backend (metadata/auth), game-service (file
+serving), frontend (UI).
 
-**API Gateway** - Entry point routing requests and aggregating responses. Backend delegates game files to game-service.
+**API Gateway** - Entry point routing requests and aggregating responses.
+Backend delegates game files to game-service.
 
-**File Watching** - Monitoring filesystem events to trigger actions. DatabaseService watches flashpoint.sqlite for changes.
+**File Watching** - Monitoring filesystem events to trigger actions.
+DatabaseService watches flashpoint.sqlite for changes.
 
-**State Management** - Managing application data over time. Frontend: Zustand (client), React Query (server), React Router (URL).
+**State Management** - Managing application data over time. Frontend: Zustand
+(client), React Query (server), React Router (URL).
 
-**Lazy Loading** - Deferring initialization until needed. React Router lazy-loads route components.
+**Lazy Loading** - Deferring initialization until needed. React Router
+lazy-loads route components.
 
-**Code Splitting** - Dividing code into smaller bundles loaded on demand. Route-based splitting via React.lazy and dynamic imports.
+**Code Splitting** - Dividing code into smaller bundles loaded on demand.
+Route-based splitting via React.lazy and dynamic imports.
 
 ## Database Terms
 
-**Migration** - Versioned database schema changes (backend/src/migrations/). Format: 00X_description.sql. Always idempotent.
+**Migration** - Versioned database schema changes (backend/src/migrations/).
+Format: 00X_description.sql. Always idempotent.
 
-**Foreign Key** - Database constraint linking tables for referential integrity. Can cascade delete, set NULL, or restrict.
+**Foreign Key** - Database constraint linking tables for referential integrity.
+Can cascade delete, set NULL, or restrict.
 
-**Index** - Sorted column copy improving query performance. Trade-off: faster reads vs slower writes.
+**Index** - Sorted column copy improving query performance. Trade-off: faster
+reads vs slower writes.
 
-**Transaction** - Multi-operation unit treated atomically (all or nothing). ACID compliant: Atomicity, Consistency, Isolation, Durability.
+**Transaction** - Multi-operation unit treated atomically (all or nothing). ACID
+compliant: Atomicity, Consistency, Isolation, Durability.
 
-**Schema** - Database structure: tables, columns, data types, constraints, relationships.
+**Schema** - Database structure: tables, columns, data types, constraints,
+relationships.
 
-**Normalization** - Organizing schema to reduce redundancy (1NF, 2NF, 3NF forms).
+**Normalization** - Organizing schema to reduce redundancy (1NF, 2NF, 3NF
+forms).
 
-**Denormalization** - Intentional redundancy for read performance. Example: game.tagsStr denormalizes tags for faster search.
+**Denormalization** - Intentional redundancy for read performance. Example:
+game.tagsStr denormalizes tags for faster search.
 
-**Collation** - String comparison and sorting rules. BINARY (case-sensitive), NOCASE (case-insensitive), RTRIM.
+**Collation** - String comparison and sorting rules. BINARY (case-sensitive),
+NOCASE (case-insensitive), RTRIM.
 
 ## Authentication & Authorization
 
-**Access Token** - Short-lived JWT (1 hour). Sent in Authorization: Bearer header for API requests.
+**Access Token** - Short-lived JWT (1 hour). Sent in Authorization: Bearer
+header for API requests.
 
-**Refresh Token** - Long-lived random hex string (7 days). Used to obtain new access tokens without re-authentication.
+**Refresh Token** - Long-lived random hex string (7 days). Used to obtain new
+access tokens without re-authentication.
 
-**Permission** - Atomic access right (format: resource.action, e.g., games.play, users.create).
+**Permission** - Atomic access right (format: resource.action, e.g., games.play,
+users.create).
 
-**Guest Mode** - Limited access without authentication. Can browse and play but cannot create playlists.
+**Guest Mode** - Limited access without authentication. Can browse and play but
+cannot create playlists.
 
-**Session** - User interaction period tracked by JWT validity. Auth session: JWT lifetime; Play session: individual game session.
+**Session** - User interaction period tracked by JWT validity. Auth session: JWT
+lifetime; Play session: individual game session.
 
 ## Frontend Terms
 
-**SPA (Single-Page Application)** - Web app loading single HTML page with dynamic content updates. Client-side routing, no full reloads.
+**SPA (Single-Page Application)** - Web app loading single HTML page with
+dynamic content updates. Client-side routing, no full reloads.
 
-**HMR (Hot Module Replacement)** - Development feature updating modules in browser without full reload, preserving state.
+**HMR (Hot Module Replacement)** - Development feature updating modules in
+browser without full reload, preserving state.
 
-**React Query** - Server state library handling caching, revalidation, background updates. Stale-while-revalidate pattern.
+**React Query** - Server state library handling caching, revalidation,
+background updates. Stale-while-revalidate pattern.
 
-**Zustand** - Minimalist client state library. Stores: useAuthStore, useThemeStore, useUIStore.
+**Zustand** - Minimalist client state library. Stores: useAuthStore,
+useThemeStore, useUIStore.
 
-**Tailwind CSS** - Utility-first CSS framework with responsive design, dark mode, custom theme.
+**Tailwind CSS** - Utility-first CSS framework with responsive design, dark
+mode, custom theme.
 
-**Radix UI** - Unstyled accessible component primitives (dialogs, dropdowns, selects). Keyboard navigation, screen reader support.
+**Radix UI** - Unstyled accessible component primitives (dialogs, dropdowns,
+selects). Keyboard navigation, screen reader support.
 
-**shadcn/ui** - Reusable components built from Radix UI and Tailwind CSS. Components copied into project, not installed.
+**shadcn/ui** - Reusable components built from Radix UI and Tailwind CSS.
+Components copied into project, not installed.
 
-**Virtualization** - Rendering only visible list items for performance. TanStack Virtual handles thousands of items.
+**Virtualization** - Rendering only visible list items for performance. TanStack
+Virtual handles thousands of items.
 
 ## Game & Emulation Terms
 
-**Flash** - Multimedia platform (1996-2020). Played via Ruffle emulator in browser. File format: SWF.
+**Flash** - Multimedia platform (1996-2020). Played via Ruffle emulator in
+browser. File format: SWF.
 
-**Ruffle** - Flash Player emulator in Rust, compiled to WebAssembly. Supports ActionScript 1, 2, partial 3.
+**Ruffle** - Flash Player emulator in Rust, compiled to WebAssembly. Supports
+ActionScript 1, 2, partial 3.
 
-**SWF (Shockwave Flash)** - Flash file format. Vector graphics, embedded ActionScript, timeline animation. MIME: application/x-shockwave-flash.
+**SWF (Shockwave Flash)** - Flash file format. Vector graphics, embedded
+ActionScript, timeline animation. MIME: application/x-shockwave-flash.
 
-**ActionScript** - Programming language for Flash. Versions: 1 (basic), 2 (OOP), 3 (performance/modern OOP).
+**ActionScript** - Programming language for Flash. Versions: 1 (basic), 2 (OOP),
+3 (performance/modern OOP).
 
-**Shockwave** - Predecessor to Flash by Adobe/Macromedia. File format: DCR. Not currently supported in Flashpoint Web.
+**Shockwave** - Predecessor to Flash by Adobe/Macromedia. File format: DCR. Not
+currently supported in Flashpoint Web.
 
-**HTML5 Games** - Games using standard web tech (HTML, CSS, JavaScript). Canvas, Web Audio, WebGL APIs.
+**HTML5 Games** - Games using standard web tech (HTML, CSS, JavaScript). Canvas,
+Web Audio, WebGL APIs.
 
-**ZIP Mounting** - Serving files directly from ZIP archives without extraction. Saves disk space, reduces I/O.
+**ZIP Mounting** - Serving files directly from ZIP archives without extraction.
+Saves disk space, reduces I/O.
 
-**Scale Mode** - Game content fitting into viewport: showall (letterbox), noborder (crop), exactfit (distort), noscale (original).
+**Scale Mode** - Game content fitting into viewport: showall (letterbox),
+noborder (crop), exactfit (distort), noscale (original).
 
-**Polyfill** - Code implementing browser features not natively supported. Injects compatibility layers into legacy games.
+**Polyfill** - Code implementing browser features not natively supported.
+Injects compatibility layers into legacy games.
 
 ## Development Terms
 
-**TypeScript** - Typed superset of JavaScript. Compile-time type checking, better IDE support, self-documenting code.
+**TypeScript** - Typed superset of JavaScript. Compile-time type checking,
+better IDE support, self-documenting code.
 
-**tsx** - Node.js TypeScript runner. No separate build step, watch mode for development.
+**tsx** - Node.js TypeScript runner. No separate build step, watch mode for
+development.
 
-**Vite** - Modern frontend build tool. Instant server start, lightning-fast HMR, optimized production builds.
+**Vite** - Modern frontend build tool. Instant server start, lightning-fast HMR,
+optimized production builds.
 
-**ESLint** - Linting utility enforcing code quality and style rules across services.
+**ESLint** - Linting utility enforcing code quality and style rules across
+services.
 
-**Docker** - Container platform. docker-compose orchestrates all three services for production.
+**Docker** - Container platform. docker-compose orchestrates all three services
+for production.
 
-**Environment Variables** - Configuration outside code. Each service has .env file loaded via dotenv.
+**Environment Variables** - Configuration outside code. Each service has .env
+file loaded via dotenv.
 
-**ACID** - Database transaction properties: Atomicity (all/nothing), Consistency (valid state), Isolation (no interference), Durability (persists).
+**ACID** - Database transaction properties: Atomicity (all/nothing), Consistency
+(valid state), Isolation (no interference), Durability (persists).
 
-**REST** - Architectural style using HTTP methods (GET, POST, PUT, DELETE) on resource-based URLs with JSON representation.
+**REST** - Architectural style using HTTP methods (GET, POST, PUT, DELETE) on
+resource-based URLs with JSON representation.
 
 ## Related Documentation
 
diff --git a/docs/12-reference/security-measures.md b/docs/12-reference/security-measures.md
index 0883264..43a3b31 100644
--- a/docs/12-reference/security-measures.md
+++ b/docs/12-reference/security-measures.md
@@ -2,7 +2,9 @@
 
 ## Overview
 
-This document catalogs all security measures implemented in the Flashpoint Web application, addressing OWASP Top 10 vulnerabilities and security best practices.
+This document catalogs all security measures implemented in the Flashpoint Web
+application, addressing OWASP Top 10 vulnerabilities and security best
+practices.
 
 ---
 
@@ -19,6 +21,7 @@ This document catalogs all security measures implemented in the Flashpoint Web a
 - ✅ Automatic token cleanup on logout
 
 **Security Features**:
+
 - Secret key from environment variable
 - Token signature verification
 - Expiration validation
@@ -34,10 +37,11 @@ This document catalogs all security measures implemented in the Flashpoint Web a
 - ✅ Permission caching for performance
 
 **Permission System**:
+
 ```typescript
-requirePermission('settings.update')
-requirePermission('users.read')
-requirePermission('games.play')
+requirePermission('settings.update');
+requirePermission('users.read');
+requirePermission('games.play');
 ```
 
 ### Password Security
@@ -61,11 +65,12 @@ requirePermission('games.play')
 const loginLimiter = rateLimit({
   windowMs: 15 * 60 * 1000, // 15 minutes
   max: 5, // 5 attempts per IP
-  skipSuccessfulRequests: false
+  skipSuccessfulRequests: false,
 });
 ```
 
 **Protection Against**:
+
 - Brute force password attacks
 - Credential stuffing
 - Account enumeration
@@ -82,6 +87,7 @@ const registerLimiter = rateLimit({
 ```
 
 **Protection Against**:
+
 - Account creation spam
 - Resource exhaustion
 - Abuse of registration system
@@ -95,22 +101,24 @@ const registerLimiter = rateLimit({
 **Implementation**: Throughout route files
 
 **Examples**:
+
 ```typescript
 // Login validation
 const loginSchema = z.object({
   username: z.string().min(3).max(50),
-  password: z.string().min(6)
+  password: z.string().min(6),
 });
 
 // Registration validation
 const registerSchema = z.object({
   username: z.string().min(3).max(50),
   email: z.string().email(),
-  password: z.string().min(6)
+  password: z.string().min(6),
 });
 ```
 
 **Validation Middleware**: `backend/src/middleware/validation.ts`
+
 - ✅ Centralized validation error handling
 - ✅ Type-safe request validation
 - ✅ Automatic 400 Bad Request responses
@@ -121,20 +129,25 @@ const registerSchema = z.object({
 
 **Centralized Security Utilities**: `game-service/src/utils/pathSecurity.ts`
 
-The game-service now has comprehensive directory traversal protection through centralized validation utilities:
+The game-service now has comprehensive directory traversal protection through
+centralized validation utilities:
 
 **1. Path Sanitization & Validation**:
+
 ```typescript
 sanitizeAndValidatePath(basePath: string, requestPath: string): string
 ```
+
 - Normalizes paths and ensures they stay within allowed directories
 - Platform-aware (Windows/Unix)
 - Blocks: `../`, absolute paths, null bytes, URL-encoded traversal
 
 **2. URL Path Sanitization**:
+
 ```typescript
 sanitizeUrlPath(urlPath: string): string
 ```
+
 - Detects null bytes (`\0`)
 - Blocks URL-encoded directory traversal (`..%2F`, `..%5C`)
 - Blocks backslash path traversal (`..\\`)
@@ -142,18 +155,21 @@ sanitizeUrlPath(urlPath: string): string
 **Implementation Coverage**:
 
 **Legacy Server** (`game-service/src/legacy-server.ts`):
+
 - ✅ URL path sanitization at entry point
 - ✅ Path validation before all file access
 - ✅ Separate validation for htdocs and cgi-bin paths
 
 **GameZip Server** (`game-service/src/gamezipserver.ts`):
+
 - ✅ URL path sanitization in file requests
 - ✅ Mount ID validation (prevents path separators)
 - ✅ ZIP path validation (ensures files within games directory)
 
 **Test Coverage**: 17 tests (all passing) in `pathSecurity.test.ts`
 
-**For detailed information**: See `docs/13-security/directory-traversal-protection.md`
+**For detailed information**: See
+`docs/13-security/directory-traversal-protection.md`
 
 ---
 
@@ -195,6 +211,7 @@ private mountedZips = new LRUCache<string, MountedZip>({
 ```
 
 **Protection**:
+
 - Prevents unlimited ZIP mounts
 - Automatic cleanup of old mounts
 - Resource leak prevention
@@ -208,12 +225,14 @@ private mountedZips = new LRUCache<string, MountedZip>({
 **Implementation**: `backend/src/middleware/activityLogger.ts`
 
 **Tracked Actions**:
+
 - User login/logout
 - Resource creation/updates/deletions
 - Permission changes
 - Failed authentication attempts
 
 **Logged Information**:
+
 - User ID
 - Action type
 - Resource affected
@@ -228,11 +247,17 @@ private mountedZips = new LRUCache<string, MountedZip>({
 function sanitizeBody(body: any): any {
   const sanitized = { ...body };
   const sensitiveFields = [
-    'password', 'currentPassword', 'newPassword',
-    'token', 'refreshToken', 'secret', 'apiKey', 'accessToken'
+    'password',
+    'currentPassword',
+    'newPassword',
+    'token',
+    'refreshToken',
+    'secret',
+    'apiKey',
+    'accessToken',
   ];
 
-  sensitiveFields.forEach(field => {
+  sensitiveFields.forEach((field) => {
     if (sanitized[field]) {
       sanitized[field] = '[REDACTED]';
     }
@@ -255,11 +280,12 @@ function sanitizeBody(body: any): any {
 ```typescript
 cors({
   origin: process.env.DOMAIN || 'http://localhost:5173',
-  credentials: true
-})
+  credentials: true,
+});
 ```
 
 **Security**:
+
 - ✅ Whitelist specific origin only
 - ✅ Credentials allowed for authenticated requests
 - ✅ Protects sensitive API endpoints
@@ -273,6 +299,7 @@ res.setHeader('Access-Control-Allow-Origin', '*');
 ```
 
 **Justification**: See `docs/12-reference/cors-security-decision.md`
+
 - Serves public, read-only game content
 - No sensitive data exposure
 - Supports game embedding use cases
@@ -286,14 +313,13 @@ res.setHeader('Access-Control-Allow-Origin', '*');
 **Implementation**: Throughout `backend/src/services/`
 
 **Example from GameService.ts**:
+
 ```typescript
-const game = DatabaseService.get(
-  'SELECT * FROM game WHERE id = ?',
-  [id]
-);
+const game = DatabaseService.get('SELECT * FROM game WHERE id = ?', [id]);
 ```
 
 **Protection**:
+
 - ✅ All database queries use parameterized statements
 - ✅ No string concatenation in SQL queries
 - ✅ Better-sqlite3 automatic escaping
@@ -307,23 +333,25 @@ const game = DatabaseService.get(
 **Implementation**: `backend/src/middleware/errorHandler.ts`
 
 **Features**:
+
 - ✅ Distinguishes operational vs programmer errors
 - ✅ Generic error messages to clients (prevents information leakage)
 - ✅ Detailed logging for debugging
 - ✅ Sanitized request bodies in logs
 
 **Example**:
+
 ```typescript
 // Unhandled errors
 logger.error('[UnhandledError]', {
   message: err.message,
   stack: err.stack,
-  body: sanitizeBody(req.body) // Sensitive data redacted
+  body: sanitizeBody(req.body), // Sensitive data redacted
 });
 
 // Client receives generic message
 res.status(500).json({
-  error: { message: 'Internal server error' }
+  error: { message: 'Internal server error' },
 });
 ```
 
@@ -334,6 +362,7 @@ res.status(500).json({
 ### XSS Prevention
 
 **React Built-in Protection**:
+
 - ✅ Automatic escaping of JSX expressions
 - ✅ No `dangerouslySetInnerHTML` usage
 - ✅ Content Security Policy headers (if configured)
@@ -345,6 +374,7 @@ res.status(500).json({
 **Location**: localStorage
 
 **Note**: Documented trade-off
+
 - Vulnerable to XSS attacks
 - Acceptable for low-risk application
 - Consider HttpOnly cookies for higher security requirements
@@ -352,6 +382,7 @@ res.status(500).json({
 ### Type Safety
 
 **TypeScript Strict Mode**:
+
 - ✅ No implicit `any` types
 - ✅ Null/undefined checks
 - ✅ Type-safe API calls
@@ -363,6 +394,7 @@ res.status(500).json({
 ### Flashpoint Database
 
 **Access Level**: READ-ONLY
+
 - ✅ No write operations permitted
 - ✅ Separate from user database
 - ✅ File watching for external updates
@@ -370,6 +402,7 @@ res.status(500).json({
 ### User Database
 
 **Security Features**:
+
 - ✅ SQLite with file-level permissions
 - ✅ Schema migrations tracked
 - ✅ Transaction support for data integrity
@@ -382,6 +415,7 @@ res.status(500).json({
 **Implementation**: `backend/src/server.ts:177-200`
 
 **Cleanup on SIGTERM/SIGINT**:
+
 - ✅ Stop scheduled jobs
 - ✅ Stop permission cache cleanup
 - ✅ Stop play session cleanup
@@ -430,5 +464,5 @@ res.status(500).json({
 
 ---
 
-**Last Updated**: 2026-01-29
-**Review Status**: Comprehensive (Enhanced path traversal protection)
+**Last Updated**: 2026-01-29 **Review Status**: Comprehensive (Enhanced path
+traversal protection)
diff --git a/docs/12-reference/type-definitions.md b/docs/12-reference/type-definitions.md
index d1661ac..5a84584 100644
--- a/docs/12-reference/type-definitions.md
+++ b/docs/12-reference/type-definitions.md
@@ -348,10 +348,28 @@ export type ThemeMode = 'light' | 'dark' | 'system';
 
 // Primary colors
 export type PrimaryColor =
-  | 'blue' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
-  | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green'
-  | 'emerald' | 'teal' | 'cyan' | 'sky' | 'indigo' | 'violet'
-  | 'purple' | 'fuchsia' | 'pink' | 'rose';
+  | 'blue'
+  | 'slate'
+  | 'gray'
+  | 'zinc'
+  | 'neutral'
+  | 'stone'
+  | 'red'
+  | 'orange'
+  | 'amber'
+  | 'yellow'
+  | 'lime'
+  | 'green'
+  | 'emerald'
+  | 'teal'
+  | 'cyan'
+  | 'sky'
+  | 'indigo'
+  | 'violet'
+  | 'purple'
+  | 'fuchsia'
+  | 'pink'
+  | 'rose';
 
 // Theme State (Zustand)
 interface ThemeState {
diff --git a/docs/13-security/directory-traversal-protection.md b/docs/13-security/directory-traversal-protection.md
index d830dcb..50238c0 100644
--- a/docs/13-security/directory-traversal-protection.md
+++ b/docs/13-security/directory-traversal-protection.md
@@ -1,23 +1,25 @@
 # Directory Traversal Protection
 
-**Date:** 2026-01-29
-**Status:** Implemented
-**Priority:** Critical
+**Date:** 2026-01-29 **Status:** Implemented **Priority:** Critical
 
 ## Overview
 
-The game-service has been hardened against directory traversal attacks through comprehensive path validation and sanitization utilities.
+The game-service has been hardened against directory traversal attacks through
+comprehensive path validation and sanitization utilities.
 
 ## Problem
 
-Previous implementation allowed potential directory traversal attacks in two areas:
+Previous implementation allowed potential directory traversal attacks in two
+areas:
 
-1. **Legacy Server**: Used `path.join()` and `path.normalize()` but didn't validate resolved paths
+1. **Legacy Server**: Used `path.join()` and `path.normalize()` but didn't
+   validate resolved paths
 2. **GameZip Server**: Had partial validation but lacked URL path sanitization
 
 ## Solution
 
-Implemented centralized path security utilities in `game-service/src/utils/pathSecurity.ts`:
+Implemented centralized path security utilities in
+`game-service/src/utils/pathSecurity.ts`:
 
 ### 1. Path Sanitization and Validation
 
@@ -31,13 +33,14 @@ sanitizeAndValidatePath(basePath: string, requestPath: string): string
 - Throws error if directory traversal detected
 
 **Example:**
+
 ```typescript
 // ✓ SAFE
-sanitizeAndValidatePath('/var/www/htdocs', 'files/game.swf')
+sanitizeAndValidatePath('/var/www/htdocs', 'files/game.swf');
 // Returns: /var/www/htdocs/files/game.swf
 
 // ✗ BLOCKED
-sanitizeAndValidatePath('/var/www/htdocs', '../../../etc/passwd')
+sanitizeAndValidatePath('/var/www/htdocs', '../../../etc/passwd');
 // Throws: Error('Invalid path: Directory traversal detected')
 ```
 
@@ -81,6 +84,7 @@ sanitizeUrlPath(urlPath: string): string
 - All tests passing
 
 **Test Categories:**
+
 1. Valid paths within base directory ✓
 2. Directory traversal with `../` ✓
 3. Directory traversal with absolute paths ✓
@@ -103,15 +107,15 @@ After this implementation:
 
 ## Attack Vectors Blocked
 
-| Attack Type | Example | Status |
-|-------------|---------|--------|
-| Unix path traversal | `../../../etc/passwd` | ✓ Blocked |
+| Attack Type            | Example                            | Status    |
+| ---------------------- | ---------------------------------- | --------- |
+| Unix path traversal    | `../../../etc/passwd`              | ✓ Blocked |
 | Windows path traversal | `..\..\..\windows\system32\config` | ✓ Blocked |
-| URL-encoded Unix | `..%2F..%2F..%2Fetc/passwd` | ✓ Blocked |
-| URL-encoded Windows | `..%5C..%5C..%5Cwindows` | ✓ Blocked |
-| Null byte injection | `file.swf\0.txt` | ✓ Blocked |
-| Absolute path escape | `/etc/passwd` | ✓ Blocked |
-| Mixed traversal | `files/../../etc/passwd` | ✓ Blocked |
+| URL-encoded Unix       | `..%2F..%2F..%2Fetc/passwd`        | ✓ Blocked |
+| URL-encoded Windows    | `..%5C..%5C..%5Cwindows`           | ✓ Blocked |
+| Null byte injection    | `file.swf\0.txt`                   | ✓ Blocked |
+| Absolute path escape   | `/etc/passwd`                      | ✓ Blocked |
+| Mixed traversal        | `files/../../etc/passwd`           | ✓ Blocked |
 
 ## Performance Impact
 
@@ -122,12 +126,14 @@ After this implementation:
 ## Logging
 
 All blocked attempts logged with:
+
 - Original request path
 - Resolved absolute path
 - Base directory being protected
 - Security warning level
 
 **Example log output:**
+
 ```
 [game-service] warn: [Security] Path traversal attempt blocked: ../../../etc/passwd
 [game-service] warn: [Security] Resolved to: D:\etc\passwd
@@ -150,6 +156,7 @@ All blocked attempts logged with:
 
 ## References
 
-- **OWASP**: [Path Traversal](https://owasp.org/www-community/attacks/Path_Traversal)
+- **OWASP**:
+  [Path Traversal](https://owasp.org/www-community/attacks/Path_Traversal)
 - **CWE-22**: Directory Traversal
 - **Phase**: Phase 1 - Security (Critical priority fix)
diff --git a/docs/README.md b/docs/README.md
index e097185..79d71da 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,54 +1,77 @@
 # Flashpoint Web - Technical Documentation
 
-Complete technical documentation for the Flashpoint Web project, a self-hosted web application for browsing and playing games from the Flashpoint Archive.
+Complete technical documentation for the Flashpoint Web project, a self-hosted
+web application for browsing and playing games from the Flashpoint Archive.
 
 ## Documentation Structure
 
 ### 01. Overview
-- [Project Overview](01-overview/project-overview.md) - Introduction and key features
-- [Technology Stack](01-overview/technology-stack.md) - Complete technology stack
+
+- [Project Overview](01-overview/project-overview.md) - Introduction and key
+  features
+- [Technology Stack](01-overview/technology-stack.md) - Complete technology
+  stack
 
 ### 02. Architecture
-- [System Architecture](02-architecture/system-architecture.md) - Complete system design
-- [Service Communication](02-architecture/service-communication.md) - Inter-service communication
-- [Data Flow Diagrams](02-architecture/data-flow-diagrams.md) - Request/response flows
-- [Authentication Flow](02-architecture/authentication-flow.md) - Authentication and authorization
+
+- [System Architecture](02-architecture/system-architecture.md) - Complete
+  system design
+- [Service Communication](02-architecture/service-communication.md) -
+  Inter-service communication
+- [Data Flow Diagrams](02-architecture/data-flow-diagrams.md) - Request/response
+  flows
+- [Authentication Flow](02-architecture/authentication-flow.md) - Authentication
+  and authorization
 - [Game Launch Flow](02-architecture/game-launch-flow.md) - Game playing process
 - [Play Tracking Flow](02-architecture/play-tracking-flow.md) - Session tracking
 
 ### 03. Backend Service
+
 - [Backend Overview](03-backend/README.md) - Backend service introduction
 - [Architecture](03-backend/architecture.md) - Backend architecture patterns
 - [Configuration](03-backend/configuration.md) - Environment variables
 - **Services**:
-  - [Database Service](03-backend/services/database-service.md) - Flashpoint database management
-  - [User Database Service](03-backend/services/user-database-service.md) - User database management
-  - [Permission Cache Service](03-backend/services/permission-cache-service.md) - Permission caching
+  - [Database Service](03-backend/services/database-service.md) - Flashpoint
+    database management
+  - [User Database Service](03-backend/services/user-database-service.md) - User
+    database management
+  - [Permission Cache Service](03-backend/services/permission-cache-service.md) -
+    Permission caching
 - **Database**:
   - [Schema](03-backend/database/schema.md) - Complete database schema
 
 ### 04. Frontend Application
+
 - [Frontend Overview](04-frontend/README.md) - Frontend application introduction
 - [Architecture](04-frontend/architecture.md) - Frontend architecture patterns
 - **Components**:
-  - [Component Overview](04-frontend/components/component-overview.md) - Component organization
-  - [Layout Components](04-frontend/components/layout-components.md) - AppShell, Header, Sidebar
-  - [Game Components](04-frontend/components/game-components.md) - Game browsing components
-  - [Player Components](04-frontend/components/player-components.md) - Game players
-  - [Auth Components](04-frontend/components/auth-components.md) - Authentication UI
+  - [Component Overview](04-frontend/components/component-overview.md) -
+    Component organization
+  - [Layout Components](04-frontend/components/layout-components.md) - AppShell,
+    Header, Sidebar
+  - [Game Components](04-frontend/components/game-components.md) - Game browsing
+    components
+  - [Player Components](04-frontend/components/player-components.md) - Game
+    players
+  - [Auth Components](04-frontend/components/auth-components.md) -
+    Authentication UI
   - [UI Components](04-frontend/components/ui-components.md) - Shadcn UI library
 - [Views & Routing](04-frontend/views-routing.md) - All views and routes
 - **State Management**:
-  - [Zustand Stores](04-frontend/state-management/zustand-stores.md) - Client state
+  - [Zustand Stores](04-frontend/state-management/zustand-stores.md) - Client
+    state
   - [React Query](04-frontend/state-management/react-query.md) - Server state
   - [URL State](04-frontend/state-management/url-state.md) - URL-based filters
 - [Custom Hooks](04-frontend/custom-hooks.md) - All custom hooks
 - [API Client](04-frontend/api-client.md) - Axios client integration
 - **Player Implementation**:
-  - [Ruffle Player](04-frontend/player-implementation/ruffle-player.md) - Flash games
-  - [HTML5 Player](04-frontend/player-implementation/html5-player.md) - HTML5 games
+  - [Ruffle Player](04-frontend/player-implementation/ruffle-player.md) - Flash
+    games
+  - [HTML5 Player](04-frontend/player-implementation/html5-player.md) - HTML5
+    games
 
 ### 05. Game Service
+
 - [Game Service Overview](05-game-service/README.md) - Game service introduction
 - [Architecture](05-game-service/architecture.md) - Dual-server design
 - [Proxy Server](05-game-service/proxy-server.md) - HTTP proxy (port 22500)
@@ -60,22 +83,28 @@ Complete technical documentation for the Flashpoint Web project, a self-hosted w
 - [Configuration](05-game-service/configuration.md) - Environment variables
 
 ### 06. API Reference
+
 - [API Overview](06-api-reference/README.md) - API documentation index
 - [Authentication API](06-api-reference/authentication-api.md) - Auth endpoints
 - [Games API](06-api-reference/games-api.md) - Game endpoints
 - [Users API](06-api-reference/users-api.md) - User management
 - [Roles API](06-api-reference/roles-api.md) - Role & permission endpoints
 - [Playlists API](06-api-reference/playlists-api.md) - Playlist management
-- [Play Tracking API](06-api-reference/play-tracking-api.md) - Play session endpoints
-- [Platforms & Tags API](06-api-reference/platforms-tags-api.md) - Filter endpoints
+- [Play Tracking API](06-api-reference/play-tracking-api.md) - Play session
+  endpoints
+- [Platforms & Tags API](06-api-reference/platforms-tags-api.md) - Filter
+  endpoints
 - [Favorites API](06-api-reference/favorites-api.md) - Favorite games management
 - [Activities API](06-api-reference/activities-api.md) - Activity logging
 - [Admin API](06-api-reference/admin-api.md) - Admin endpoints
-- [Shared Playlists API](06-api-reference/shared-playlists-api.md) - Playlist sharing
+- [Shared Playlists API](06-api-reference/shared-playlists-api.md) - Playlist
+  sharing
 - [Settings API](06-api-reference/settings-api.md) - System settings
 
 ### 07. Design System
-- [Design System Overview](07-design-system/README.md) - Design system introduction
+
+- [Design System Overview](07-design-system/README.md) - Design system
+  introduction
 - [Theme System](07-design-system/theme-system.md) - Theme modes and colors
 - [Color Palette](07-design-system/color-palette.md) - All 22 colors
 - [Typography](07-design-system/typography.md) - Font sizes and weights
@@ -86,6 +115,7 @@ Complete technical documentation for the Flashpoint Web project, a self-hosted w
 - [Design Patterns](07-design-system/design-patterns.md) - UI patterns
 
 ### 08. Development
+
 - [Setup Guide](08-development/setup-guide.md) - Complete development setup
 - [Commands](08-development/commands.md) - All npm commands
 - [Project Structure](08-development/project-structure.md) - Directory structure
@@ -95,35 +125,50 @@ Complete technical documentation for the Flashpoint Web project, a self-hosted w
 - [Common Pitfalls](08-development/common-pitfalls.md) - Known issues
 
 ### 09. Deployment
+
 - [Deployment Overview](09-deployment/README.md) - Deployment documentation
 - [Docker Deployment](09-deployment/docker-deployment.md) - Docker Compose setup
 - [Environment Variables](09-deployment/environment-variables.md) - All env vars
 - [Health Checks](09-deployment/health-checks.md) - Health check endpoints
-- [Security Considerations](09-deployment/security-considerations.md) - Security best practices
+- [Security Considerations](09-deployment/security-considerations.md) - Security
+  best practices
 
 ### 10. Features
-- [Authentication & Authorization](10-features/01-authentication-authorization.md) - Complete auth system
-- [Game Browsing & Filtering](10-features/02-game-browsing-filtering.md) - Search and filters
+
+- [Authentication & Authorization](10-features/01-authentication-authorization.md) -
+  Complete auth system
+- [Game Browsing & Filtering](10-features/02-game-browsing-filtering.md) -
+  Search and filters
 - [Game Playing](10-features/03-game-playing.md) - Playing Flash/HTML5 games
-- [Play Session Tracking](10-features/04-play-session-tracking.md) - Play tracking
-- [Playlists & Favorites](10-features/05-playlists-favorites.md) - Playlist management
+- [Play Session Tracking](10-features/04-play-session-tracking.md) - Play
+  tracking
+- [Playlists & Favorites](10-features/05-playlists-favorites.md) - Playlist
+  management
 - [User Management](10-features/06-user-management.md) - User administration
 - [Role & Permissions](10-features/07-role-permissions.md) - RBAC system
 - [Activity Logging](10-features/08-activity-logging.md) - Audit logging
 - [System Settings](10-features/09-system-settings.md) - System configuration
-- [Date/Time Formatting](10-features/10-date-time-formatting.md) - Date display formatting
+- [Date/Time Formatting](10-features/10-date-time-formatting.md) - Date display
+  formatting
 
 ### 11. Diagrams
+
 - [Diagrams Overview](11-diagrams/README.md) - Visualization and flows
 
 ### 12. Reference
-- [Database Schema Reference](12-reference/database-schema-reference.md) - Complete schema
+
+- [Database Schema Reference](12-reference/database-schema-reference.md) -
+  Complete schema
 - [Type Definitions](12-reference/type-definitions.md) - All TypeScript types
 - [Glossary](12-reference/glossary.md) - Terms and definitions
-- [External Dependencies](12-reference/external-dependencies.md) - Third-party libraries
+- [External Dependencies](12-reference/external-dependencies.md) - Third-party
+  libraries
 - [Security Measures](12-reference/security-measures.md) - Security overview
-- [CORS Security Decision](12-reference/cors-security-decision.md) - CORS policy rationale
+- [CORS Security Decision](12-reference/cors-security-decision.md) - CORS policy
+  rationale
 - [Database Indexes](12-reference/database-indexes.md) - Index optimization
 
 ### 13. Security
-- [Directory Traversal Protection](13-security/directory-traversal-protection.md) - Path security
+
+- [Directory Traversal Protection](13-security/directory-traversal-protection.md) -
+  Path security
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 60119c8..0a5f52a 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -8,16 +8,15 @@
     }
   },
   "plugins": ["@typescript-eslint", "react-hooks", "react-refresh"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
   "rules": {
-    "@typescript-eslint/no-unused-vars": ["error", {
-      "argsIgnorePattern": "^_",
-      "varsIgnorePattern": "^_"
-    }],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index 2e7af2b..2aa7205 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/frontend/scripts/check-bundle-size.js b/frontend/scripts/check-bundle-size.js
deleted file mode 100644
index d85bf1c..0000000
--- a/frontend/scripts/check-bundle-size.js
+++ /dev/null
@@ -1,212 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Performance Budget Checker
- *
- * Analyzes build output and compares against performance budgets
- * Fails CI if budgets are exceeded
- *
- * Usage: node scripts/check-bundle-size.js
- */
-
-const fs = require('fs');
-const path = require('path');
-
-const DIST_DIR = path.join(__dirname, '../dist');
-const BUDGET_FILE = path.join(__dirname, '../performance-budget.json');
-
-// ANSI color codes
-const colors = {
-  reset: '\x1b[0m',
-  red: '\x1b[31m',
-  yellow: '\x1b[33m',
-  green: '\x1b[32m',
-  blue: '\x1b[36m',
-  bold: '\x1b[1m'
-};
-
-/**
- * Format bytes to KB
- */
-function formatKB(bytes) {
-  return Math.round(bytes / 1024);
-}
-
-/**
- * Get all files in directory recursively
- */
-function getAllFiles(dir, fileList = []) {
-  const files = fs.readdirSync(dir);
-
-  files.forEach(file => {
-    const filePath = path.join(dir, file);
-    const stat = fs.statSync(filePath);
-
-    if (stat.isDirectory()) {
-      getAllFiles(filePath, fileList);
-    } else {
-      fileList.push({
-        path: filePath,
-        name: file,
-        size: stat.size,
-        relativePath: path.relative(DIST_DIR, filePath)
-      });
-    }
-  });
-
-  return fileList;
-}
-
-/**
- * Analyze build output
- */
-function analyzeBuild() {
-  if (!fs.existsSync(DIST_DIR)) {
-    console.error(`${colors.red}Error: ${colors.reset}dist/ directory not found. Run 'npm run build' first.`);
-    process.exit(1);
-  }
-
-  const allFiles = getAllFiles(DIST_DIR);
-
-  // Categorize files
-  const jsFiles = allFiles.filter(f => f.name.endsWith('.js'));
-  const cssFiles = allFiles.filter(f => f.name.endsWith('.css'));
-  const assetFiles = allFiles.filter(f => !f.name.endsWith('.html'));
-
-  // Find initial bundle (index-*.js)
-  const initialBundle = jsFiles.find(f => f.name.match(/index-[a-f0-9]+\.js$/));
-
-  // Calculate sizes
-  const totalJSSize = jsFiles.reduce((sum, f) => sum + f.size, 0);
-  const totalCSSSize = cssFiles.reduce((sum, f) => sum + f.size, 0);
-  const totalAssetSize = assetFiles.reduce((sum, f) => sum + f.size, 0);
-  const largestChunk = jsFiles.sort((a, b) => b.size - a.size)[0];
-
-  return {
-    initialBundle: initialBundle ? formatKB(initialBundle.size) : 0,
-    totalJavaScript: formatKB(totalJSSize),
-    totalCSS: formatKB(totalCSSSize),
-    totalAssets: formatKB(totalAssetSize),
-    largestChunk: largestChunk ? formatKB(largestChunk.size) : 0,
-    largestChunkName: largestChunk ? largestChunk.name : 'N/A',
-    chunkCount: jsFiles.length,
-    files: {
-      js: jsFiles,
-      css: cssFiles,
-      total: assetFiles
-    }
-  };
-}
-
-/**
- * Check budget compliance
- */
-function checkBudget() {
-  const budget = JSON.parse(fs.readFileSync(BUDGET_FILE, 'utf8'));
-  const analysis = analyzeBuild();
-
-  console.log(`\n${colors.bold}${colors.blue}=== Performance Budget Check ===${colors.reset}\n`);
-
-  const checks = [
-    {
-      name: 'Initial Bundle',
-      actual: analysis.initialBundle,
-      budget: budget.budgets.initialBundle,
-      description: budget.budgets.initialBundle.description
-    },
-    {
-      name: 'Total JavaScript',
-      actual: analysis.totalJavaScript,
-      budget: budget.budgets.totalJavaScript,
-      description: budget.budgets.totalJavaScript.description
-    },
-    {
-      name: 'Total Assets',
-      actual: analysis.totalAssets,
-      budget: budget.budgets.totalAssets,
-      description: budget.budgets.totalAssets.description
-    },
-    {
-      name: 'Largest Chunk',
-      actual: analysis.largestChunk,
-      budget: budget.budgets.chunkSize,
-      description: `${budget.budgets.chunkSize.description} (${analysis.largestChunkName})`
-    },
-    {
-      name: 'Total CSS',
-      actual: analysis.totalCSS,
-      budget: budget.budgets.cssSize,
-      description: budget.budgets.cssSize.description
-    }
-  ];
-
-  let hasErrors = false;
-  let hasWarnings = false;
-
-  checks.forEach(check => {
-    const { name, actual, budget, description } = check;
-    const status = actual > budget.max ? 'FAIL' : actual > budget.warning ? 'WARN' : 'PASS';
-
-    let statusColor = colors.green;
-    let statusSymbol = '✓';
-
-    if (status === 'FAIL') {
-      statusColor = colors.red;
-      statusSymbol = '✗';
-      hasErrors = true;
-    } else if (status === 'WARN') {
-      statusColor = colors.yellow;
-      statusSymbol = '⚠';
-      hasWarnings = true;
-    }
-
-    const percentage = Math.round((actual / budget.max) * 100);
-    const budgetInfo = `${budget.warning}KB (warn) / ${budget.max}KB (max)`;
-
-    console.log(`${statusColor}${statusSymbol} ${name}${colors.reset}`);
-    console.log(`  ${description}`);
-    console.log(`  Actual: ${colors.bold}${actual}KB${colors.reset} | Budget: ${budgetInfo} | ${percentage}%`);
-    console.log('');
-  });
-
-  // Summary
-  console.log(`${colors.bold}=== Summary ===${colors.reset}\n`);
-  console.log(`Total Chunks: ${analysis.chunkCount}`);
-  console.log(`Total JS: ${analysis.totalJavaScript}KB`);
-  console.log(`Total CSS: ${analysis.totalCSS}KB`);
-  console.log(`Total Assets: ${analysis.totalAssets}KB\n`);
-
-  // Top 5 largest chunks
-  console.log(`${colors.bold}Top 5 Largest Chunks:${colors.reset}\n`);
-  analysis.files.js
-    .sort((a, b) => b.size - a.size)
-    .slice(0, 5)
-    .forEach((file, index) => {
-      console.log(`${index + 1}. ${file.name} - ${formatKB(file.size)}KB`);
-    });
-
-  console.log('');
-
-  // Exit code
-  if (hasErrors) {
-    console.log(`${colors.red}${colors.bold}✗ Budget check FAILED${colors.reset}`);
-    console.log(`${colors.red}One or more budgets exceeded maximum limits.${colors.reset}\n`);
-    process.exit(1);
-  } else if (hasWarnings) {
-    console.log(`${colors.yellow}${colors.bold}⚠ Budget check passed with WARNINGS${colors.reset}`);
-    console.log(`${colors.yellow}Consider optimizing to stay within warning thresholds.${colors.reset}\n`);
-    process.exit(0);
-  } else {
-    console.log(`${colors.green}${colors.bold}✓ Budget check PASSED${colors.reset}`);
-    console.log(`${colors.green}All budgets within limits.${colors.reset}\n`);
-    process.exit(0);
-  }
-}
-
-// Run check
-try {
-  checkBudget();
-} catch (error) {
-  console.error(`${colors.red}Error:${colors.reset}`, error.message);
-  process.exit(1);
-}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1075f1b..25bb7b0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -24,34 +24,68 @@ import { TooltipProvider } from '@/components/ui/tooltip';
 
 // Lazy load views for optimal bundle splitting
 // Auth views
-const LoginView = lazy(() => import('./views/LoginView').then(m => ({ default: m.LoginView })));
-const RegisterView = lazy(() => import('./views/RegisterView').then(m => ({ default: m.RegisterView })));
-const InitialSetupView = lazy(() => import('./views/InitialSetupView').then(m => ({ default: m.InitialSetupView })));
+const LoginView = lazy(() => import('./views/LoginView').then((m) => ({ default: m.LoginView })));
+const RegisterView = lazy(() =>
+  import('./views/RegisterView').then((m) => ({ default: m.RegisterView }))
+);
+const InitialSetupView = lazy(() =>
+  import('./views/InitialSetupView').then((m) => ({ default: m.InitialSetupView }))
+);
 
 // Game browsing views
-const HomeView = lazy(() => import('./views/HomeView').then(m => ({ default: m.HomeView })));
-const BrowseView = lazy(() => import('./views/BrowseView').then(m => ({ default: m.BrowseView })));
-const FlashGamesView = lazy(() => import('./views/FlashGamesView').then(m => ({ default: m.FlashGamesView })));
-const HTML5GamesView = lazy(() => import('./views/HTML5GamesView').then(m => ({ default: m.HTML5GamesView })));
-const AnimationsView = lazy(() => import('./views/AnimationsView').then(m => ({ default: m.AnimationsView })));
-const GameDetailView = lazy(() => import('./views/GameDetailView').then(m => ({ default: m.GameDetailView })));
-const GamePlayerView = lazy(() => import('./views/GamePlayerView').then(m => ({ default: m.GamePlayerView })));
+const HomeView = lazy(() => import('./views/HomeView').then((m) => ({ default: m.HomeView })));
+const BrowseView = lazy(() =>
+  import('./views/BrowseView').then((m) => ({ default: m.BrowseView }))
+);
+const FlashGamesView = lazy(() =>
+  import('./views/FlashGamesView').then((m) => ({ default: m.FlashGamesView }))
+);
+const HTML5GamesView = lazy(() =>
+  import('./views/HTML5GamesView').then((m) => ({ default: m.HTML5GamesView }))
+);
+const AnimationsView = lazy(() =>
+  import('./views/AnimationsView').then((m) => ({ default: m.AnimationsView }))
+);
+const GameDetailView = lazy(() =>
+  import('./views/GameDetailView').then((m) => ({ default: m.GameDetailView }))
+);
+const GamePlayerView = lazy(() =>
+  import('./views/GamePlayerView').then((m) => ({ default: m.GamePlayerView }))
+);
 
 // User feature views
-const FavoritesView = lazy(() => import('./views/FavoritesView').then(m => ({ default: m.FavoritesView })));
-const DashboardView = lazy(() => import('./views/DashboardView').then(m => ({ default: m.DashboardView })));
-const PlaylistsView = lazy(() => import('./views/PlaylistsView').then(m => ({ default: m.PlaylistsView })));
-const PlaylistDetailView = lazy(() => import('./views/PlaylistDetailView').then(m => ({ default: m.PlaylistDetailView })));
-const UserPlaylistsView = lazy(() => import('./views/UserPlaylistsView').then(m => ({ default: m.UserPlaylistsView })));
-const UserPlaylistDetailView = lazy(() => import('./views/UserPlaylistDetailView').then(m => ({ default: m.UserPlaylistDetailView })));
-const SharedPlaylistView = lazy(() => import('./views/SharedPlaylistView').then(m => ({ default: m.SharedPlaylistView })));
+const FavoritesView = lazy(() =>
+  import('./views/FavoritesView').then((m) => ({ default: m.FavoritesView }))
+);
+const DashboardView = lazy(() =>
+  import('./views/DashboardView').then((m) => ({ default: m.DashboardView }))
+);
+const PlaylistsView = lazy(() =>
+  import('./views/PlaylistsView').then((m) => ({ default: m.PlaylistsView }))
+);
+const PlaylistDetailView = lazy(() =>
+  import('./views/PlaylistDetailView').then((m) => ({ default: m.PlaylistDetailView }))
+);
+const UserPlaylistsView = lazy(() =>
+  import('./views/UserPlaylistsView').then((m) => ({ default: m.UserPlaylistsView }))
+);
+const UserPlaylistDetailView = lazy(() =>
+  import('./views/UserPlaylistDetailView').then((m) => ({ default: m.UserPlaylistDetailView }))
+);
+const SharedPlaylistView = lazy(() =>
+  import('./views/SharedPlaylistView').then((m) => ({ default: m.SharedPlaylistView }))
+);
 
 // Admin views
-const SettingsView = lazy(() => import('./views/SettingsView').then(m => ({ default: m.SettingsView })));
-const JobsView = lazy(() => import('./views/JobsView').then(m => ({ default: m.JobsView })));
-const UsersView = lazy(() => import('./views/UsersView').then(m => ({ default: m.UsersView })));
-const RolesView = lazy(() => import('./views/RolesView').then(m => ({ default: m.RolesView })));
-const ActivitiesView = lazy(() => import('./views/ActivitiesView').then(m => ({ default: m.ActivitiesView })));
+const SettingsView = lazy(() =>
+  import('./views/SettingsView').then((m) => ({ default: m.SettingsView }))
+);
+const JobsView = lazy(() => import('./views/JobsView').then((m) => ({ default: m.JobsView })));
+const UsersView = lazy(() => import('./views/UsersView').then((m) => ({ default: m.UsersView })));
+const RolesView = lazy(() => import('./views/RolesView').then((m) => ({ default: m.RolesView })));
+const ActivitiesView = lazy(() =>
+  import('./views/ActivitiesView').then((m) => ({ default: m.ActivitiesView }))
+);
 
 function App() {
   const { isAuthenticated, isGuest, clearAuth, setGuestMode } = useAuthStore();
@@ -64,7 +98,7 @@ function App() {
     queryKey: ['setupStatus'],
     queryFn: () => authApi.getSetupStatus(),
     refetchOnWindowFocus: false,
-    staleTime: 60000 // Cache for 1 minute
+    staleTime: 60000, // Cache for 1 minute
   });
 
   // Check if guest access is enabled when user is in guest mode
@@ -72,7 +106,7 @@ function App() {
     queryKey: ['authSettings'],
     queryFn: () => authSettingsApi.get(),
     enabled: isGuest,
-    refetchInterval: isGuest ? 30000 : false // Refetch every 30 seconds if guest
+    refetchInterval: isGuest ? 30000 : false, // Refetch every 30 seconds if guest
   });
 
   // Handle initial setup redirects
@@ -92,7 +126,10 @@ function App() {
   // This allows them to view/play games from shared playlists even if guest access is OFF
   // Exclude auth pages (login, register, setup) from automatic guest initialization
   useEffect(() => {
-    const isAuthPage = location.pathname === '/login' || location.pathname === '/register' || location.pathname === '/setup';
+    const isAuthPage =
+      location.pathname === '/login' ||
+      location.pathname === '/register' ||
+      location.pathname === '/setup';
 
     if (isAuthPage && isGuest && !isAuthenticated) {
       // Clear guest mode when navigating to auth pages
@@ -125,7 +162,13 @@ function App() {
     // Allow game pages with shareToken (coming from shared playlists)
     const isGamePageWithShareToken = pathname.startsWith('/games/') && hasShareToken;
 
-    if (isGuest && authSettings && !authSettings.guestAccessEnabled && !isSharedPlaylistPath && !isGamePageWithShareToken) {
+    if (
+      isGuest &&
+      authSettings &&
+      !authSettings.guestAccessEnabled &&
+      !isSharedPlaylistPath &&
+      !isGamePageWithShareToken
+    ) {
       clearAuth();
       navigate('/login', { replace: true });
     }
@@ -140,47 +183,65 @@ function App() {
         <Routes>
           {/* ==================== PUBLIC LAYOUT ==================== */}
           <Route element={<PublicLayout background={<ParticleNetworkBackground />} />}>
-            <Route path="/login" element={
-              <Suspense fallback={<RouteLoadingFallback />}>
-                <LoginView />
-              </Suspense>
-            } />
-            <Route path="/setup" element={
-              <Suspense fallback={<RouteLoadingFallback />}>
-                <InitialSetupView />
-              </Suspense>
-            } />
+            <Route
+              path="/login"
+              element={
+                <Suspense fallback={<RouteLoadingFallback />}>
+                  <LoginView />
+                </Suspense>
+              }
+            />
+            <Route
+              path="/setup"
+              element={
+                <Suspense fallback={<RouteLoadingFallback />}>
+                  <InitialSetupView />
+                </Suspense>
+              }
+            />
           </Route>
 
           <Route element={<PublicLayout background={<ParticleNetworkBackground />} />}>
-            <Route path="/register" element={
-              <Suspense fallback={<RouteLoadingFallback />}>
-                <RegisterView />
-              </Suspense>
-            } />
+            <Route
+              path="/register"
+              element={
+                <Suspense fallback={<RouteLoadingFallback />}>
+                  <RegisterView />
+                </Suspense>
+              }
+            />
           </Route>
 
           {/* ==================== SHARED LAYOUT ==================== */}
           <Route element={<SharedLayout />}>
-            <Route path="/playlists/shared/:shareToken" element={
-              <Suspense fallback={<RouteLoadingFallback />}>
-                <SharedPlaylistView />
-              </Suspense>
-            } />
-            <Route path="/games/:id/shared" element={
-              <ProtectedRoute requireAuth={false} allowSharedAccess={true}>
+            <Route
+              path="/playlists/shared/:shareToken"
+              element={
                 <Suspense fallback={<RouteLoadingFallback />}>
-                  <GameDetailView />
+                  <SharedPlaylistView />
                 </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/games/:id/play-shared" element={
-              <ProtectedRoute requirePermission="games.play" allowSharedAccess={true}>
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <GamePlayerView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
+              }
+            />
+            <Route
+              path="/games/:id/shared"
+              element={
+                <ProtectedRoute requireAuth={false} allowSharedAccess={true}>
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <GameDetailView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/games/:id/play-shared"
+              element={
+                <ProtectedRoute requirePermission="games.play" allowSharedAccess={true}>
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <GamePlayerView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
           </Route>
 
           {/* ==================== ERROR LAYOUT ==================== */}
@@ -204,144 +265,201 @@ function App() {
 
           {/* ==================== MAIN LAYOUT ==================== */}
           <Route element={<MainLayout />}>
-            <Route path="/" element={
-              <ProtectedRoute requireAuth={false}>
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <HomeView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
+            <Route
+              path="/"
+              element={
+                <ProtectedRoute requireAuth={false}>
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <HomeView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
 
             {/* Public/guest accessible routes */}
-            <Route path="/flash-games" element={
-              <ProtectedRoute requireAuth={false}>
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <FlashGamesView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/html5-games" element={
-              <ProtectedRoute requireAuth={false}>
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <HTML5GamesView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/browse" element={
-              <ProtectedRoute requireAuth={false}>
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <BrowseView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/animations" element={
-              <ProtectedRoute requireAuth={false}>
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <AnimationsView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/games/:id" element={
-              <ProtectedRoute requireAuth={false} allowSharedAccess={true}>
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <GameDetailView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
+            <Route
+              path="/flash-games"
+              element={
+                <ProtectedRoute requireAuth={false}>
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <FlashGamesView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/html5-games"
+              element={
+                <ProtectedRoute requireAuth={false}>
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <HTML5GamesView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/browse"
+              element={
+                <ProtectedRoute requireAuth={false}>
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <BrowseView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/animations"
+              element={
+                <ProtectedRoute requireAuth={false}>
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <AnimationsView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/games/:id"
+              element={
+                <ProtectedRoute requireAuth={false} allowSharedAccess={true}>
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <GameDetailView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
 
             {/* Game player - normal authenticated access */}
-            <Route path="/games/:id/play" element={
-              <ProtectedRoute requirePermission="games.play">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <GamePlayerView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
+            <Route
+              path="/games/:id/play"
+              element={
+                <ProtectedRoute requirePermission="games.play">
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <GamePlayerView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
 
             {/* Protected routes - require authentication */}
-            <Route path="/dashboard" element={
-              <ProtectedRoute requireFeature="enableStatistics">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <DashboardView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/favorites" element={
-              <ProtectedRoute requireFeature="enableFavorites">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <FavoritesView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/playlists" element={
-              <ProtectedRoute requireFeature="enablePlaylists">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <UserPlaylistsView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/playlists/:id" element={
-              <ProtectedRoute requireFeature="enablePlaylists">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <UserPlaylistDetailView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/flashpoint-playlists" element={
-              <ProtectedRoute requireFeature="enablePlaylists">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <PlaylistsView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/flashpoint-playlists/:id" element={
-              <ProtectedRoute requireFeature="enablePlaylists">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <PlaylistDetailView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
+            <Route
+              path="/dashboard"
+              element={
+                <ProtectedRoute requireFeature="enableStatistics">
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <DashboardView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/favorites"
+              element={
+                <ProtectedRoute requireFeature="enableFavorites">
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <FavoritesView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/playlists"
+              element={
+                <ProtectedRoute requireFeature="enablePlaylists">
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <UserPlaylistsView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/playlists/:id"
+              element={
+                <ProtectedRoute requireFeature="enablePlaylists">
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <UserPlaylistDetailView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/flashpoint-playlists"
+              element={
+                <ProtectedRoute requireFeature="enablePlaylists">
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <PlaylistsView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/flashpoint-playlists/:id"
+              element={
+                <ProtectedRoute requireFeature="enablePlaylists">
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <PlaylistDetailView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
 
             {/* User management routes */}
-            <Route path="/users" element={
-              <ProtectedRoute requirePermission="users.read">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <UsersView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/roles" element={
-              <ProtectedRoute requirePermission="roles.read">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <RolesView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
-            <Route path="/activities" element={
-              <ProtectedRoute requirePermission="activities.read" requireFeature="enableStatistics">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <ActivitiesView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
+            <Route
+              path="/users"
+              element={
+                <ProtectedRoute requirePermission="users.read">
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <UsersView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/roles"
+              element={
+                <ProtectedRoute requirePermission="roles.read">
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <RolesView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/activities"
+              element={
+                <ProtectedRoute
+                  requirePermission="activities.read"
+                  requireFeature="enableStatistics"
+                >
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <ActivitiesView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
 
             {/* Jobs */}
-            <Route path="/jobs" element={
-              <ProtectedRoute requirePermission="settings.update">
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <JobsView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
+            <Route
+              path="/jobs"
+              element={
+                <ProtectedRoute requirePermission="settings.update">
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <JobsView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
 
             {/* Settings */}
-            <Route path="/settings" element={
-              <ProtectedRoute>
-                <Suspense fallback={<RouteLoadingFallback />}>
-                  <SettingsView />
-                </Suspense>
-              </ProtectedRoute>
-            } />
+            <Route
+              path="/settings"
+              element={
+                <ProtectedRoute>
+                  <Suspense fallback={<RouteLoadingFallback />}>
+                    <SettingsView />
+                  </Suspense>
+                </ProtectedRoute>
+              }
+            />
           </Route>
         </Routes>
       </TooltipProvider>
diff --git a/frontend/src/components/activities/ActivityTable.tsx b/frontend/src/components/activities/ActivityTable.tsx
index 15fee6d..52caa78 100644
--- a/frontend/src/components/activities/ActivityTable.tsx
+++ b/frontend/src/components/activities/ActivityTable.tsx
@@ -14,16 +14,8 @@ import { Label } from '../ui/label';
 import { FilterInput } from './FilterInput';
 import { DatePicker } from '../ui/date-picker';
 import { FormattedDate } from '../common/FormattedDate';
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '../ui/collapsible';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '../ui/tooltip';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 
 interface ActivityLog {
   id: number;
@@ -93,9 +85,7 @@ const ACTIVITY_TABLE_COLUMNS: ColumnDef<ActivityLog>[] = [
       return (
         <div className="text-muted-foreground">
           {resource || '-'}
-          {resourceId ? (
-            <span className="text-muted-foreground/60"> #{resourceId}</span>
-          ) : null}
+          {resourceId ? <span className="text-muted-foreground/60"> #{resourceId}</span> : null}
         </div>
       );
     },
@@ -106,11 +96,7 @@ const ACTIVITY_TABLE_COLUMNS: ColumnDef<ActivityLog>[] = [
     enableSorting: true,
     cell: ({ row }) => {
       const ipAddress = row.getValue('ipAddress') as string | null;
-      return (
-        <div className="text-muted-foreground font-mono text-xs">
-          {ipAddress || '-'}
-        </div>
-      );
+      return <div className="text-muted-foreground font-mono text-xs">{ipAddress || '-'}</div>;
     },
   },
   {
@@ -144,7 +130,9 @@ function ActivityTableComponent() {
   const limit = PAGINATION_LIMIT;
 
   // Sorting state
-  const [sortBy, setSortBy] = useState<'createdAt' | 'username' | 'action' | 'resource' | 'ipAddress'>('createdAt');
+  const [sortBy, setSortBy] = useState<
+    'createdAt' | 'username' | 'action' | 'resource' | 'ipAddress'
+  >('createdAt');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
 
   // Transition for deferred state updates
@@ -160,44 +148,64 @@ function ActivityTableComponent() {
 
   // Build filters object - convert Date objects to ISO strings for API
   // Only include dates if the range is valid
-  const hasValidDateRange = !filterState.dateRangeError || (!filterState.startDate && !filterState.endDate);
-  const filters: ActivityFilters = useMemo(() => ({
-    username: debouncedUsername || undefined,
-    action: debouncedAction || undefined,
-    resource: debouncedResource || undefined,
-    startDate: hasValidDateRange && filterState.startDate ? filterState.startDate.toISOString() : undefined,
-    endDate: hasValidDateRange && filterState.endDate ? filterState.endDate.toISOString() : undefined,
-    sortBy,
-    sortOrder,
-  }), [debouncedUsername, debouncedAction, debouncedResource, filterState.startDate, filterState.endDate, hasValidDateRange, sortBy, sortOrder]);
+  const hasValidDateRange =
+    !filterState.dateRangeError || (!filterState.startDate && !filterState.endDate);
+  const filters: ActivityFilters = useMemo(
+    () => ({
+      username: debouncedUsername || undefined,
+      action: debouncedAction || undefined,
+      resource: debouncedResource || undefined,
+      startDate:
+        hasValidDateRange && filterState.startDate
+          ? filterState.startDate.toISOString()
+          : undefined,
+      endDate:
+        hasValidDateRange && filterState.endDate ? filterState.endDate.toISOString() : undefined,
+      sortBy,
+      sortOrder,
+    }),
+    [
+      debouncedUsername,
+      debouncedAction,
+      debouncedResource,
+      filterState.startDate,
+      filterState.endDate,
+      hasValidDateRange,
+      sortBy,
+      sortOrder,
+    ]
+  );
 
   const { data, isLoading, isError, error } = useActivities(page, limit, filters);
 
   // Convert sorting state to TanStack Table format
-  const sortingState: SortingState = useMemo(() => [
-    { id: sortBy, desc: sortOrder === 'desc' }
-  ], [sortBy, sortOrder]);
+  const sortingState: SortingState = useMemo(
+    () => [{ id: sortBy, desc: sortOrder === 'desc' }],
+    [sortBy, sortOrder]
+  );
 
   // Handle sorting changes from DataTable
-  const handleSortingChange = useCallback((updaterOrValue: SortingState | ((old: SortingState) => SortingState)) => {
-    const newSorting = typeof updaterOrValue === 'function'
-      ? updaterOrValue(sortingState)
-      : updaterOrValue;
+  const handleSortingChange = useCallback(
+    (updaterOrValue: SortingState | ((old: SortingState) => SortingState)) => {
+      const newSorting =
+        typeof updaterOrValue === 'function' ? updaterOrValue(sortingState) : updaterOrValue;
 
-    // Wrap state updates in transition to defer prop changes
-    startTransition(() => {
-      if (newSorting.length === 0) {
-        // Reset to default when cleared
-        setSortBy('createdAt');
-        setSortOrder('desc');
-      } else {
-        const { id, desc } = newSorting[0];
-        setSortBy(id as typeof sortBy);
-        setSortOrder(desc ? 'desc' : 'asc');
-      }
-      setPage(1); // Reset to first page on sort change
-    });
-  }, [sortingState]);
+      // Wrap state updates in transition to defer prop changes
+      startTransition(() => {
+        if (newSorting.length === 0) {
+          // Reset to default when cleared
+          setSortBy('createdAt');
+          setSortOrder('desc');
+        } else {
+          const { id, desc } = newSorting[0];
+          setSortBy(id as typeof sortBy);
+          setSortOrder(desc ? 'desc' : 'asc');
+        }
+        setPage(1); // Reset to first page on sort change
+      });
+    },
+    [sortingState]
+  );
 
   const handleClearFilters = useCallback(() => {
     clearFilters();
@@ -206,7 +214,11 @@ function ActivityTableComponent() {
 
   // Check if any filters are active
   const hasActiveFilters =
-    filterState.username || filterState.action || filterState.resource || filterState.startDate || filterState.endDate;
+    filterState.username ||
+    filterState.action ||
+    filterState.resource ||
+    filterState.startDate ||
+    filterState.endDate;
 
   // Count active filters
   const activeFilterCount = [
@@ -233,17 +245,12 @@ function ActivityTableComponent() {
             <Button variant="ghost" size="sm" className="gap-2">
               {showFilters ? 'Hide' : 'Show'} Filters
               {!showFilters && activeFilterCount > 0 ? (
-                <Badge
-                  variant="default"
-                  className="h-5 min-w-[20px] px-1.5 text-xs font-semibold"
-                >
+                <Badge variant="default" className="h-5 min-w-[20px] px-1.5 text-xs font-semibold">
                   {activeFilterCount}
                 </Badge>
               ) : null}
               <ChevronDown
-                className={`h-4 w-4 transition-transform ${
-                  showFilters ? 'rotate-180' : ''
-                }`}
+                className={`h-4 w-4 transition-transform ${showFilters ? 'rotate-180' : ''}`}
               />
             </Button>
           </CollapsibleTrigger>
diff --git a/frontend/src/components/activities/FilterInput.tsx b/frontend/src/components/activities/FilterInput.tsx
index c4fbed8..676270e 100644
--- a/frontend/src/components/activities/FilterInput.tsx
+++ b/frontend/src/components/activities/FilterInput.tsx
@@ -26,13 +26,7 @@ export function FilterInput({
   return (
     <div className="space-y-2">
       <Label htmlFor={id}>{label}</Label>
-      <Input
-        id={id}
-        type="text"
-        value={value}
-        onChange={handleChange}
-        placeholder={placeholder}
-      />
+      <Input id={id} type="text" value={value} onChange={handleChange} placeholder={placeholder} />
     </div>
   );
 }
diff --git a/frontend/src/components/activities/dashboard/ActivityDashboard.tsx b/frontend/src/components/activities/dashboard/ActivityDashboard.tsx
index b7eff75..b4ebedd 100644
--- a/frontend/src/components/activities/dashboard/ActivityDashboard.tsx
+++ b/frontend/src/components/activities/dashboard/ActivityDashboard.tsx
@@ -22,7 +22,11 @@ function ActivityDashboardComponent() {
     localStorage.setItem('activityDashboardCollapsed', String(isCollapsed));
   }, [isCollapsed]);
 
-  const { data: stats, isLoading, isFetching } = useActivityStats(timeRange, undefined, autoRefresh);
+  const {
+    data: stats,
+    isLoading,
+    isFetching,
+  } = useActivityStats(timeRange, undefined, autoRefresh);
 
   const handleToggleAutoRefresh = () => {
     setAutoRefresh(!autoRefresh);
@@ -86,13 +90,12 @@ function ActivityDashboardComponent() {
                   : 'bg-muted text-muted-foreground hover:bg-muted/80'
               }`}
             >
-              <RefreshCw
-                size={16}
-                className={autoRefresh && isFetching ? 'animate-spin' : ''}
-              />
+              <RefreshCw size={16} className={autoRefresh && isFetching ? 'animate-spin' : ''} />
               <span className="text-sm">
                 Auto-refresh {autoRefresh ? 'ON' : 'OFF'}
-                {autoRefresh && isFetching ? <span className="ml-1 opacity-70">(updating...)</span> : null}
+                {autoRefresh && isFetching ? (
+                  <span className="ml-1 opacity-70">(updating...)</span>
+                ) : null}
               </span>
             </button>
           ) : null}
@@ -117,12 +120,7 @@ function ActivityDashboardComponent() {
           ) : null}
 
           {/* Stats Cards */}
-          {stats ? (
-            <ActivityStats
-              stats={stats.data}
-              timeRange={timeRange}
-            />
-          ) : null}
+          {stats ? <ActivityStats stats={stats.data} timeRange={timeRange} /> : null}
 
           {/* Activity Trend Chart */}
           <ActivityTrendChart autoRefresh={autoRefresh} />
diff --git a/frontend/src/components/activities/dashboard/ActivityStats.tsx b/frontend/src/components/activities/dashboard/ActivityStats.tsx
index f3b4524..1d5a100 100644
--- a/frontend/src/components/activities/dashboard/ActivityStats.tsx
+++ b/frontend/src/components/activities/dashboard/ActivityStats.tsx
@@ -22,65 +22,68 @@ const getTimeRangeLabel = (timeRange: TimeRange = '24h') => {
 
 export function ActivityStats({ stats, timeRange = '24h' }: ActivityStatsProps) {
   const timeLabel = getTimeRangeLabel(timeRange);
-  const statCards = useMemo(() => [
-    {
-      id: 'total',
-      icon: Activity,
-      label: 'Total Activities',
-      value: stats.total.toLocaleString(),
-      sublabel: timeLabel,
-      color: 'text-blue-400',
-      bgColor: 'bg-blue-500/10',
-      trend: stats.trends.totalChange
-    },
-    {
-      id: 'users',
-      icon: Users,
-      label: 'Unique Active Users',
-      value: stats.uniqueUsers.toLocaleString(),
-      sublabel: timeLabel,
-      color: 'text-green-400',
-      bgColor: 'bg-green-500/10',
-      trend: stats.trends.userChange
-    },
-    {
-      id: 'peak',
-      icon: Clock,
-      label: 'Peak Activity Hour',
-      value: stats.peakHour.formattedRange,
-      sublabel: `${stats.peakHour.count} activities`,
-      color: 'text-purple-400',
-      bgColor: 'bg-purple-500/10'
-    },
-    {
-      id: 'auth',
-      icon: Shield,
-      label: 'Auth Events',
-      value: stats.authEvents.total.toLocaleString(),
-      sublabel: `${stats.authEvents.successful} successful, ${stats.authEvents.failed} failed`,
-      color: 'text-amber-400',
-      bgColor: 'bg-amber-500/10',
-      trend: stats.trends.authChange
-    },
-    {
-      id: 'failed',
-      icon: AlertTriangle,
-      label: 'Failed Operations',
-      value: stats.failedOperations.toLocaleString(),
-      sublabel: 'Errors and failures',
-      color: 'text-red-400',
-      bgColor: 'bg-red-500/10'
-    },
-    {
-      id: 'system',
-      icon: Server,
-      label: 'System Events',
-      value: stats.systemEvents.toLocaleString(),
-      sublabel: 'Automated actions',
-      color: 'text-cyan-400',
-      bgColor: 'bg-cyan-500/10'
-    }
-  ], [stats, timeLabel]);
+  const statCards = useMemo(
+    () => [
+      {
+        id: 'total',
+        icon: Activity,
+        label: 'Total Activities',
+        value: stats.total.toLocaleString(),
+        sublabel: timeLabel,
+        color: 'text-blue-400',
+        bgColor: 'bg-blue-500/10',
+        trend: stats.trends.totalChange,
+      },
+      {
+        id: 'users',
+        icon: Users,
+        label: 'Unique Active Users',
+        value: stats.uniqueUsers.toLocaleString(),
+        sublabel: timeLabel,
+        color: 'text-green-400',
+        bgColor: 'bg-green-500/10',
+        trend: stats.trends.userChange,
+      },
+      {
+        id: 'peak',
+        icon: Clock,
+        label: 'Peak Activity Hour',
+        value: stats.peakHour.formattedRange,
+        sublabel: `${stats.peakHour.count} activities`,
+        color: 'text-purple-400',
+        bgColor: 'bg-purple-500/10',
+      },
+      {
+        id: 'auth',
+        icon: Shield,
+        label: 'Auth Events',
+        value: stats.authEvents.total.toLocaleString(),
+        sublabel: `${stats.authEvents.successful} successful, ${stats.authEvents.failed} failed`,
+        color: 'text-amber-400',
+        bgColor: 'bg-amber-500/10',
+        trend: stats.trends.authChange,
+      },
+      {
+        id: 'failed',
+        icon: AlertTriangle,
+        label: 'Failed Operations',
+        value: stats.failedOperations.toLocaleString(),
+        sublabel: 'Errors and failures',
+        color: 'text-red-400',
+        bgColor: 'bg-red-500/10',
+      },
+      {
+        id: 'system',
+        icon: Server,
+        label: 'System Events',
+        value: stats.systemEvents.toLocaleString(),
+        sublabel: 'Automated actions',
+        color: 'text-cyan-400',
+        bgColor: 'bg-cyan-500/10',
+      },
+    ],
+    [stats, timeLabel]
+  );
 
   const getTrendIcon = (trend: number) => {
     if (trend > 0) return '↑';
@@ -112,7 +115,9 @@ export function ActivityStats({ stats, timeRange = '24h' }: ActivityStatsProps)
               <div className="flex-1 min-w-0">
                 <p className="text-muted-foreground text-xs mb-1">{stat.label}</p>
                 {/* Peak Hour: use smaller font and break text instead of truncate */}
-                <p className={`font-bold ${isPeakHour ? 'text-base break-words' : 'text-xl truncate'}`}>
+                <p
+                  className={`font-bold ${isPeakHour ? 'text-base break-words' : 'text-xl truncate'}`}
+                >
                   {stat.value}
                 </p>
                 <p className="text-muted-foreground text-xs mt-1 truncate">{stat.sublabel}</p>
diff --git a/frontend/src/components/activities/dashboard/ActivityTrendChart.tsx b/frontend/src/components/activities/dashboard/ActivityTrendChart.tsx
index bd5449c..7e52180 100644
--- a/frontend/src/components/activities/dashboard/ActivityTrendChart.tsx
+++ b/frontend/src/components/activities/dashboard/ActivityTrendChart.tsx
@@ -1,5 +1,14 @@
 import { useState } from 'react';
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts';
 import { useActivityTrend } from '@/hooks/useActivities';
 import { useDateTimeFormat } from '@/hooks/useDateTimeFormat';
 import type { CustomTooltipProps } from '@/types/chart';
@@ -74,11 +83,11 @@ export function ActivityTrendChart({ autoRefresh = false }: ActivityTrendChartPr
     );
   }
 
-  const chartData = data.data.map(item => ({
+  const chartData = data.data.map((item) => ({
     timestamp: formatTimestamp(item.timestamp),
     total: item.total,
     authEvents: item.authEvents,
-    failedActions: item.failedActions
+    failedActions: item.failedActions,
   }));
 
   return (
@@ -123,28 +132,21 @@ export function ActivityTrendChart({ autoRefresh = false }: ActivityTrendChartPr
           <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
             <defs>
               <linearGradient id="colorTotal" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.8}/>
-                <stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/>
+                <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
               </linearGradient>
               <linearGradient id="colorAuth" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.8}/>
-                <stop offset="95%" stopColor="#f59e0b" stopOpacity={0}/>
+                <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="#f59e0b" stopOpacity={0} />
               </linearGradient>
               <linearGradient id="colorFailed" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="#ef4444" stopOpacity={0.8}/>
-                <stop offset="95%" stopColor="#ef4444" stopOpacity={0}/>
+                <stop offset="5%" stopColor="#ef4444" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
               </linearGradient>
             </defs>
             <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-            <XAxis
-              dataKey="timestamp"
-              stroke="#9ca3af"
-              tick={{ fill: '#9ca3af', fontSize: 12 }}
-            />
-            <YAxis
-              stroke="#9ca3af"
-              tick={{ fill: '#9ca3af', fontSize: 12 }}
-            />
+            <XAxis dataKey="timestamp" stroke="#9ca3af" tick={{ fill: '#9ca3af', fontSize: 12 }} />
+            <YAxis stroke="#9ca3af" tick={{ fill: '#9ca3af', fontSize: 12 }} />
             <Tooltip content={<CustomTooltip />} />
             <Legend
               wrapperStyle={{ paddingTop: '20px' }}
diff --git a/frontend/src/components/activities/dashboard/ResourceDistributionChart.tsx b/frontend/src/components/activities/dashboard/ResourceDistributionChart.tsx
index 2561bb0..b696d68 100644
--- a/frontend/src/components/activities/dashboard/ResourceDistributionChart.tsx
+++ b/frontend/src/components/activities/dashboard/ResourceDistributionChart.tsx
@@ -111,7 +111,7 @@ export function ResourceDistributionChart({ autoRefresh = false }: ResourceDistr
     value: item.count,
     percentage: item.percentage,
     topAction: item.metadata.topAction,
-    color: COLORS[index % COLORS.length]
+    color: COLORS[index % COLORS.length],
   }));
 
   const totalActivities = data.meta.total;
@@ -182,7 +182,8 @@ export function ResourceDistributionChart({ autoRefresh = false }: ResourceDistr
         </ResponsiveContainer>
         <div className="text-center mt-4">
           <p className="text-muted-foreground text-sm">
-            Total Activities: <span className="font-semibold">{totalActivities.toLocaleString()}</span>
+            Total Activities:{' '}
+            <span className="font-semibold">{totalActivities.toLocaleString()}</span>
           </p>
         </div>
       </div>
diff --git a/frontend/src/components/activities/dashboard/TopActionsChart.tsx b/frontend/src/components/activities/dashboard/TopActionsChart.tsx
index 6e523a1..925a803 100644
--- a/frontend/src/components/activities/dashboard/TopActionsChart.tsx
+++ b/frontend/src/components/activities/dashboard/TopActionsChart.tsx
@@ -1,5 +1,14 @@
 import { useState } from 'react';
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from 'recharts';
 import { useTopActions } from '@/hooks/useActivities';
 import { TimeRange } from '@/types/auth';
 import type { CustomTooltipProps } from '@/types/chart';
@@ -80,14 +89,14 @@ export function TopActionsChart({ autoRefresh = false }: TopActionsChartProps) {
     );
   }
 
-  const chartData = data.data.map(action => ({
+  const chartData = data.data.map((action) => ({
     name: truncateAction(action.action),
     fullAction: action.action,
     count: action.count,
     percentage: action.percentage,
     category: action.category,
     topResource: action.topResource,
-    color: CATEGORY_COLORS[action.category] || '#6b7280'
+    color: CATEGORY_COLORS[action.category] || '#6b7280',
   }));
 
   return (
@@ -135,11 +144,7 @@ export function TopActionsChart({ autoRefresh = false }: TopActionsChartProps) {
             margin={{ top: 5, right: 30, left: 140, bottom: 5 }}
           >
             <CartesianGrid strokeDasharray="3 3" stroke="#374151" horizontal={false} />
-            <XAxis
-              type="number"
-              stroke="#9ca3af"
-              tick={{ fill: '#9ca3af', fontSize: 12 }}
-            />
+            <XAxis type="number" stroke="#9ca3af" tick={{ fill: '#9ca3af', fontSize: 12 }} />
             <YAxis
               type="category"
               dataKey="name"
diff --git a/frontend/src/components/activities/dashboard/UserLeaderboard.tsx b/frontend/src/components/activities/dashboard/UserLeaderboard.tsx
index 5874fdf..f9d4f9a 100644
--- a/frontend/src/components/activities/dashboard/UserLeaderboard.tsx
+++ b/frontend/src/components/activities/dashboard/UserLeaderboard.tsx
@@ -92,11 +92,19 @@ export function UserLeaderboard({ autoRefresh = false }: UserLeaderboardProps) {
             <thead>
               <tr className="border-b border-border">
                 <th className="text-left p-3 text-sm font-semibold text-muted-foreground">Rank</th>
-                <th className="text-left p-3 text-sm font-semibold text-muted-foreground">Username</th>
-                <th className="text-right p-3 text-sm font-semibold text-muted-foreground">Activities</th>
+                <th className="text-left p-3 text-sm font-semibold text-muted-foreground">
+                  Username
+                </th>
+                <th className="text-right p-3 text-sm font-semibold text-muted-foreground">
+                  Activities
+                </th>
                 <th className="text-right p-3 text-sm font-semibold text-muted-foreground">%</th>
-                <th className="text-left p-3 text-sm font-semibold text-muted-foreground">Top Action</th>
-                <th className="text-left p-3 text-sm font-semibold text-muted-foreground">Last Activity</th>
+                <th className="text-left p-3 text-sm font-semibold text-muted-foreground">
+                  Top Action
+                </th>
+                <th className="text-left p-3 text-sm font-semibold text-muted-foreground">
+                  Last Activity
+                </th>
               </tr>
             </thead>
             <tbody>
@@ -121,9 +129,7 @@ export function UserLeaderboard({ autoRefresh = false }: UserLeaderboardProps) {
                         {user.key}
                       </span>
                     </td>
-                    <td className="p-3 text-right font-semibold">
-                      {user.count.toLocaleString()}
-                    </td>
+                    <td className="p-3 text-right font-semibold">{user.count.toLocaleString()}</td>
                     <td className="p-3 text-right text-muted-foreground">
                       {user.percentage.toFixed(1)}%
                     </td>
@@ -131,7 +137,9 @@ export function UserLeaderboard({ autoRefresh = false }: UserLeaderboardProps) {
                       {user.metadata.topAction || '-'}
                     </td>
                     <td className="p-3 text-sm text-muted-foreground">
-                      {user.metadata.lastActivity ? formatDateTime(user.metadata.lastActivity) : '-'}
+                      {user.metadata.lastActivity
+                        ? formatDateTime(user.metadata.lastActivity)
+                        : '-'}
                     </td>
                   </tr>
                 );
diff --git a/frontend/src/components/auth/BrandPanel.tsx b/frontend/src/components/auth/BrandPanel.tsx
index 41e4ff1..bff856b 100644
--- a/frontend/src/components/auth/BrandPanel.tsx
+++ b/frontend/src/components/auth/BrandPanel.tsx
@@ -26,8 +26,14 @@ export function BrandPanel() {
       />
 
       {/* Multi-layer gradient backgrounds */}
-      <div className="absolute inset-0 bg-gradient-to-t from-primary/5 via-transparent to-transparent pointer-events-none" aria-hidden="true" />
-      <div className="absolute inset-0 bg-gradient-to-br from-transparent via-primary/3 to-primary/8 pointer-events-none" aria-hidden="true" />
+      <div
+        className="absolute inset-0 bg-gradient-to-t from-primary/5 via-transparent to-transparent pointer-events-none"
+        aria-hidden="true"
+      />
+      <div
+        className="absolute inset-0 bg-gradient-to-br from-transparent via-primary/3 to-primary/8 pointer-events-none"
+        aria-hidden="true"
+      />
 
       {/* Content container */}
       <div className="relative z-10 flex flex-col items-center px-12 animate-fade-in-up">
@@ -59,12 +65,8 @@ export function BrandPanel() {
                 animationFillMode: 'both',
               }}
             >
-              <div className="text-3xl font-bold text-primary mb-2">
-                {stat.value}
-              </div>
-              <div className="text-sm text-muted-foreground text-center">
-                {stat.label}
-              </div>
+              <div className="text-3xl font-bold text-primary mb-2">{stat.value}</div>
+              <div className="text-sm text-muted-foreground text-center">{stat.label}</div>
             </div>
           ))}
         </div>
diff --git a/frontend/src/components/auth/CelestialBackground.tsx b/frontend/src/components/auth/CelestialBackground.tsx
index 589e3c6..9f12a18 100644
--- a/frontend/src/components/auth/CelestialBackground.tsx
+++ b/frontend/src/components/auth/CelestialBackground.tsx
@@ -33,40 +33,22 @@ export function CelestialBackground() {
   return (
     <>
       {/* Nebula Layer 1: Primary color with slow drift */}
-      <div
-        className="celestial-nebula-1"
-        aria-hidden="true"
-      />
+      <div className="celestial-nebula-1" aria-hidden="true" />
 
       {/* Nebula Layer 2: Offset animation for depth */}
-      <div
-        className="celestial-nebula-2"
-        aria-hidden="true"
-      />
+      <div className="celestial-nebula-2" aria-hidden="true" />
 
       {/* Nebula Layer 3: Subtle accent layer */}
-      <div
-        className="celestial-nebula-3"
-        aria-hidden="true"
-      />
+      <div className="celestial-nebula-3" aria-hidden="true" />
 
       {/* Starfield Small Stars - Layer 1 (furthest) */}
-      <div
-        className={`celestial-stars-small ${isMobile ? 'mobile' : ''}`}
-        aria-hidden="true"
-      />
+      <div className={`celestial-stars-small ${isMobile ? 'mobile' : ''}`} aria-hidden="true" />
 
       {/* Starfield Medium Stars - Layer 2 (mid-depth) */}
-      <div
-        className={`celestial-stars-medium ${isMobile ? 'mobile' : ''}`}
-        aria-hidden="true"
-      />
+      <div className={`celestial-stars-medium ${isMobile ? 'mobile' : ''}`} aria-hidden="true" />
 
       {/* Starfield Large Stars - Layer 3 (closest) */}
-      <div
-        className={`celestial-stars-large ${isMobile ? 'mobile' : ''}`}
-        aria-hidden="true"
-      />
+      <div className={`celestial-stars-large ${isMobile ? 'mobile' : ''}`} aria-hidden="true" />
     </>
   );
 }
diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
index f15b9d3..93ca126 100644
--- a/frontend/src/components/auth/LoginForm.tsx
+++ b/frontend/src/components/auth/LoginForm.tsx
@@ -46,7 +46,7 @@ export function LoginForm() {
   // Fetch public settings first to check maintenance mode
   const { data: publicSettings, isSuccess: isPublicSettingsLoaded } = useQuery({
     queryKey: ['publicSettings'],
-    queryFn: () => systemSettingsApi.getPublic()
+    queryFn: () => systemSettingsApi.getPublic(),
   });
 
   // Only fetch auth settings if NOT in maintenance mode (to avoid 503 errors)
@@ -54,7 +54,7 @@ export function LoginForm() {
   const { data: authSettings } = useQuery({
     queryKey: ['authSettings'],
     queryFn: () => authSettingsApi.get(),
-    enabled: isPublicSettingsLoaded && !publicSettings?.app?.maintenanceMode
+    enabled: isPublicSettingsLoaded && !publicSettings?.app?.maintenanceMode,
   });
 
   const form = useForm<LoginFormValues>({
@@ -76,9 +76,7 @@ export function LoginForm() {
       await login(values, from);
     } catch (error) {
       logger.error('Login error:', error);
-      setError(
-        getApiErrorMessage(error, 'Login failed. Please check your credentials.')
-      );
+      setError(getApiErrorMessage(error, 'Login failed. Please check your credentials.'));
     } finally {
       setIsLoading(false);
     }
@@ -95,181 +93,187 @@ export function LoginForm() {
             hsl(var(--primary) / 0.3) 25%,
             hsl(var(--primary) / 0.5) 50%,
             hsl(var(--primary) / 0.3) 75%,
-            hsl(var(--primary) / 0.6) 100%)`
+            hsl(var(--primary) / 0.6) 100%)`,
         }}
       >
         {/* Glassmorphism card with backdrop-blur */}
         <div className="bg-card/70 backdrop-blur-xl shadow-2xl rounded-2xl px-8 py-6 relative overflow-hidden">
-        {/* Multi-layer gradient backgrounds */}
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/8 via-transparent to-primary/12 pointer-events-none" aria-hidden="true" />
-        <div className="absolute inset-0 bg-gradient-to-t from-background/20 via-transparent to-transparent pointer-events-none" aria-hidden="true" />
+          {/* Multi-layer gradient backgrounds */}
+          <div
+            className="absolute inset-0 bg-gradient-to-br from-primary/8 via-transparent to-primary/12 pointer-events-none"
+            aria-hidden="true"
+          />
+          <div
+            className="absolute inset-0 bg-gradient-to-t from-background/20 via-transparent to-transparent pointer-events-none"
+            aria-hidden="true"
+          />
 
-        {/* Prismatic Light Glow - Simulates light cast through glass */}
-        <div
-          className="absolute inset-0 pointer-events-none prismatic-form-glow"
-          style={{
-            background: `radial-gradient(
+          {/* Prismatic Light Glow - Simulates light cast through glass */}
+          <div
+            className="absolute inset-0 pointer-events-none prismatic-form-glow"
+            style={{
+              background: `radial-gradient(
               ellipse 80% 60% at 50% 40%,
               hsl(var(--primary) / var(--prismatic-glow-opacity)) 0%,
               transparent 70%
-            )`
-          }}
-          aria-hidden="true"
-        />
+            )`,
+            }}
+            aria-hidden="true"
+          />
 
-        {/* Theme Toggle in top-right corner - always visible */}
-        <div className="absolute top-4 right-4 z-10">
-          <ThemePicker />
-        </div>
-
-        {/* Logo and Title Section */}
-        <div className="relative mb-6 flex flex-col items-center">
-          <div className="mb-4 w-24 h-24 flex items-center justify-center">
-            <img
-              src="/images/logo.png"
-              alt="Flashpoint Archive"
-              className="w-full h-full object-contain drop-shadow-2xl"
-            />
+          {/* Theme Toggle in top-right corner - always visible */}
+          <div className="absolute top-4 right-4 z-10">
+            <ThemePicker />
           </div>
-          <h1 className="text-3xl font-bold text-foreground text-center mb-2 tracking-tight">
-            Welcome Back
-          </h1>
-          <p className="text-sm text-muted-foreground text-center">
-            Sign in to access Flashpoint Archive
-          </p>
-        </div>
 
-        {/* Setup Complete Notice */}
-        {setupComplete && !error ? (
-          <Alert
-            className="mb-6 border-green-500/50 bg-green-500/10 text-green-900 dark:text-green-100 animate-slide-in-down"
-            role="alert"
-            aria-live="polite"
-          >
-            <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
-            <AlertDescription className="ml-2">
-              <strong className="font-semibold">Setup Complete!</strong>{' '}
-              Your administrator account has been created successfully. Please sign in to continue.
-            </AlertDescription>
-          </Alert>
-        ) : null}
-
-        {/* Maintenance Mode Notice */}
-        {publicSettings?.app?.maintenanceMode ? (
-          <Alert
-            className="mb-6 border-amber-500/50 bg-amber-500/10 text-amber-900 dark:text-amber-100 animate-slide-in-down"
-            role="alert"
-            aria-live="polite"
-          >
-            <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
-            <AlertDescription className="ml-2">
-              <strong className="font-semibold">Maintenance Mode:</strong>{' '}
-              {publicSettings?.app?.maintenanceMessage ||
-                'The system is currently under maintenance. Some features may be unavailable.'}
-            </AlertDescription>
-          </Alert>
-        ) : null}
-
-        {error ? (
-          <Alert
-            variant="destructive"
-            className="mb-6 animate-slide-in-down"
-            role="alert"
-            aria-live="assertive"
-          >
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        ) : null}
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="relative space-y-4">
-            <FormField
-              control={form.control}
-              name="username"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-sm font-semibold text-foreground">
-                    Username
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Enter your username"
-                      autoFocus
-                      autoComplete="username"
-                      className="h-10 transition-all duration-200 focus:scale-[1.01] focus:ring-1 focus:ring-primary/20"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="password"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-sm font-semibold text-foreground">
-                    Password
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      type="password"
-                      placeholder="Enter your password"
-                      autoComplete="current-password"
-                      className="h-10 transition-all duration-200 focus:scale-[1.01] focus:ring-1 focus:ring-primary/20"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="space-y-3 pt-2">
-              <Button
-                type="submit"
-                className="w-full h-10 text-base font-semibold shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5"
-                disabled={isLoading}
-              >
-                {isLoading ? (
-                  <span className="flex items-center gap-2">
-                    <span className="inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-                    Signing in...
-                  </span>
-                ) : (
-                  'Sign In'
-                )}
-              </Button>
-
-              {authSettings?.guestAccessEnabled ? (
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="w-full h-10 text-base font-medium transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
-                  onClick={loginAsGuest}
-                >
-                  Browse as Guest
-                </Button>
-              ) : null}
+          {/* Logo and Title Section */}
+          <div className="relative mb-6 flex flex-col items-center">
+            <div className="mb-4 w-24 h-24 flex items-center justify-center">
+              <img
+                src="/images/logo.png"
+                alt="Flashpoint Archive"
+                className="w-full h-full object-contain drop-shadow-2xl"
+              />
             </div>
-          </form>
-        </Form>
-
-        {authSettings?.userRegistrationEnabled ? (
-          <div className="relative mt-6 pt-4 border-t border-border/50">
-            <p className="text-center text-sm text-muted-foreground">
-              Don't have an account?{' '}
-              <Link
-                to="/register"
-                className="text-primary font-semibold hover:underline transition-all"
-              >
-                Create one now
-              </Link>
+            <h1 className="text-3xl font-bold text-foreground text-center mb-2 tracking-tight">
+              Welcome Back
+            </h1>
+            <p className="text-sm text-muted-foreground text-center">
+              Sign in to access Flashpoint Archive
             </p>
           </div>
-        ) : null}
+
+          {/* Setup Complete Notice */}
+          {setupComplete && !error ? (
+            <Alert
+              className="mb-6 border-green-500/50 bg-green-500/10 text-green-900 dark:text-green-100 animate-slide-in-down"
+              role="alert"
+              aria-live="polite"
+            >
+              <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
+              <AlertDescription className="ml-2">
+                <strong className="font-semibold">Setup Complete!</strong> Your administrator
+                account has been created successfully. Please sign in to continue.
+              </AlertDescription>
+            </Alert>
+          ) : null}
+
+          {/* Maintenance Mode Notice */}
+          {publicSettings?.app?.maintenanceMode ? (
+            <Alert
+              className="mb-6 border-amber-500/50 bg-amber-500/10 text-amber-900 dark:text-amber-100 animate-slide-in-down"
+              role="alert"
+              aria-live="polite"
+            >
+              <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+              <AlertDescription className="ml-2">
+                <strong className="font-semibold">Maintenance Mode:</strong>{' '}
+                {publicSettings?.app?.maintenanceMessage ||
+                  'The system is currently under maintenance. Some features may be unavailable.'}
+              </AlertDescription>
+            </Alert>
+          ) : null}
+
+          {error ? (
+            <Alert
+              variant="destructive"
+              className="mb-6 animate-slide-in-down"
+              role="alert"
+              aria-live="assertive"
+            >
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : null}
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="relative space-y-4">
+              <FormField
+                control={form.control}
+                name="username"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm font-semibold text-foreground">
+                      Username
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter your username"
+                        autoFocus
+                        autoComplete="username"
+                        className="h-10 transition-all duration-200 focus:scale-[1.01] focus:ring-1 focus:ring-primary/20"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm font-semibold text-foreground">
+                      Password
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="Enter your password"
+                        autoComplete="current-password"
+                        className="h-10 transition-all duration-200 focus:scale-[1.01] focus:ring-1 focus:ring-primary/20"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="space-y-3 pt-2">
+                <Button
+                  type="submit"
+                  className="w-full h-10 text-base font-semibold shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5"
+                  disabled={isLoading}
+                >
+                  {isLoading ? (
+                    <span className="flex items-center gap-2">
+                      <span className="inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                      Signing in...
+                    </span>
+                  ) : (
+                    'Sign In'
+                  )}
+                </Button>
+
+                {authSettings?.guestAccessEnabled ? (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full h-10 text-base font-medium transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
+                    onClick={loginAsGuest}
+                  >
+                    Browse as Guest
+                  </Button>
+                ) : null}
+              </div>
+            </form>
+          </Form>
+
+          {authSettings?.userRegistrationEnabled ? (
+            <div className="relative mt-6 pt-4 border-t border-border/50">
+              <p className="text-center text-sm text-muted-foreground">
+                Don't have an account?{' '}
+                <Link
+                  to="/register"
+                  className="text-primary font-semibold hover:underline transition-all"
+                >
+                  Create one now
+                </Link>
+              </p>
+            </div>
+          ) : null}
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/auth/ParticleNetworkBackground.tsx b/frontend/src/components/auth/ParticleNetworkBackground.tsx
index 737c6ad..2f86b0c 100644
--- a/frontend/src/components/auth/ParticleNetworkBackground.tsx
+++ b/frontend/src/components/auth/ParticleNetworkBackground.tsx
@@ -4,12 +4,12 @@ import { useEffect, useRef } from 'react';
  * Particle data structure
  */
 interface Particle {
-  x: number;          // X position
-  y: number;          // Y position
-  vx: number;         // X velocity (slow drift)
-  vy: number;         // Y velocity (slow drift)
-  radius: number;     // Particle size (2-4px)
-  opacity: number;    // Base opacity (0.4-0.8)
+  x: number; // X position
+  y: number; // Y position
+  vx: number; // X velocity (slow drift)
+  vy: number; // Y velocity (slow drift)
+  radius: number; // Particle size (2-4px)
+  opacity: number; // Base opacity (0.4-0.8)
 }
 
 /**
@@ -18,23 +18,23 @@ interface Particle {
 interface MousePosition {
   x: number;
   y: number;
-  active: boolean;    // Is mouse over canvas?
+  active: boolean; // Is mouse over canvas?
 }
 
 /**
  * Configuration constants for particle network
  */
 const CONFIG = {
-  PARTICLE_COUNT: 160,              // Base count at 1920px reference width
+  PARTICLE_COUNT: 160, // Base count at 1920px reference width
   PARTICLE_MIN_RADIUS: 2,
   PARTICLE_MAX_RADIUS: 4,
-  PARTICLE_MIN_SPEED: 0.1,          // Slow drift
+  PARTICLE_MIN_SPEED: 0.1, // Slow drift
   PARTICLE_MAX_SPEED: 0.3,
   PARTICLE_MIN_OPACITY: 0.4,
   PARTICLE_MAX_OPACITY: 0.8,
-  CONNECTION_DISTANCE: 120,         // Max distance for particle-to-particle lines
-  MOUSE_CONNECTION_DISTANCE: 150,   // Max distance for mouse-to-particle lines
-  LINE_OPACITY_MULTIPLIER: 0.5,     // Lines are more transparent than particles
+  CONNECTION_DISTANCE: 120, // Max distance for particle-to-particle lines
+  MOUSE_CONNECTION_DISTANCE: 150, // Max distance for mouse-to-particle lines
+  LINE_OPACITY_MULTIPLIER: 0.5, // Lines are more transparent than particles
 };
 
 /**
@@ -45,10 +45,10 @@ const CONFIG = {
  * @returns Calculated particle count clamped between MIN_COUNT and MAX_COUNT
  */
 const calculateParticleCount = (width: number): number => {
-  const BASE_WIDTH = 1920;  // Reference width
-  const BASE_COUNT = 160;    // Particle count at reference width
-  const MIN_COUNT = 40;      // Minimum particles (very small screens)
-  const MAX_COUNT = 250;     // Maximum particles (performance limit)
+  const BASE_WIDTH = 1920; // Reference width
+  const BASE_COUNT = 160; // Particle count at reference width
+  const MIN_COUNT = 40; // Minimum particles (very small screens)
+  const MAX_COUNT = 250; // Maximum particles (performance limit)
 
   // Linear scaling: count = (currentWidth / baseWidth) × baseCount
   const scaledCount = Math.round((width / BASE_WIDTH) * BASE_COUNT);
@@ -69,8 +69,12 @@ const initializeParticles = (width: number, height: number, count: number): Part
       y: Math.random() * height,
       vx: (Math.random() - 0.5) * (CONFIG.PARTICLE_MAX_SPEED * 2),
       vy: (Math.random() - 0.5) * (CONFIG.PARTICLE_MAX_SPEED * 2),
-      radius: CONFIG.PARTICLE_MIN_RADIUS + Math.random() * (CONFIG.PARTICLE_MAX_RADIUS - CONFIG.PARTICLE_MIN_RADIUS),
-      opacity: CONFIG.PARTICLE_MIN_OPACITY + Math.random() * (CONFIG.PARTICLE_MAX_OPACITY - CONFIG.PARTICLE_MIN_OPACITY),
+      radius:
+        CONFIG.PARTICLE_MIN_RADIUS +
+        Math.random() * (CONFIG.PARTICLE_MAX_RADIUS - CONFIG.PARTICLE_MIN_RADIUS),
+      opacity:
+        CONFIG.PARTICLE_MIN_OPACITY +
+        Math.random() * (CONFIG.PARTICLE_MAX_OPACITY - CONFIG.PARTICLE_MIN_OPACITY),
     });
   }
 
@@ -81,7 +85,7 @@ const initializeParticles = (width: number, height: number, count: number): Part
  * Update particle positions with toroidal wrapping (seamless edges)
  */
 const updateParticles = (particles: Particle[], width: number, height: number) => {
-  particles.forEach(particle => {
+  particles.forEach((particle) => {
     // Update position
     particle.x += particle.vx;
     particle.y += particle.vy;
@@ -97,11 +101,7 @@ const updateParticles = (particles: Particle[], width: number, height: number) =
 /**
  * Draw connections between nearby particles
  */
-const drawConnections = (
-  ctx: CanvasRenderingContext2D,
-  particles: Particle[],
-  color: string
-) => {
+const drawConnections = (ctx: CanvasRenderingContext2D, particles: Particle[], color: string) => {
   for (let i = 0; i < particles.length; i++) {
     for (let j = i + 1; j < particles.length; j++) {
       const p1 = particles[i];
@@ -115,7 +115,8 @@ const drawConnections = (
       // Check if within connection distance (using squared distance for performance)
       if (distSq < CONFIG.CONNECTION_DISTANCE * CONFIG.CONNECTION_DISTANCE) {
         const distance = Math.sqrt(distSq);
-        const opacity = (1 - distance / CONFIG.CONNECTION_DISTANCE) * CONFIG.LINE_OPACITY_MULTIPLIER;
+        const opacity =
+          (1 - distance / CONFIG.CONNECTION_DISTANCE) * CONFIG.LINE_OPACITY_MULTIPLIER;
 
         ctx.strokeStyle = `hsla(${color}, ${opacity})`;
         ctx.lineWidth = 1;
@@ -137,7 +138,7 @@ const drawMouseConnections = (
   mouse: MousePosition,
   color: string
 ) => {
-  particles.forEach(particle => {
+  particles.forEach((particle) => {
     const dx = mouse.x - particle.x;
     const dy = mouse.y - particle.y;
     const distSq = dx * dx + dy * dy;
@@ -159,12 +160,8 @@ const drawMouseConnections = (
 /**
  * Draw particles as circles
  */
-const drawParticles = (
-  ctx: CanvasRenderingContext2D,
-  particles: Particle[],
-  color: string
-) => {
-  particles.forEach(particle => {
+const drawParticles = (ctx: CanvasRenderingContext2D, particles: Particle[], color: string) => {
+  particles.forEach((particle) => {
     ctx.fillStyle = `hsla(${color}, ${particle.opacity})`;
     ctx.beginPath();
     ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
@@ -217,7 +214,7 @@ export function ParticleNetworkBackground() {
     // Check for reduced motion preference
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     if (prefersReducedMotion) {
-      particlesRef.current.forEach(particle => {
+      particlesRef.current.forEach((particle) => {
         particle.vx *= 0.1;
         particle.vy *= 0.1;
       });
diff --git a/frontend/src/components/auth/PrismaticBackground.tsx b/frontend/src/components/auth/PrismaticBackground.tsx
index 7d358b7..04073f5 100644
--- a/frontend/src/components/auth/PrismaticBackground.tsx
+++ b/frontend/src/components/auth/PrismaticBackground.tsx
@@ -25,13 +25,11 @@ function useAnalogousColors(): AnalogousColors {
     const calculateColors = () => {
       // Read --primary from root element
       const root = document.documentElement;
-      const primaryValue = getComputedStyle(root)
-        .getPropertyValue('--primary')
-        .trim();
+      const primaryValue = getComputedStyle(root).getPropertyValue('--primary').trim();
 
       if (primaryValue) {
         // Parse HSL values (format: "221.2 83.2% 53.3%")
-        const values = primaryValue.split(' ').map(v => parseFloat(v.replace('%', '')));
+        const values = primaryValue.split(' ').map((v) => parseFloat(v.replace('%', '')));
 
         if (values.length >= 3) {
           const [h, s, l] = values;
diff --git a/frontend/src/components/auth/ProtectedRoute.tsx b/frontend/src/components/auth/ProtectedRoute.tsx
index 1c6c5a1..01e2ddd 100644
--- a/frontend/src/components/auth/ProtectedRoute.tsx
+++ b/frontend/src/components/auth/ProtectedRoute.tsx
@@ -32,7 +32,14 @@ export function ProtectedRoute({
   allowSharedAccess = false, // NEW
 }: ProtectedRouteProps) {
   const location = useLocation();
-  const { isAuthenticated, isGuest, hasPermission, hasAnyPermission, hasAllPermissions: hasAll, hasRole } = useAuthStore();
+  const {
+    isAuthenticated,
+    isGuest,
+    hasPermission,
+    hasAnyPermission,
+    hasAllPermissions: hasAll,
+    hasRole,
+  } = useAuthStore();
   const featureFlags = useFeatureFlags();
 
   // Get gameId from route params if checking shared access
@@ -71,7 +78,7 @@ export function ProtectedRoute({
         to="/unauthorized"
         state={{
           requiredFeature: requireFeature,
-          fromPath: location.pathname
+          fromPath: location.pathname,
         }}
         replace
       />
@@ -85,7 +92,7 @@ export function ProtectedRoute({
         to="/unauthorized"
         state={{
           requiredPermission: requirePermission,
-          fromPath: location.pathname
+          fromPath: location.pathname,
         }}
         replace
       />
@@ -104,7 +111,7 @@ export function ProtectedRoute({
           to="/unauthorized"
           state={{
             requiredPermission: requirePermissions.join(', '),
-            fromPath: location.pathname
+            fromPath: location.pathname,
           }}
           replace
         />
@@ -119,7 +126,7 @@ export function ProtectedRoute({
         to="/unauthorized"
         state={{
           requiredPermission: `role:${requireRole}`,
-          fromPath: location.pathname
+          fromPath: location.pathname,
         }}
         replace
       />
diff --git a/frontend/src/components/auth/RegisterForm.tsx b/frontend/src/components/auth/RegisterForm.tsx
index 1fbcab7..473d06b 100644
--- a/frontend/src/components/auth/RegisterForm.tsx
+++ b/frontend/src/components/auth/RegisterForm.tsx
@@ -20,15 +20,20 @@ import { getErrorMessage } from '@/types/api-error';
 import { ThemePicker } from '@/components/theme/ThemePicker';
 import { AlertTriangle } from 'lucide-react';
 
-const registerSchema = z.object({
-  username: z.string().min(3, 'Username must be at least 3 characters').max(50, 'Username must be at most 50 characters'),
-  email: z.string().email('Invalid email address'),
-  password: z.string().min(6, 'Password must be at least 6 characters'),
-  confirmPassword: z.string().min(6, 'Password must be at least 6 characters'),
-}).refine((data) => data.password === data.confirmPassword, {
-  message: "Passwords don't match",
-  path: ["confirmPassword"],
-});
+const registerSchema = z
+  .object({
+    username: z
+      .string()
+      .min(3, 'Username must be at least 3 characters')
+      .max(50, 'Username must be at most 50 characters'),
+    email: z.string().email('Invalid email address'),
+    password: z.string().min(6, 'Password must be at least 6 characters'),
+    confirmPassword: z.string().min(6, 'Password must be at least 6 characters'),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+  });
 
 type RegisterFormValues = z.infer<typeof registerSchema>;
 
@@ -39,7 +44,7 @@ export function RegisterForm() {
   // Fetch public settings first to check maintenance mode
   const { data: publicSettings, isSuccess: isPublicSettingsLoaded } = useQuery({
     queryKey: ['publicSettings'],
-    queryFn: () => systemSettingsApi.getPublic()
+    queryFn: () => systemSettingsApi.getPublic(),
   });
 
   // Only check if registration is enabled if NOT in maintenance mode (to avoid 503 errors)
@@ -47,7 +52,7 @@ export function RegisterForm() {
   const { data: settings } = useQuery({
     queryKey: ['authSettings'],
     queryFn: () => authSettingsApi.get(),
-    enabled: isPublicSettingsLoaded && !publicSettings?.app?.maintenanceMode
+    enabled: isPublicSettingsLoaded && !publicSettings?.app?.maintenanceMode,
   });
 
   const form = useForm<RegisterFormValues>({
@@ -65,7 +70,7 @@ export function RegisterForm() {
       await registerMutation.mutateAsync({
         username: values.username,
         email: values.email,
-        password: values.password
+        password: values.password,
       });
       navigate('/', { replace: true });
     } catch (error) {
@@ -86,14 +91,20 @@ export function RegisterForm() {
               hsl(var(--primary) / 0.3) 25%,
               hsl(var(--primary) / 0.5) 50%,
               hsl(var(--primary) / 0.3) 75%,
-              hsl(var(--primary) / 0.6) 100%)`
+              hsl(var(--primary) / 0.6) 100%)`,
           }}
         >
           {/* Glassmorphism card with backdrop-blur */}
           <div className="bg-card/70 backdrop-blur-xl shadow-2xl rounded-2xl px-8 py-6 relative overflow-hidden">
             {/* Multi-layer gradient backgrounds */}
-            <div className="absolute inset-0 bg-gradient-to-br from-primary/8 via-transparent to-primary/12 pointer-events-none" aria-hidden="true" />
-            <div className="absolute inset-0 bg-gradient-to-t from-background/20 via-transparent to-transparent pointer-events-none" aria-hidden="true" />
+            <div
+              className="absolute inset-0 bg-gradient-to-br from-primary/8 via-transparent to-primary/12 pointer-events-none"
+              aria-hidden="true"
+            />
+            <div
+              className="absolute inset-0 bg-gradient-to-t from-background/20 via-transparent to-transparent pointer-events-none"
+              aria-hidden="true"
+            />
 
             {/* Prismatic Light Glow */}
             <div
@@ -103,7 +114,7 @@ export function RegisterForm() {
                   ellipse 80% 60% at 50% 40%,
                   hsl(var(--primary) / var(--prismatic-glow-opacity)) 0%,
                   transparent 70%
-                )`
+                )`,
               }}
               aria-hidden="true"
             />
@@ -115,23 +126,26 @@ export function RegisterForm() {
 
             {/* Logo Section */}
             <div className="relative mb-6 flex flex-col items-center">
-            <div className="mb-4 w-24 h-24 flex items-center justify-center">
-              <img
-                src="/images/logo.png"
-                alt="Flashpoint Archive"
-                className="w-full h-full object-contain drop-shadow-lg"
-              />
+              <div className="mb-4 w-24 h-24 flex items-center justify-center">
+                <img
+                  src="/images/logo.png"
+                  alt="Flashpoint Archive"
+                  className="w-full h-full object-contain drop-shadow-lg"
+                />
+              </div>
+              <h1 className="text-3xl font-bold text-foreground text-center mb-2">
+                Registration Disabled
+              </h1>
+              <p className="text-sm text-muted-foreground text-center max-w-sm">
+                User registration is currently disabled. Please contact an administrator for access.
+              </p>
             </div>
-            <h1 className="text-3xl font-bold text-foreground text-center mb-2">
-              Registration Disabled
-            </h1>
-            <p className="text-sm text-muted-foreground text-center max-w-sm">
-              User registration is currently disabled. Please contact an administrator for access.
-            </p>
-          </div>
 
             <div className="relative text-center">
-              <Link to="/login" className="inline-flex items-center justify-center text-sm text-primary font-semibold hover:underline">
+              <Link
+                to="/login"
+                className="inline-flex items-center justify-center text-sm text-primary font-semibold hover:underline"
+              >
                 ← Back to Login
               </Link>
             </div>
@@ -152,14 +166,20 @@ export function RegisterForm() {
             hsl(var(--primary) / 0.3) 25%,
             hsl(var(--primary) / 0.5) 50%,
             hsl(var(--primary) / 0.3) 75%,
-            hsl(var(--primary) / 0.6) 100%)`
+            hsl(var(--primary) / 0.6) 100%)`,
         }}
       >
         {/* Glassmorphism card with backdrop-blur */}
         <div className="bg-card/70 backdrop-blur-xl shadow-2xl rounded-2xl px-8 py-6 relative overflow-hidden">
           {/* Multi-layer gradient backgrounds */}
-          <div className="absolute inset-0 bg-gradient-to-br from-primary/8 via-transparent to-primary/12 pointer-events-none" aria-hidden="true" />
-          <div className="absolute inset-0 bg-gradient-to-t from-background/20 via-transparent to-transparent pointer-events-none" aria-hidden="true" />
+          <div
+            className="absolute inset-0 bg-gradient-to-br from-primary/8 via-transparent to-primary/12 pointer-events-none"
+            aria-hidden="true"
+          />
+          <div
+            className="absolute inset-0 bg-gradient-to-t from-background/20 via-transparent to-transparent pointer-events-none"
+            aria-hidden="true"
+          />
 
           {/* Prismatic Light Glow */}
           <div
@@ -169,162 +189,161 @@ export function RegisterForm() {
                 ellipse 80% 60% at 50% 40%,
                 hsl(var(--primary) / var(--prismatic-glow-opacity)) 0%,
                 transparent 70%
-              )`
+              )`,
             }}
             aria-hidden="true"
           />
 
-        {/* Theme Toggle in top-right corner */}
-        <div className="absolute top-4 right-4 z-10">
-          <ThemePicker />
-        </div>
-
-        {/* Logo and Title Section */}
-        <div className="relative mb-6 flex flex-col items-center">
-          <div className="mb-4 w-24 h-24 flex items-center justify-center">
-            <img
-              src="/images/logo.png"
-              alt="Flashpoint Archive"
-              className="w-full h-full object-contain drop-shadow-lg"
-            />
+          {/* Theme Toggle in top-right corner */}
+          <div className="absolute top-4 right-4 z-10">
+            <ThemePicker />
           </div>
-          <h1 className="text-3xl font-bold text-foreground text-center mb-2">
-            Create Account
-          </h1>
-          <p className="text-sm text-muted-foreground text-center">
-            Join Flashpoint Archive today
-          </p>
-        </div>
 
-        {/* Maintenance Mode Notice */}
-        {publicSettings?.app?.maintenanceMode ? (
-          <Alert
-            className="mb-6 border-amber-500/50 bg-amber-500/10 text-amber-900 dark:text-amber-100"
-            role="alert"
-            aria-live="polite"
-          >
-            <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
-            <AlertDescription className="ml-2">
-              <strong className="font-semibold">Maintenance Mode:</strong>{' '}
-              {publicSettings?.app?.maintenanceMessage ||
-                'The system is currently under maintenance. Some features may be unavailable.'}
-            </AlertDescription>
-          </Alert>
-        ) : null}
-
-        {registerMutation.isError ? (
-          <Alert variant="destructive" className="mb-6">
-            <AlertDescription>
-              {getErrorMessage(registerMutation.error) || 'Registration failed. Please try again.'}
-            </AlertDescription>
-          </Alert>
-        ) : null}
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="relative space-y-4">
-            <FormField
-              control={form.control}
-              name="username"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-sm font-semibold">Username</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Choose a username"
-                      autoFocus
-                      className="h-10"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-sm font-semibold">Email</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="email"
-                      placeholder="you@example.com"
-                      className="h-10"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="password"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-sm font-semibold">Password</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="password"
-                      placeholder="Create a strong password"
-                      className="h-10"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="confirmPassword"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-sm font-semibold">Confirm Password</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="password"
-                      placeholder="Confirm your password"
-                      className="h-10"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="pt-2">
-              <Button
-                type="submit"
-                className="w-full h-10 text-base font-semibold shadow-md hover:shadow-lg transition-all"
-                disabled={registerMutation.isPending}
-              >
-                {registerMutation.isPending ? (
-                  <span className="flex items-center gap-2">
-                    <span className="inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-                    Creating account...
-                  </span>
-                ) : (
-                  'Create Account'
-                )}
-              </Button>
+          {/* Logo and Title Section */}
+          <div className="relative mb-6 flex flex-col items-center">
+            <div className="mb-4 w-24 h-24 flex items-center justify-center">
+              <img
+                src="/images/logo.png"
+                alt="Flashpoint Archive"
+                className="w-full h-full object-contain drop-shadow-lg"
+              />
             </div>
-          </form>
-        </Form>
+            <h1 className="text-3xl font-bold text-foreground text-center mb-2">Create Account</h1>
+            <p className="text-sm text-muted-foreground text-center">
+              Join Flashpoint Archive today
+            </p>
+          </div>
 
-        <div className="relative mt-4 pt-4 border-t border-border/50">
-          <p className="text-center text-sm text-muted-foreground">
-            Already have an account?{' '}
-            <Link to="/login" className="text-primary font-semibold hover:underline">
-              Sign in
-            </Link>
-          </p>
-        </div>
+          {/* Maintenance Mode Notice */}
+          {publicSettings?.app?.maintenanceMode ? (
+            <Alert
+              className="mb-6 border-amber-500/50 bg-amber-500/10 text-amber-900 dark:text-amber-100"
+              role="alert"
+              aria-live="polite"
+            >
+              <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+              <AlertDescription className="ml-2">
+                <strong className="font-semibold">Maintenance Mode:</strong>{' '}
+                {publicSettings?.app?.maintenanceMessage ||
+                  'The system is currently under maintenance. Some features may be unavailable.'}
+              </AlertDescription>
+            </Alert>
+          ) : null}
+
+          {registerMutation.isError ? (
+            <Alert variant="destructive" className="mb-6">
+              <AlertDescription>
+                {getErrorMessage(registerMutation.error) ||
+                  'Registration failed. Please try again.'}
+              </AlertDescription>
+            </Alert>
+          ) : null}
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="relative space-y-4">
+              <FormField
+                control={form.control}
+                name="username"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm font-semibold">Username</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Choose a username"
+                        autoFocus
+                        className="h-10"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm font-semibold">Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        placeholder="you@example.com"
+                        className="h-10"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm font-semibold">Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="Create a strong password"
+                        className="h-10"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="confirmPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm font-semibold">Confirm Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="Confirm your password"
+                        className="h-10"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="pt-2">
+                <Button
+                  type="submit"
+                  className="w-full h-10 text-base font-semibold shadow-md hover:shadow-lg transition-all"
+                  disabled={registerMutation.isPending}
+                >
+                  {registerMutation.isPending ? (
+                    <span className="flex items-center gap-2">
+                      <span className="inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                      Creating account...
+                    </span>
+                  ) : (
+                    'Create Account'
+                  )}
+                </Button>
+              </div>
+            </form>
+          </Form>
+
+          <div className="relative mt-4 pt-4 border-t border-border/50">
+            <p className="text-center text-sm text-muted-foreground">
+              Already have an account?{' '}
+              <Link to="/login" className="text-primary font-semibold hover:underline">
+                Sign in
+              </Link>
+            </p>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/common/Breadcrumbs.tsx b/frontend/src/components/common/Breadcrumbs.tsx
index 5222ce0..7c5f787 100644
--- a/frontend/src/components/common/Breadcrumbs.tsx
+++ b/frontend/src/components/common/Breadcrumbs.tsx
@@ -23,12 +23,12 @@ interface BreadcrumbsProps {
 export function Breadcrumbs({
   items,
   showHome = true,
-  homeLabel = "Home",
-  homeHref = "/",
-  className
+  homeLabel = 'Home',
+  homeHref = '/',
+  className,
 }: BreadcrumbsProps) {
   return (
-    <nav aria-label="Breadcrumb" className={cn("flex items-center gap-2 text-sm", className)}>
+    <nav aria-label="Breadcrumb" className={cn('flex items-center gap-2 text-sm', className)}>
       <ol className="flex items-center gap-2 flex-wrap">
         {showHome ? (
           <>
@@ -67,12 +67,10 @@ export function Breadcrumbs({
               ) : (
                 <span
                   className={cn(
-                    "max-w-[200px] truncate",
-                    isActive
-                      ? "text-foreground font-medium"
-                      : "text-muted-foreground"
+                    'max-w-[200px] truncate',
+                    isActive ? 'text-foreground font-medium' : 'text-muted-foreground'
                   )}
-                  aria-current={isActive ? "page" : undefined}
+                  aria-current={isActive ? 'page' : undefined}
                   title={item.label}
                 >
                   {item.label}
diff --git a/frontend/src/components/common/CardSizeControl.tsx b/frontend/src/components/common/CardSizeControl.tsx
index 1f9781d..2cadeac 100644
--- a/frontend/src/components/common/CardSizeControl.tsx
+++ b/frontend/src/components/common/CardSizeControl.tsx
@@ -3,19 +3,20 @@ import { Grid3x3, Grid2x2, LayoutGrid, List, Columns2, Columns3, Columns4 } from
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 
 export function CardSizeControl() {
-  const { viewMode, setViewMode, cardSize, setCardSize, listColumns, setListColumns } = useUIStore();
+  const { viewMode, setViewMode, cardSize, setCardSize, listColumns, setListColumns } =
+    useUIStore();
 
   const cardSizes: { value: CardSize; label: string; icon: typeof LayoutGrid }[] = [
     { value: 'small', label: 'Small', icon: Grid3x3 },
     { value: 'medium', label: 'Medium', icon: Grid2x2 },
-    { value: 'large', label: 'Large', icon: LayoutGrid }
+    { value: 'large', label: 'Large', icon: LayoutGrid },
   ];
 
   const columnOptions: { value: ListColumns; label: string; icon: typeof List }[] = [
     { value: 1, label: '1 Column', icon: List },
     { value: 2, label: '2 Columns', icon: Columns2 },
     { value: 3, label: '3 Columns', icon: Columns3 },
-    { value: 4, label: '4 Columns', icon: Columns4 }
+    { value: 4, label: '4 Columns', icon: Columns4 },
   ];
 
   return (
@@ -23,7 +24,11 @@ export function CardSizeControl() {
       {/* View Mode Toggle */}
       <div className="flex items-center gap-2">
         <span className="text-sm text-muted-foreground">View:</span>
-        <ToggleGroup type="single" value={viewMode} onValueChange={(value: string) => value && setViewMode(value as 'grid' | 'list')}>
+        <ToggleGroup
+          type="single"
+          value={viewMode}
+          onValueChange={(value: string) => value && setViewMode(value as 'grid' | 'list')}
+        >
           <ToggleGroupItem value="grid" aria-label="Grid view" className="gap-1.5">
             <LayoutGrid size={16} />
             <span className="hidden sm:inline">Grid</span>
@@ -39,9 +44,18 @@ export function CardSizeControl() {
       {viewMode === 'grid' ? (
         <div className="flex items-center gap-2">
           <span className="text-sm text-muted-foreground">Size:</span>
-          <ToggleGroup type="single" value={cardSize} onValueChange={(value: string) => value && setCardSize(value as CardSize)}>
+          <ToggleGroup
+            type="single"
+            value={cardSize}
+            onValueChange={(value: string) => value && setCardSize(value as CardSize)}
+          >
             {cardSizes.map(({ value, label, icon: Icon }) => (
-              <ToggleGroupItem key={value} value={value} aria-label={`${label} cards`} className="gap-1.5">
+              <ToggleGroupItem
+                key={value}
+                value={value}
+                aria-label={`${label} cards`}
+                className="gap-1.5"
+              >
                 <Icon size={16} />
                 <span className="hidden sm:inline">{label}</span>
               </ToggleGroupItem>
@@ -54,9 +68,20 @@ export function CardSizeControl() {
       {viewMode === 'list' ? (
         <div className="flex items-center gap-2">
           <span className="text-sm text-muted-foreground">Columns:</span>
-          <ToggleGroup type="single" value={listColumns.toString()} onValueChange={(value: string) => value && setListColumns(parseInt(value) as ListColumns)}>
+          <ToggleGroup
+            type="single"
+            value={listColumns.toString()}
+            onValueChange={(value: string) =>
+              value && setListColumns(parseInt(value) as ListColumns)
+            }
+          >
             {columnOptions.map(({ value, label, icon: Icon }) => (
-              <ToggleGroupItem key={value} value={value.toString()} aria-label={label} className="gap-1.5">
+              <ToggleGroupItem
+                key={value}
+                value={value.toString()}
+                aria-label={label}
+                className="gap-1.5"
+              >
                 <Icon size={16} />
                 <span className="hidden lg:inline">{value}</span>
               </ToggleGroupItem>
diff --git a/frontend/src/components/common/ConfirmDialog.tsx b/frontend/src/components/common/ConfirmDialog.tsx
index a9c7e35..debbeeb 100644
--- a/frontend/src/components/common/ConfirmDialog.tsx
+++ b/frontend/src/components/common/ConfirmDialog.tsx
@@ -97,10 +97,7 @@ export function ConfirmDialog({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel onClick={handleCancel}>{cancelText}</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={handleConfirm}
-            className={getButtonClassName()}
-          >
+          <AlertDialogAction onClick={handleConfirm} className={getButtonClassName()}>
             {confirmText}
           </AlertDialogAction>
         </AlertDialogFooter>
diff --git a/frontend/src/components/common/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary.tsx
index 9f721d8..de7b331 100644
--- a/frontend/src/components/common/ErrorBoundary.tsx
+++ b/frontend/src/components/common/ErrorBoundary.tsx
@@ -25,7 +25,7 @@ export class ErrorBoundary extends Component<Props, State> {
     this.state = {
       hasError: false,
       error: null,
-      errorInfo: null
+      errorInfo: null,
     };
   }
 
@@ -46,7 +46,7 @@ export class ErrorBoundary extends Component<Props, State> {
     // Store error info in state
     this.setState({
       error,
-      errorInfo
+      errorInfo,
     });
   }
 
@@ -55,7 +55,7 @@ export class ErrorBoundary extends Component<Props, State> {
     this.setState({
       hasError: false,
       error: null,
-      errorInfo: null
+      errorInfo: null,
     });
   };
 
@@ -105,17 +105,11 @@ export class ErrorBoundary extends Component<Props, State> {
 
             {/* Action buttons */}
             <div className="flex gap-3">
-              <Button
-                variant="default"
-                onClick={this.handleReset}
-              >
+              <Button variant="default" onClick={this.handleReset}>
                 <RefreshCw size={18} className="mr-2" />
                 Try Again
               </Button>
-              <Button
-                variant="secondary"
-                onClick={this.handleGoHome}
-              >
+              <Button variant="secondary" onClick={this.handleGoHome}>
                 <Home size={18} className="mr-2" />
                 Go to Home
               </Button>
@@ -123,9 +117,7 @@ export class ErrorBoundary extends Component<Props, State> {
 
             {/* Additional help text */}
             <div className="mt-6 pt-6 border-t border-border">
-              <p className="text-sm text-gray-400">
-                If this problem persists, please try:
-              </p>
+              <p className="text-sm text-gray-400">If this problem persists, please try:</p>
               <ul className="mt-2 space-y-1 text-sm text-gray-400 list-disc list-inside">
                 <li>Refreshing the page</li>
                 <li>Clearing your browser cache</li>
diff --git a/frontend/src/components/common/FavoriteButton.tsx b/frontend/src/components/common/FavoriteButton.tsx
index eed3584..e936fa5 100644
--- a/frontend/src/components/common/FavoriteButton.tsx
+++ b/frontend/src/components/common/FavoriteButton.tsx
@@ -1,16 +1,16 @@
-import { Heart } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useToggleFavorite } from "@/hooks/useFavorites";
-import { useAuthStore } from "@/store/auth";
-import { useFeatureFlags } from "@/hooks/useFeatureFlags";
-import { toast } from "sonner";
-import { getErrorMessage } from "@/types/api-error";
+import { Heart } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useToggleFavorite } from '@/hooks/useFavorites';
+import { useAuthStore } from '@/store/auth';
+import { useFeatureFlags } from '@/hooks/useFeatureFlags';
+import { toast } from 'sonner';
+import { getErrorMessage } from '@/types/api-error';
 
 interface FavoriteButtonProps {
   gameId: string;
   isFavorited: boolean; // Required: parent must provide this from useFavoriteGameIds()
-  size?: "sm" | "default" | "lg" | "icon";
-  variant?: "default" | "secondary" | "ghost" | "outline" | "destructive";
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  variant?: 'default' | 'secondary' | 'ghost' | 'outline' | 'destructive';
   className?: string;
   showOnHoverOnly?: boolean;
   showLabel?: boolean;
@@ -19,11 +19,11 @@ interface FavoriteButtonProps {
 export function FavoriteButton({
   gameId,
   isFavorited,
-  size = "sm",
+  size = 'sm',
   variant,
-  className = "",
+  className = '',
   showOnHoverOnly = false,
-  showLabel = false
+  showLabel = false,
 }: FavoriteButtonProps) {
   const { isAuthenticated } = useAuthStore();
   const { enableFavorites } = useFeatureFlags();
@@ -34,21 +34,17 @@ export function FavoriteButton({
     e.stopPropagation();
 
     if (!isAuthenticated) {
-      toast.error("Please log in to add favorites");
+      toast.error('Please log in to add favorites');
       return;
     }
 
     toggleFavorite.mutate(gameId, {
       onSuccess: (newIsFavorited) => {
-        toast.success(
-          newIsFavorited
-            ? "Added to favorites"
-            : "Removed from favorites"
-        );
+        toast.success(newIsFavorited ? 'Added to favorites' : 'Removed from favorites');
       },
       onError: (error: unknown) => {
-        toast.error(getErrorMessage(error) || "Failed to toggle favorite");
-      }
+        toast.error(getErrorMessage(error) || 'Failed to toggle favorite');
+      },
     });
   };
 
@@ -56,12 +52,12 @@ export function FavoriteButton({
     return null;
   }
 
-  const buttonVariant = variant || (isFavorited ? "default" : "secondary");
+  const buttonVariant = variant || (isFavorited ? 'default' : 'secondary');
   const opacityClass = showOnHoverOnly
-    ? "opacity-0 group-hover:opacity-100"
+    ? 'opacity-0 group-hover:opacity-100'
     : isFavorited
-      ? "opacity-100"
-      : "opacity-0 group-hover:opacity-100";
+      ? 'opacity-100'
+      : 'opacity-0 group-hover:opacity-100';
 
   return (
     <Button
@@ -70,20 +66,16 @@ export function FavoriteButton({
       onClick={handleToggle}
       disabled={toggleFavorite.isPending}
       className={`backdrop-blur-sm transition-opacity ${opacityClass} ${className}`}
-      title={isFavorited ? "Remove from Favorites" : "Add to Favorites"}
-      aria-label={isFavorited ? "Remove from Favorites" : "Add to Favorites"}
+      title={isFavorited ? 'Remove from Favorites' : 'Add to Favorites'}
+      aria-label={isFavorited ? 'Remove from Favorites' : 'Add to Favorites'}
     >
       <Heart
-        size={size === "sm" ? 14 : 16}
-        fill={isFavorited ? "currentColor" : "none"}
-        className={toggleFavorite.isPending ? "animate-pulse" : ""}
+        size={size === 'sm' ? 14 : 16}
+        fill={isFavorited ? 'currentColor' : 'none'}
+        className={toggleFavorite.isPending ? 'animate-pulse' : ''}
         aria-hidden="true"
       />
-      {showLabel ? (
-        <span className="ml-2">
-          {isFavorited ? "Favorited" : "Favorite"}
-        </span>
-      ) : null}
+      {showLabel ? <span className="ml-2">{isFavorited ? 'Favorited' : 'Favorite'}</span> : null}
     </Button>
   );
 }
diff --git a/frontend/src/components/common/LazyImage.tsx b/frontend/src/components/common/LazyImage.tsx
index 32a2f13..404373d 100644
--- a/frontend/src/components/common/LazyImage.tsx
+++ b/frontend/src/components/common/LazyImage.tsx
@@ -81,7 +81,7 @@ export function LazyImage({
       },
       {
         rootMargin,
-        threshold
+        threshold,
       }
     );
 
@@ -152,7 +152,7 @@ export function LazyImage({
           'opacity-0': !isLoaded && blurPlaceholder,
           'opacity-100': isLoaded || !blurPlaceholder,
           'blur-sm': !isLoaded && blurPlaceholder && placeholder,
-          'blur-none': isLoaded || !blurPlaceholder
+          'blur-none': isLoaded || !blurPlaceholder,
         },
         className
       )}
@@ -172,7 +172,7 @@ export function LazyBackgroundImage({
   rootMargin = '50px',
   threshold = 0.01,
   onLoad,
-  onError
+  onError,
 }: {
   src: string;
   children?: React.ReactNode;
diff --git a/frontend/src/components/common/MobileWarningDialog.tsx b/frontend/src/components/common/MobileWarningDialog.tsx
index 1c19cc4..05126f2 100644
--- a/frontend/src/components/common/MobileWarningDialog.tsx
+++ b/frontend/src/components/common/MobileWarningDialog.tsx
@@ -65,8 +65,8 @@ export function MobileWarningDialog() {
                   Best Experience on PC
                 </p>
                 <p className="text-sm text-yellow-800 dark:text-yellow-200">
-                  This web application is optimized for desktop computers.
-                  Flash and HTML5 games may not work properly on mobile devices.
+                  This web application is optimized for desktop computers. Flash and HTML5 games may
+                  not work properly on mobile devices.
                 </p>
               </div>
             </div>
diff --git a/frontend/src/components/common/NetworkStatusIndicator.tsx b/frontend/src/components/common/NetworkStatusIndicator.tsx
index 342bb34..ae93144 100644
--- a/frontend/src/components/common/NetworkStatusIndicator.tsx
+++ b/frontend/src/components/common/NetworkStatusIndicator.tsx
@@ -43,7 +43,8 @@ export function NetworkStatusIndicator() {
 
     const checkNetworkSpeed = () => {
       if (navigator.onLine) {
-        const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+        const connection =
+          navigator.connection || navigator.mozConnection || navigator.webkitConnection;
 
         if (connection) {
           // Use Network Information API if available
@@ -96,7 +97,7 @@ export function NetworkStatusIndicator() {
           <Badge
             variant={status === 'offline' ? 'destructive' : 'default'}
             className={cn(
-              "flex items-center gap-2",
+              'flex items-center gap-2',
               status === 'slow' && 'bg-yellow-600 hover:bg-yellow-600'
             )}
           >
@@ -107,7 +108,8 @@ export function NetworkStatusIndicator() {
             )}
             <span>
               {status === 'offline' && 'No internet connection. Please check your network.'}
-              {status === 'slow' && 'Slow network detected. Some features may be slower than usual.'}
+              {status === 'slow' &&
+                'Slow network detected. Some features may be slower than usual.'}
             </span>
           </Badge>
         </div>
diff --git a/frontend/src/components/common/RemoveFavoriteButton.tsx b/frontend/src/components/common/RemoveFavoriteButton.tsx
index d7af97a..c523230 100644
--- a/frontend/src/components/common/RemoveFavoriteButton.tsx
+++ b/frontend/src/components/common/RemoveFavoriteButton.tsx
@@ -1,21 +1,21 @@
-import { HeartOff } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useToggleFavorite } from "@/hooks/useFavorites";
-import { toast } from "sonner";
-import { getErrorMessage } from "@/types/api-error";
+import { HeartOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useToggleFavorite } from '@/hooks/useFavorites';
+import { toast } from 'sonner';
+import { getErrorMessage } from '@/types/api-error';
 
 interface RemoveFavoriteButtonProps {
   gameId: string;
-  size?: "sm" | "default" | "lg" | "icon";
+  size?: 'sm' | 'default' | 'lg' | 'icon';
   className?: string;
   showLabel?: boolean;
 }
 
 export function RemoveFavoriteButton({
   gameId,
-  size = "sm",
-  className = "",
-  showLabel = false
+  size = 'sm',
+  className = '',
+  showLabel = false,
 }: RemoveFavoriteButtonProps) {
   const toggleFavorite = useToggleFavorite();
 
@@ -25,11 +25,11 @@ export function RemoveFavoriteButton({
 
     toggleFavorite.mutate(gameId, {
       onSuccess: () => {
-        toast.success("Removed from favorites");
+        toast.success('Removed from favorites');
       },
       onError: (error: unknown) => {
-        toast.error(getErrorMessage(error) || "Failed to remove favorite");
-      }
+        toast.error(getErrorMessage(error) || 'Failed to remove favorite');
+      },
     });
   };
 
@@ -44,8 +44,8 @@ export function RemoveFavoriteButton({
       aria-label="Remove from Favorites"
     >
       <HeartOff
-        size={size === "sm" ? 14 : 16}
-        className={toggleFavorite.isPending ? "animate-pulse" : ""}
+        size={size === 'sm' ? 14 : 16}
+        className={toggleFavorite.isPending ? 'animate-pulse' : ''}
         aria-hidden="true"
       />
       {showLabel && <span className="ml-2">Remove</span>}
diff --git a/frontend/src/components/common/RoleGuard.tsx b/frontend/src/components/common/RoleGuard.tsx
index 8872c0a..0c11aea 100644
--- a/frontend/src/components/common/RoleGuard.tsx
+++ b/frontend/src/components/common/RoleGuard.tsx
@@ -21,7 +21,7 @@ export function RoleGuard({
   permissions,
   requireAllPermissions = false,
   role,
-  fallback = null
+  fallback = null,
 }: RoleGuardProps) {
   const { hasPermission, hasAnyPermission, hasAllPermissions, hasRole } = useAuthStore();
 
diff --git a/frontend/src/components/dialogs/GamePlayerDialog.tsx b/frontend/src/components/dialogs/GamePlayerDialog.tsx
index 9d0e221..3985d11 100644
--- a/frontend/src/components/dialogs/GamePlayerDialog.tsx
+++ b/frontend/src/components/dialogs/GamePlayerDialog.tsx
@@ -1,8 +1,5 @@
 import { GamePlayer } from '@/components/player';
-import {
-  Dialog,
-  DialogContent,
-} from '@/components/ui/dialog';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
 
 export interface GamePlayerDialogProps {
   /** Whether the dialog is open */
diff --git a/frontend/src/components/error/ErrorPage.tsx b/frontend/src/components/error/ErrorPage.tsx
index e7f6a1f..75e05d8 100644
--- a/frontend/src/components/error/ErrorPage.tsx
+++ b/frontend/src/components/error/ErrorPage.tsx
@@ -1,7 +1,14 @@
 import { ReactNode, useState } from 'react';
 import { logger } from '@/lib/logger';
 import { useNavigate } from 'react-router-dom';
-import { FileQuestion, AlertCircle, WifiOff, ShieldAlert, ChevronDown, ChevronUp } from 'lucide-react';
+import {
+  FileQuestion,
+  AlertCircle,
+  WifiOff,
+  ShieldAlert,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -138,11 +145,7 @@ export function ErrorPage({
             <div className="space-y-2">
               <div className="flex items-center justify-center gap-2">
                 <CardTitle className="text-2xl font-bold">{displayTitle}</CardTitle>
-                {errorCode ? (
-                  <Badge variant={config.badgeVariant}>
-                    {errorCode}
-                  </Badge>
-                ) : null}
+                {errorCode ? <Badge variant={config.badgeVariant}>{errorCode}</Badge> : null}
               </div>
               <p className="text-muted-foreground">{displayMessage}</p>
             </div>
@@ -209,9 +212,7 @@ export function ErrorPage({
                 </Button>
               ) : null}
               {hasReported ? (
-                <span className="text-sm text-muted-foreground">
-                  ✓ Error reported successfully
-                </span>
+                <span className="text-sm text-muted-foreground">✓ Error reported successfully</span>
               ) : null}
             </>
           )}
diff --git a/frontend/src/components/error/ErrorReporter.ts b/frontend/src/components/error/ErrorReporter.ts
index 09514de..9e0ff52 100644
--- a/frontend/src/components/error/ErrorReporter.ts
+++ b/frontend/src/components/error/ErrorReporter.ts
@@ -7,20 +7,18 @@ import { useAuthStore } from '@/store/auth';
 const errorReportingApi = axios.create({
   baseURL: '/api',
   headers: {
-    'Content-Type': 'application/json'
-  }
+    'Content-Type': 'application/json',
+  },
 });
 
 // Add auth token to error reporting requests
-errorReportingApi.interceptors.request.use(
-  (config) => {
-    const token = useAuthStore.getState().accessToken;
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
+errorReportingApi.interceptors.request.use((config) => {
+  const token = useAuthStore.getState().accessToken;
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
   }
-);
+  return config;
+});
 
 const ERROR_QUEUE_KEY = 'flashpoint-error-queue';
 const MAX_QUEUE_SIZE = 10;
diff --git a/frontend/src/components/error/GameLibraryErrorBoundary.tsx b/frontend/src/components/error/GameLibraryErrorBoundary.tsx
index c5141c8..34a88f5 100644
--- a/frontend/src/components/error/GameLibraryErrorBoundary.tsx
+++ b/frontend/src/components/error/GameLibraryErrorBoundary.tsx
@@ -29,7 +29,7 @@ export class GameLibraryErrorBoundary extends Component<Props, State> {
       hasError: false,
       error: null,
       retryCount: 0,
-      isRetrying: false
+      isRetrying: false,
     };
   }
 
@@ -57,11 +57,11 @@ export class GameLibraryErrorBoundary extends Component<Props, State> {
       'connection',
       'aborted',
       'ECONNREFUSED',
-      'ETIMEDOUT'
+      'ETIMEDOUT',
     ];
 
     const errorMessage = error.message.toLowerCase();
-    return transientKeywords.some(keyword => errorMessage.includes(keyword));
+    return transientKeywords.some((keyword) => errorMessage.includes(keyword));
   }
 
   /**
@@ -75,11 +75,11 @@ export class GameLibraryErrorBoundary extends Component<Props, State> {
     setTimeout(() => {
       logger.info(`Attempting automatic retry ${this.state.retryCount + 1}/${this.maxRetries}`);
 
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         hasError: false,
         error: null,
         retryCount: prevState.retryCount + 1,
-        isRetrying: false
+        isRetrying: false,
       }));
 
       // Call custom retry handler if provided
@@ -96,7 +96,7 @@ export class GameLibraryErrorBoundary extends Component<Props, State> {
       hasError: false,
       error: null,
       retryCount: 0,
-      isRetrying: false
+      isRetrying: false,
     });
 
     if (this.props.onRetry) {
@@ -139,7 +139,8 @@ export class GameLibraryErrorBoundary extends Component<Props, State> {
             {this.state.retryCount > 0 && !this.state.isRetrying ? (
               <div className="mb-6 p-4 bg-blue-500/10 rounded-lg border border-blue-500/20">
                 <p className="text-sm text-blue-400">
-                  Attempted {this.state.retryCount} automatic {this.state.retryCount === 1 ? 'retry' : 'retries'}
+                  Attempted {this.state.retryCount} automatic{' '}
+                  {this.state.retryCount === 1 ? 'retry' : 'retries'}
                 </p>
               </div>
             ) : null}
@@ -168,9 +169,7 @@ export class GameLibraryErrorBoundary extends Component<Props, State> {
 
             {/* Help text */}
             <div className="mt-6 pt-6 border-t border-border">
-              <p className="text-sm text-muted-foreground">
-                If this problem persists, try:
-              </p>
+              <p className="text-sm text-muted-foreground">If this problem persists, try:</p>
               <ul className="mt-2 space-y-1 text-sm text-muted-foreground list-disc list-inside">
                 <li>Checking your internet connection</li>
                 <li>Refreshing the page (F5)</li>
diff --git a/frontend/src/components/error/GamePlayerErrorBoundary.tsx b/frontend/src/components/error/GamePlayerErrorBoundary.tsx
index 103ab1e..e228f57 100644
--- a/frontend/src/components/error/GamePlayerErrorBoundary.tsx
+++ b/frontend/src/components/error/GamePlayerErrorBoundary.tsx
@@ -31,7 +31,7 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
       hasError: false,
       error: null,
       retryCount: 0,
-      isRetrying: false
+      isRetrying: false,
     };
   }
 
@@ -50,11 +50,11 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
 
     // Small delay to give visual feedback
     setTimeout(() => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         hasError: false,
         error: null,
         retryCount: prevState.retryCount + 1,
-        isRetrying: false
+        isRetrying: false,
       }));
 
       if (this.props.onRetry) {
@@ -80,14 +80,14 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
     const commonTips = [
       'Check your internet connection',
       'Try refreshing the page',
-      'Clear your browser cache'
+      'Clear your browser cache',
     ];
 
     if (platform === 'Flash') {
       return [
         'Ensure Ruffle emulator is loaded correctly',
         'Flash content may have compatibility issues',
-        ...commonTips
+        ...commonTips,
       ];
     }
 
@@ -95,7 +95,7 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
       return [
         'Check browser console for JavaScript errors',
         'Try a different browser',
-        ...commonTips
+        ...commonTips,
       ];
     }
 
@@ -115,9 +115,7 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
                 <AlertTriangle className="w-8 h-8 text-destructive" />
               </div>
               <div className="flex-1">
-                <h2 className="text-2xl font-bold text-foreground mb-2">
-                  Game Player Error
-                </h2>
+                <h2 className="text-2xl font-bold text-foreground mb-2">Game Player Error</h2>
                 <p className="text-muted-foreground">
                   {this.props.gameTitle
                     ? `Failed to load "${this.props.gameTitle}"`
@@ -143,7 +141,8 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
                 {this.state.error.message.includes('Failed to fetch') ? (
                   <div className="mt-3 p-3 bg-yellow-500/10 rounded border border-yellow-500/20">
                     <p className="text-sm text-yellow-400">
-                      <strong>Network Error:</strong> Unable to download game files. Check your internet connection.
+                      <strong>Network Error:</strong> Unable to download game files. Check your
+                      internet connection.
                     </p>
                   </div>
                 ) : null}
@@ -151,7 +150,8 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
                 {this.state.error.message.includes('404') ? (
                   <div className="mt-3 p-3 bg-yellow-500/10 rounded border border-yellow-500/20">
                     <p className="text-sm text-yellow-400">
-                      <strong>File Not Found:</strong> Game files may be missing or not downloaded yet.
+                      <strong>File Not Found:</strong> Game files may be missing or not downloaded
+                      yet.
                     </p>
                   </div>
                 ) : null}
@@ -159,7 +159,8 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
                 {this.props.platform === 'Flash' && this.state.error.message.includes('Ruffle') ? (
                   <div className="mt-3 p-3 bg-blue-500/10 rounded border border-blue-500/20">
                     <p className="text-sm text-blue-400">
-                      <strong>Ruffle Error:</strong> The Flash emulator encountered an issue. Try refreshing the page.
+                      <strong>Ruffle Error:</strong> The Flash emulator encountered an issue. Try
+                      refreshing the page.
                     </p>
                   </div>
                 ) : null}
@@ -170,7 +171,8 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
             {this.state.retryCount > 0 && !this.state.isRetrying ? (
               <div className="mb-6 p-4 bg-blue-500/10 rounded-lg border border-blue-500/20">
                 <p className="text-sm text-blue-400">
-                  Attempted {this.state.retryCount} {this.state.retryCount === 1 ? 'retry' : 'retries'}
+                  Attempted {this.state.retryCount}{' '}
+                  {this.state.retryCount === 1 ? 'retry' : 'retries'}
                 </p>
               </div>
             ) : null}
@@ -193,10 +195,7 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
                   Retrying...
                 </Button>
               ) : null}
-              <Button
-                variant="secondary"
-                onClick={this.handleBack}
-              >
+              <Button variant="secondary" onClick={this.handleBack}>
                 <ArrowLeft size={18} className="mr-2" />
                 Go Back
               </Button>
@@ -204,9 +203,7 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
 
             {/* Troubleshooting tips */}
             <div className="pt-6 border-t border-border">
-              <h3 className="text-sm font-semibold text-foreground mb-3">
-                Troubleshooting Tips:
-              </h3>
+              <h3 className="text-sm font-semibold text-foreground mb-3">Troubleshooting Tips:</h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
                 {troubleshootingTips.map((tip, index) => (
                   <li key={index} className="flex items-start gap-2">
@@ -222,7 +219,8 @@ export class GamePlayerErrorBoundary extends Component<Props, State> {
                   <p className="text-sm text-blue-400 flex items-start gap-2">
                     <Download size={16} className="mt-0.5 flex-shrink-0" />
                     <span>
-                      This game may not be playable in the browser. Consider using the Flashpoint Launcher to download and play it.
+                      This game may not be playable in the browser. Consider using the Flashpoint
+                      Launcher to download and play it.
                     </span>
                   </p>
                 </div>
diff --git a/frontend/src/components/error/PlaylistErrorBoundary.tsx b/frontend/src/components/error/PlaylistErrorBoundary.tsx
index 2997cf6..efa86de 100644
--- a/frontend/src/components/error/PlaylistErrorBoundary.tsx
+++ b/frontend/src/components/error/PlaylistErrorBoundary.tsx
@@ -28,7 +28,7 @@ export class PlaylistErrorBoundary extends Component<Props, State> {
     this.state = {
       hasError: false,
       error: null,
-      retryCount: 0
+      retryCount: 0,
     };
   }
 
@@ -43,10 +43,10 @@ export class PlaylistErrorBoundary extends Component<Props, State> {
   handleRetry = (): void => {
     logger.info('Retrying playlist operation');
 
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       hasError: false,
       error: null,
-      retryCount: prevState.retryCount + 1
+      retryCount: prevState.retryCount + 1,
     }));
 
     if (this.props.onRetry) {
@@ -74,9 +74,7 @@ export class PlaylistErrorBoundary extends Component<Props, State> {
                 <AlertTriangle className="w-8 h-8 text-destructive" />
               </div>
               <div className="flex-1">
-                <h2 className="text-2xl font-bold text-foreground mb-2">
-                  Playlist Error
-                </h2>
+                <h2 className="text-2xl font-bold text-foreground mb-2">Playlist Error</h2>
                 <p className="text-muted-foreground">
                   {this.props.playlistTitle
                     ? `Failed to load playlist "${this.props.playlistTitle}"`
@@ -111,7 +109,8 @@ export class PlaylistErrorBoundary extends Component<Props, State> {
             {this.state.retryCount > 0 ? (
               <div className="mb-6 p-4 bg-blue-500/10 rounded-lg border border-blue-500/20">
                 <p className="text-sm text-blue-400">
-                  Attempted {this.state.retryCount} {this.state.retryCount === 1 ? 'retry' : 'retries'}
+                  Attempted {this.state.retryCount}{' '}
+                  {this.state.retryCount === 1 ? 'retry' : 'retries'}
                 </p>
               </div>
             ) : null}
@@ -119,18 +118,12 @@ export class PlaylistErrorBoundary extends Component<Props, State> {
             {/* Action buttons */}
             <div className="flex gap-3">
               {canRetry ? (
-                <Button
-                  variant="default"
-                  onClick={this.handleRetry}
-                >
+                <Button variant="default" onClick={this.handleRetry}>
                   <RefreshCw size={18} className="mr-2" />
                   Try Again
                 </Button>
               ) : null}
-              <Button
-                variant="secondary"
-                onClick={this.handleBack}
-              >
+              <Button variant="secondary" onClick={this.handleBack}>
                 <ArrowLeft size={18} className="mr-2" />
                 Go Back
               </Button>
@@ -138,9 +131,7 @@ export class PlaylistErrorBoundary extends Component<Props, State> {
 
             {/* Help text */}
             <div className="mt-6 pt-6 border-t border-border">
-              <p className="text-sm text-muted-foreground">
-                Troubleshooting tips:
-              </p>
+              <p className="text-sm text-muted-foreground">Troubleshooting tips:</p>
               <ul className="mt-2 space-y-1 text-sm text-muted-foreground list-disc list-inside">
                 <li>Verify the playlist still exists</li>
                 <li>Check your internet connection</li>
diff --git a/frontend/src/components/jobs/JobCard.tsx b/frontend/src/components/jobs/JobCard.tsx
index 30e757c..a50b169 100644
--- a/frontend/src/components/jobs/JobCard.tsx
+++ b/frontend/src/components/jobs/JobCard.tsx
@@ -1,26 +1,12 @@
-import { JobStatusEnriched } from "@/types/jobs";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardFooter,
-} from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Switch } from "@/components/ui/switch";
-import {
-  Square,
-  Zap,
-  Eye,
-  CheckCircle,
-  XCircle,
-  Loader2,
-  Settings,
-} from "lucide-react";
-import { JobScheduleDisplay } from "./JobScheduleDisplay";
-import { formatDuration } from "@/lib/cron-utils";
-import { formatDistanceToNow } from "date-fns";
+import { JobStatusEnriched } from '@/types/jobs';
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Square, Zap, Eye, CheckCircle, XCircle, Loader2, Settings } from 'lucide-react';
+import { JobScheduleDisplay } from './JobScheduleDisplay';
+import { formatDuration } from '@/lib/cron-utils';
+import { formatDistanceToNow } from 'date-fns';
 
 interface JobCardProps {
   job: JobStatusEnriched;
@@ -45,13 +31,13 @@ export function JobCard({
     if (!job.lastExecution) return <Badge variant="outline">Never run</Badge>;
 
     const { status } = job.lastExecution;
-    if (status === "success") {
+    if (status === 'success') {
       return (
         <Badge variant="default" className="bg-green-600 gap-1">
           <CheckCircle size={12} /> Success
         </Badge>
       );
-    } else if (status === "failed") {
+    } else if (status === 'failed') {
       return (
         <Badge variant="destructive" className="gap-1">
           <XCircle size={12} /> Failed
@@ -79,9 +65,7 @@ export function JobCard({
             <Switch
               id={`job-enabled-${job.id}`}
               checked={job.enabled}
-              onCheckedChange={(checked: boolean) =>
-                onToggleEnabled(job.id, checked)
-              }
+              onCheckedChange={(checked: boolean) => onToggleEnabled(job.id, checked)}
               disabled={disabled || job.running}
             />
           </div>
@@ -102,9 +86,7 @@ export function JobCard({
 
         {/* Schedule */}
         <div>
-          <p className="text-xs font-semibold text-muted-foreground uppercase mb-1">
-            Schedule
-          </p>
+          <p className="text-xs font-semibold text-muted-foreground uppercase mb-1">Schedule</p>
           <JobScheduleDisplay cronSchedule={job.cronSchedule} />
         </div>
 
@@ -135,79 +117,45 @@ export function JobCard({
               ) : null}
               {job.lastExecution.message ? (
                 <div className="mt-2 text-xs space-y-1">
-                  {job.lastExecution.message.includes("Games updated") ? (
+                  {job.lastExecution.message.includes('Games updated') ? (
                     // Parse metadata sync result
                     <div className="bg-muted/50 rounded p-2 space-y-0.5">
-                      {job.lastExecution.message.match(
-                        /Games updated: (\d+)/,
-                      ) ? (
+                      {job.lastExecution.message.match(/Games updated: (\d+)/) ? (
                         <div className="flex justify-between">
-                          <span className="text-muted-foreground">
-                            Games updated:
-                          </span>
+                          <span className="text-muted-foreground">Games updated:</span>
                           <span className="font-medium">
-                            {
-                              job.lastExecution.message.match(
-                                /Games updated: (\d+)/,
-                              )?.[1]
-                            }
+                            {job.lastExecution.message.match(/Games updated: (\d+)/)?.[1]}
                           </span>
                         </div>
                       ) : null}
-                      {job.lastExecution.message.match(
-                        /Tags updated: (\d+)/,
-                      ) ? (
+                      {job.lastExecution.message.match(/Tags updated: (\d+)/) ? (
                         <div className="flex justify-between">
-                          <span className="text-muted-foreground">
-                            Tags updated:
-                          </span>
+                          <span className="text-muted-foreground">Tags updated:</span>
                           <span className="font-medium">
-                            {
-                              job.lastExecution.message.match(
-                                /Tags updated: (\d+)/,
-                              )?.[1]
-                            }
+                            {job.lastExecution.message.match(/Tags updated: (\d+)/)?.[1]}
                           </span>
                         </div>
                       ) : null}
-                      {job.lastExecution.message.match(
-                        /Platforms updated: (\d+)/,
-                      ) ? (
+                      {job.lastExecution.message.match(/Platforms updated: (\d+)/) ? (
                         <div className="flex justify-between">
-                          <span className="text-muted-foreground">
-                            Platforms updated:
-                          </span>
+                          <span className="text-muted-foreground">Platforms updated:</span>
                           <span className="font-medium">
-                            {
-                              job.lastExecution.message.match(
-                                /Platforms updated: (\d+)/,
-                              )?.[1]
-                            }
+                            {job.lastExecution.message.match(/Platforms updated: (\d+)/)?.[1]}
                           </span>
                         </div>
                       ) : null}
-                      {job.lastExecution.message.match(
-                        /Games deleted: (\d+)/,
-                      ) ? (
+                      {job.lastExecution.message.match(/Games deleted: (\d+)/) ? (
                         <div className="flex justify-between">
-                          <span className="text-muted-foreground">
-                            Games deleted:
-                          </span>
+                          <span className="text-muted-foreground">Games deleted:</span>
                           <span className="font-medium">
-                            {
-                              job.lastExecution.message.match(
-                                /Games deleted: (\d+)/,
-                              )?.[1]
-                            }
+                            {job.lastExecution.message.match(/Games deleted: (\d+)/)?.[1]}
                           </span>
                         </div>
                       ) : null}
                     </div>
                   ) : (
                     // Display as plain text for other messages
-                    <p className="text-muted-foreground">
-                      {job.lastExecution.message}
-                    </p>
+                    <p className="text-muted-foreground">{job.lastExecution.message}</p>
                   )}
                 </div>
               ) : null}
@@ -220,9 +168,7 @@ export function JobCard({
         {/* Next Run */}
         {job.enabled && job.nextRunEstimate && !job.running ? (
           <div>
-            <p className="text-xs font-semibold text-muted-foreground uppercase mb-1">
-              Next Run
-            </p>
+            <p className="text-xs font-semibold text-muted-foreground uppercase mb-1">Next Run</p>
             <p className="text-sm">
               {formatDistanceToNow(new Date(job.nextRunEstimate), {
                 addSuffix: true,
@@ -235,12 +181,7 @@ export function JobCard({
       {/* FOOTER: Action Buttons */}
       <CardFooter className="flex gap-2 pt-4 border-t flex-wrap flex-shrink-0">
         {job.running ? (
-          <Button
-            onClick={() => onStop(job.id)}
-            variant="outline"
-            size="sm"
-            disabled={disabled}
-          >
+          <Button onClick={() => onStop(job.id)} variant="outline" size="sm" disabled={disabled}>
             <Square size={16} className="mr-1" />
             Stop
           </Button>
diff --git a/frontend/src/components/jobs/JobEditDialog.tsx b/frontend/src/components/jobs/JobEditDialog.tsx
index 0b37a4e..410ff2b 100644
--- a/frontend/src/components/jobs/JobEditDialog.tsx
+++ b/frontend/src/components/jobs/JobEditDialog.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { JobStatusEnriched } from "@/types/jobs";
+import { useState, useEffect } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { JobStatusEnriched } from '@/types/jobs';
 import {
   Dialog,
   DialogContent,
@@ -8,13 +8,13 @@ import {
   DialogTitle,
   DialogBody,
   DialogFooter,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Info, Settings, AlertCircle } from "lucide-react";
-import { systemSettingsApi } from "@/lib/api";
-import { useDialog } from "@/contexts/DialogContext";
-import { cronToReadable, isValidCron } from "@/lib/cron-utils";
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Info, Settings, AlertCircle } from 'lucide-react';
+import { systemSettingsApi } from '@/lib/api';
+import { useDialog } from '@/contexts/DialogContext';
+import { cronToReadable, isValidCron } from '@/lib/cron-utils';
 
 interface JobEditDialogProps {
   job: JobStatusEnriched | null;
@@ -26,20 +26,18 @@ export function JobEditDialog({ job, open, onOpenChange }: JobEditDialogProps) {
   const { showToast } = useDialog();
   const queryClient = useQueryClient();
 
-  const [cronSchedule, setCronSchedule] = useState(
-    job?.cronSchedule || "0 * * * *",
-  );
+  const [cronSchedule, setCronSchedule] = useState(job?.cronSchedule || '0 * * * *');
   const [validationError, setValidationError] = useState<string | null>(null);
 
   // Validate cron expression
   const validateCronExpression = (cron: string) => {
     if (!cron.trim()) {
-      setValidationError("Cron expression is required");
+      setValidationError('Cron expression is required');
       return false;
     }
 
     if (!isValidCron(cron)) {
-      setValidationError("Invalid cron expression format");
+      setValidationError('Invalid cron expression format');
       return false;
     }
 
@@ -64,18 +62,16 @@ export function JobEditDialog({ job, open, onOpenChange }: JobEditDialogProps) {
   // Update job settings mutation
   const updateJobSettings = useMutation({
     mutationFn: (settings: Record<string, any>) =>
-      systemSettingsApi.updateCategory("jobs", settings),
+      systemSettingsApi.updateCategory('jobs', settings),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["jobs"] });
-      queryClient.invalidateQueries({ queryKey: ["systemSettings", "jobs"] });
-      showToast("Job settings updated successfully", "success");
+      queryClient.invalidateQueries({ queryKey: ['jobs'] });
+      queryClient.invalidateQueries({ queryKey: ['systemSettings', 'jobs'] });
+      showToast('Job settings updated successfully', 'success');
       onOpenChange(false);
     },
     onError: (error: any) => {
-      const message =
-        error?.response?.data?.error?.message ||
-        "Failed to update job settings";
-      showToast(message, "error");
+      const message = error?.response?.data?.error?.message || 'Failed to update job settings';
+      showToast(message, 'error');
     },
   });
 
@@ -84,12 +80,12 @@ export function JobEditDialog({ job, open, onOpenChange }: JobEditDialogProps) {
 
     // Validate before saving
     if (!validateCronExpression(cronSchedule)) {
-      showToast("Please fix the validation errors before saving", "error");
+      showToast('Please fix the validation errors before saving', 'error');
       return;
     }
 
     // Map job ID to settings keys
-    const settingsKey = job.id === "metadata-sync" ? "metadataSync" : job.id;
+    const settingsKey = job.id === 'metadata-sync' ? 'metadataSync' : job.id;
 
     updateJobSettings.mutate({
       [`${settingsKey}Schedule`]: cronSchedule,
@@ -115,8 +111,7 @@ export function JobEditDialog({ job, open, onOpenChange }: JobEditDialogProps) {
               Schedule (Cron Expression)
             </Label>
             <p className="text-sm text-muted-foreground mb-2">
-              Define when the job should run automatically using a cron
-              expression. Use the format:{" "}
+              Define when the job should run automatically using a cron expression. Use the format:{' '}
               <code className="font-mono text-xs bg-muted px-1 py-0.5 rounded">
                 minute hour day month weekday
               </code>
@@ -127,8 +122,8 @@ export function JobEditDialog({ job, open, onOpenChange }: JobEditDialogProps) {
               placeholder="0 * * * *"
               className={`w-full px-3 py-2 bg-background border rounded-md focus:outline-none focus:ring-1 font-mono text-sm ${
                 validationError
-                  ? "border-red-500 focus:ring-red-500"
-                  : "border-border focus:ring-primary"
+                  ? 'border-red-500 focus:ring-red-500'
+                  : 'border-border focus:ring-primary'
               }`}
               value={cronSchedule}
               onChange={(e) => handleCronChange(e.target.value)}
@@ -156,35 +151,35 @@ export function JobEditDialog({ job, open, onOpenChange }: JobEditDialogProps) {
               <button
                 type="button"
                 className="px-2 py-1 text-xs bg-muted hover:bg-muted/80 rounded transition-colors"
-                onClick={() => handleCronChange("*/15 * * * *")}
+                onClick={() => handleCronChange('*/15 * * * *')}
               >
                 Every 15 min
               </button>
               <button
                 type="button"
                 className="px-2 py-1 text-xs bg-muted hover:bg-muted/80 rounded transition-colors"
-                onClick={() => handleCronChange("*/30 * * * *")}
+                onClick={() => handleCronChange('*/30 * * * *')}
               >
                 Every 30 min
               </button>
               <button
                 type="button"
                 className="px-2 py-1 text-xs bg-muted hover:bg-muted/80 rounded transition-colors"
-                onClick={() => handleCronChange("0 * * * *")}
+                onClick={() => handleCronChange('0 * * * *')}
               >
                 Hourly
               </button>
               <button
                 type="button"
                 className="px-2 py-1 text-xs bg-muted hover:bg-muted/80 rounded transition-colors"
-                onClick={() => handleCronChange("0 */6 * * *")}
+                onClick={() => handleCronChange('0 */6 * * *')}
               >
                 Every 6 hours
               </button>
               <button
                 type="button"
                 className="px-2 py-1 text-xs bg-muted hover:bg-muted/80 rounded transition-colors"
-                onClick={() => handleCronChange("0 0 * * *")}
+                onClick={() => handleCronChange('0 0 * * *')}
               >
                 Daily
               </button>
@@ -198,9 +193,7 @@ export function JobEditDialog({ job, open, onOpenChange }: JobEditDialogProps) {
               <div className="flex-1">
                 <p className="text-sm font-medium text-foreground">
                   <span>Current Schedule: </span>
-                  {validationError
-                    ? "Invalid cron expression"
-                    : cronToReadable(cronSchedule)}
+                  {validationError ? 'Invalid cron expression' : cronToReadable(cronSchedule)}
                 </p>
                 <p className="text-xs text-muted-foreground mt-1">
                   <code className="font-mono bg-background px-1 py-0.5 rounded">
@@ -220,11 +213,8 @@ export function JobEditDialog({ job, open, onOpenChange }: JobEditDialogProps) {
           >
             Cancel
           </Button>
-          <Button
-            onClick={handleSave}
-            disabled={updateJobSettings.isPending || !!validationError}
-          >
-            {updateJobSettings.isPending ? "Saving..." : "Save Changes"}
+          <Button onClick={handleSave} disabled={updateJobSettings.isPending || !!validationError}>
+            {updateJobSettings.isPending ? 'Saving...' : 'Save Changes'}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/frontend/src/components/jobs/JobExecutionLogTable.tsx b/frontend/src/components/jobs/JobExecutionLogTable.tsx
index 095d2fb..baaa613 100644
--- a/frontend/src/components/jobs/JobExecutionLogTable.tsx
+++ b/frontend/src/components/jobs/JobExecutionLogTable.tsx
@@ -14,7 +14,7 @@ export function JobExecutionLogTable({ logs, loading }: JobExecutionLogTableProp
   const [expandedRows, setExpandedRows] = useState<Set<number>>(new Set());
 
   const toggleRow = (id: number) => {
-    setExpandedRows(prev => {
+    setExpandedRows((prev) => {
       const newSet = new Set(prev);
       if (newSet.has(id)) {
         newSet.delete(id);
@@ -28,11 +28,23 @@ export function JobExecutionLogTable({ logs, loading }: JobExecutionLogTableProp
   const getStatusBadge = (status: string) => {
     switch (status) {
       case 'success':
-        return <Badge variant="default" className="bg-green-600 gap-1"><CheckCircle size={12} /> Success</Badge>;
+        return (
+          <Badge variant="default" className="bg-green-600 gap-1">
+            <CheckCircle size={12} /> Success
+          </Badge>
+        );
       case 'failed':
-        return <Badge variant="destructive" className="gap-1"><XCircle size={12} /> Failed</Badge>;
+        return (
+          <Badge variant="destructive" className="gap-1">
+            <XCircle size={12} /> Failed
+          </Badge>
+        );
       case 'running':
-        return <Badge variant="default" className="gap-1"><Loader2 size={12} className="animate-spin" /> Running</Badge>;
+        return (
+          <Badge variant="default" className="gap-1">
+            <Loader2 size={12} className="animate-spin" /> Running
+          </Badge>
+        );
       default:
         return <Badge variant="outline">{status}</Badge>;
     }
@@ -69,7 +81,11 @@ export function JobExecutionLogTable({ logs, loading }: JobExecutionLogTableProp
                       onClick={() => toggleRow(log.id)}
                       className="hover:bg-accent p-1 rounded"
                     >
-                      {expandedRows.has(log.id) ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+                      {expandedRows.has(log.id) ? (
+                        <ChevronDown size={16} />
+                      ) : (
+                        <ChevronRight size={16} />
+                      )}
                     </button>
                   ) : null}
                 </td>
diff --git a/frontend/src/components/jobs/JobScheduleDisplay.tsx b/frontend/src/components/jobs/JobScheduleDisplay.tsx
index 81b23af..3da595f 100644
--- a/frontend/src/components/jobs/JobScheduleDisplay.tsx
+++ b/frontend/src/components/jobs/JobScheduleDisplay.tsx
@@ -16,9 +16,7 @@ export function JobScheduleDisplay({ cronSchedule }: JobScheduleDisplayProps) {
         <p className="font-medium">{readable}</p>
         <Tooltip>
           <TooltipTrigger asChild>
-            <p className="text-xs text-muted-foreground font-mono cursor-help">
-              {cronSchedule}
-            </p>
+            <p className="text-xs text-muted-foreground font-mono cursor-help">{cronSchedule}</p>
           </TooltipTrigger>
           <TooltipContent>
             <p>Cron expression: {cronSchedule}</p>
diff --git a/frontend/src/components/layout/AppShell.tsx b/frontend/src/components/layout/AppShell.tsx
index 07aeaa0..b683faf 100644
--- a/frontend/src/components/layout/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell.tsx
@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { Header } from "./Header";
-import { Sidebar } from "./Sidebar";
-import { useUIStore } from "@/store/ui";
+import { ReactNode } from 'react';
+import { Header } from './Header';
+import { Sidebar } from './Sidebar';
+import { useUIStore } from '@/store/ui';
 
 interface AppShellProps {
   children: ReactNode;
diff --git a/frontend/src/components/layout/ErrorLayout.tsx b/frontend/src/components/layout/ErrorLayout.tsx
index 65698e8..b9d177b 100644
--- a/frontend/src/components/layout/ErrorLayout.tsx
+++ b/frontend/src/components/layout/ErrorLayout.tsx
@@ -15,9 +15,5 @@ interface ErrorLayoutProps {
  * - Used for 404, 500, network error, and unauthorized pages
  */
 export function ErrorLayout({ children }: ErrorLayoutProps) {
-  return (
-    <div className="min-h-screen bg-background">
-      {children || <Outlet />}
-    </div>
-  );
+  return <div className="min-h-screen bg-background">{children || <Outlet />}</div>;
 }
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 7188819..c6ffe44 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -1,14 +1,14 @@
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 import { logger } from '@/lib/logger';
-import { Menu, User, LogOut } from "lucide-react";
-import { useUIStore } from "@/store/ui";
-import { useAuthStore } from "@/store/auth";
-import { useAuth } from "@/contexts/AuthContext";
-import { usePublicSettings } from "@/hooks/usePublicSettings";
-import { SearchBar } from "../search/SearchBar";
-import { ThemePicker } from "../theme/ThemePicker";
-import { GitHubButton } from "../github/GitHubButton";
-import { Button } from "@/components/ui/button";
+import { Menu, User, LogOut } from 'lucide-react';
+import { useUIStore } from '@/store/ui';
+import { useAuthStore } from '@/store/auth';
+import { useAuth } from '@/contexts/AuthContext';
+import { usePublicSettings } from '@/hooks/usePublicSettings';
+import { SearchBar } from '../search/SearchBar';
+import { ThemePicker } from '../theme/ThemePicker';
+import { GitHubButton } from '../github/GitHubButton';
+import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,9 +16,9 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
+} from '@/components/ui/dropdown-menu';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
 
 interface HeaderProps {
   hideSidebarToggle?: boolean;
@@ -27,9 +27,7 @@ interface HeaderProps {
 
 export function Header({ hideSidebarToggle = false, hideSearch = false }: HeaderProps) {
   const toggleSidebar = useUIStore((state) => state.toggleSidebar);
-  const toggleSidebarCollapsed = useUIStore(
-    (state) => state.toggleSidebarCollapsed,
-  );
+  const toggleSidebarCollapsed = useUIStore((state) => state.toggleSidebarCollapsed);
   const sidebarCollapsed = useUIStore((state) => state.sidebarCollapsed);
   const { isAuthenticated, isGuest, user } = useAuthStore();
   const { logout } = useAuth();
@@ -37,10 +35,10 @@ export function Header({ hideSidebarToggle = false, hideSearch = false }: Header
 
   // Get site name from settings or use default
   // Public settings are grouped by category: { app: { siteName: "..." }, auth: { ... } }
-  const siteName = publicSettings?.app?.siteName || "Flashpoint Archive";
+  const siteName = publicSettings?.app?.siteName || 'Flashpoint Archive';
 
   // On mobile, always show site name. On desktop, hide when sidebar is collapsed.
-  const isMobile = typeof window !== "undefined" && window.innerWidth < 1024;
+  const isMobile = typeof window !== 'undefined' && window.innerWidth < 1024;
   const effectiveCollapsed = isMobile ? false : sidebarCollapsed;
 
   // Handle menu button click - different behavior for mobile vs desktop
@@ -58,7 +56,7 @@ export function Header({ hideSidebarToggle = false, hideSearch = false }: Header
     try {
       await logout();
     } catch (error) {
-      logger.error("Logout error:", error);
+      logger.error('Logout error:', error);
     }
   };
 
@@ -67,9 +65,9 @@ export function Header({ hideSidebarToggle = false, hideSearch = false }: Header
   };
 
   const getRoleBadgeVariant = (role: string) => {
-    if (role === "admin") return "default";
-    if (role === "user") return "secondary";
-    return "outline";
+    if (role === 'admin') return 'default';
+    if (role === 'user') return 'secondary';
+    return 'outline';
   };
 
   return (
@@ -91,16 +89,14 @@ export function Header({ hideSidebarToggle = false, hideSearch = false }: Header
               <div
                 className="overflow-hidden hidden sm:block"
                 style={{
-                  maxWidth: effectiveCollapsed ? 0 : "24rem",
+                  maxWidth: effectiveCollapsed ? 0 : '24rem',
                   opacity: effectiveCollapsed ? 0 : 1,
                   transition: isMobile
                     ? undefined
-                    : "max-width 500ms ease-out, opacity 500ms ease-out",
+                    : 'max-width 500ms ease-out, opacity 500ms ease-out',
                 }}
               >
-                <span className="text-xl font-bold whitespace-nowrap ml-2">
-                  {siteName}
-                </span>
+                <span className="text-xl font-bold whitespace-nowrap ml-2">{siteName}</span>
               </div>
             </Link>
 
@@ -110,11 +106,7 @@ export function Header({ hideSidebarToggle = false, hideSearch = false }: Header
                 size="icon"
                 onClick={handleMenuClick}
                 aria-label="Toggle sidebar"
-                title={
-                  window.innerWidth < 1024
-                    ? "Toggle sidebar"
-                    : "Toggle sidebar width"
-                }
+                title={window.innerWidth < 1024 ? 'Toggle sidebar' : 'Toggle sidebar width'}
               >
                 <Menu size={20} />
               </Button>
@@ -143,9 +135,7 @@ export function Header({ hideSidebarToggle = false, hideSearch = false }: Header
                   <div className="flex items-center gap-2">
                     <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted">
                       <User size={16} className="text-muted-foreground" />
-                      <span className="text-sm hidden sm:block">
-                        {user.username}
-                      </span>
+                      <span className="text-sm hidden sm:block">{user.username}</span>
                       <Badge variant="outline" className="text-xs">
                         {user.role}
                       </Badge>
@@ -154,25 +144,17 @@ export function Header({ hideSidebarToggle = false, hideSearch = false }: Header
                       <Link to="/login">Login</Link>
                     </Button>
                   </div>
-                ) : /* Authenticated User - Full menu with logout */ (
-                  <DropdownMenu>
+                ) : (
+                  /* Authenticated User - Full menu with logout */ <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        className="flex items-center gap-2"
-                      >
+                      <Button variant="ghost" className="flex items-center gap-2">
                         <Avatar className="h-8 w-8">
                           <AvatarFallback className="text-xs">
                             {getUserInitials(user.username)}
                           </AvatarFallback>
                         </Avatar>
-                        <span className="text-sm hidden sm:block">
-                          {user.username}
-                        </span>
-                        <Badge
-                          variant={getRoleBadgeVariant(user.role)}
-                          className="text-xs"
-                        >
+                        <span className="text-sm hidden sm:block">{user.username}</span>
+                        <Badge variant={getRoleBadgeVariant(user.role)} className="text-xs">
                           {user.role}
                         </Badge>
                       </Button>
@@ -181,9 +163,7 @@ export function Header({ hideSidebarToggle = false, hideSearch = false }: Header
                       <DropdownMenuLabel>
                         <div>
                           <p className="text-sm font-medium">{user.username}</p>
-                          <p className="text-xs text-muted-foreground">
-                            {user.email}
-                          </p>
+                          <p className="text-xs text-muted-foreground">{user.email}</p>
                         </div>
                       </DropdownMenuLabel>
                       <DropdownMenuSeparator />
diff --git a/frontend/src/components/layout/MainLayout.tsx b/frontend/src/components/layout/MainLayout.tsx
index 941bfc9..4bd853c 100644
--- a/frontend/src/components/layout/MainLayout.tsx
+++ b/frontend/src/components/layout/MainLayout.tsx
@@ -19,9 +19,7 @@ interface MainLayoutProps {
 export function MainLayout({ children }: MainLayoutProps) {
   return (
     <MaintenanceGuard>
-      <AppShell>
-        {children || <Outlet />}
-      </AppShell>
+      <AppShell>{children || <Outlet />}</AppShell>
     </MaintenanceGuard>
   );
 }
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 55fb8c5..db6b007 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,5 +1,19 @@
 import { useLocation } from 'react-router-dom';
-import { List as ListIcon, ListVideo, Settings, Heart, Gamepad2, Film, Users, Shield, Activity, BarChart3, Clock, Home, LucideIcon } from 'lucide-react';
+import {
+  List as ListIcon,
+  ListVideo,
+  Settings,
+  Heart,
+  Gamepad2,
+  Film,
+  Users,
+  Shield,
+  Activity,
+  BarChart3,
+  Clock,
+  Home,
+  LucideIcon,
+} from 'lucide-react';
 import { useUIStore } from '@/store/ui';
 import { useAuthStore } from '@/store/auth';
 import { RoleGuard } from '../common/RoleGuard';
@@ -50,7 +64,7 @@ export function Sidebar({ isOpen }: SidebarProps) {
         setSidebarOpen(false);
       }
     },
-    minSwipeDistance: 50
+    minSwipeDistance: 50,
   });
 
   const gameNavItems: NavItem[] = [
@@ -64,13 +78,22 @@ export function Sidebar({ isOpen }: SidebarProps) {
   const libraryNavItems: NavItem[] = [
     enableFavorites && { path: '/favorites', icon: Heart, label: 'Favorites' },
     enablePlaylists && { path: '/playlists', icon: ListVideo, label: 'My Playlists' },
-    enablePlaylists && { path: '/flashpoint-playlists', icon: ListIcon, label: 'Flashpoint Playlists' },
+    enablePlaylists && {
+      path: '/flashpoint-playlists',
+      icon: ListIcon,
+      label: 'Flashpoint Playlists',
+    },
   ].filter(Boolean) as NavItem[];
 
   const managementNavItems: NavItem[] = [
     { path: '/users', icon: Users, label: 'Users', permission: 'users.read' },
     { path: '/roles', icon: Shield, label: 'Roles', permission: 'roles.read' },
-    enableStatistics && { path: '/activities', icon: Activity, label: 'Activity Logs', permission: 'activities.read' },
+    enableStatistics && {
+      path: '/activities',
+      icon: Activity,
+      label: 'Activity Logs',
+      permission: 'activities.read',
+    },
   ].filter(Boolean) as NavItem[];
 
   const bottomNavItems: NavItem[] = [
@@ -125,9 +148,7 @@ export function Sidebar({ isOpen }: SidebarProps) {
         )}
         style={{
           width: effectiveCollapsed ? '4rem' : '16rem',
-          transition: isMobile
-            ? 'transform 300ms ease-out'
-            : 'width 500ms ease-out',
+          transition: isMobile ? 'transform 300ms ease-out' : 'width 500ms ease-out',
         }}
         aria-label="Main navigation"
       >
@@ -196,10 +217,19 @@ export function Sidebar({ isOpen }: SidebarProps) {
             {bottomNavItems.map((item) =>
               item.permission ? (
                 <RoleGuard key={item.path} permission={item.permission}>
-                  <SidebarItem {...item} collapsed={effectiveCollapsed} onClick={handleNavItemClick} />
+                  <SidebarItem
+                    {...item}
+                    collapsed={effectiveCollapsed}
+                    onClick={handleNavItemClick}
+                  />
                 </RoleGuard>
               ) : (
-                <SidebarItem key={item.path} {...item} collapsed={effectiveCollapsed} onClick={handleNavItemClick} />
+                <SidebarItem
+                  key={item.path}
+                  {...item}
+                  collapsed={effectiveCollapsed}
+                  onClick={handleNavItemClick}
+                />
               )
             )}
           </div>
diff --git a/frontend/src/components/library/GameCard.test.tsx b/frontend/src/components/library/GameCard.test.tsx
index 0247b04..f7f7c48 100644
--- a/frontend/src/components/library/GameCard.test.tsx
+++ b/frontend/src/components/library/GameCard.test.tsx
@@ -148,7 +148,9 @@ describe('GameCard', () => {
         favoriteGameIds: new Set(),
       });
 
-      expect(screen.getByTestId('favorite-button-abcd1234-5678-90ab-cdef-1234567890ab')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('favorite-button-abcd1234-5678-90ab-cdef-1234567890ab')
+      ).toBeInTheDocument();
     });
 
     it('should not show favorite button when game is favorited', () => {
@@ -157,7 +159,9 @@ describe('GameCard', () => {
         favoriteGameIds: new Set(['abcd1234-5678-90ab-cdef-1234567890ab']),
       });
 
-      expect(screen.queryByTestId('favorite-button-abcd1234-5678-90ab-cdef-1234567890ab')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('favorite-button-abcd1234-5678-90ab-cdef-1234567890ab')
+      ).not.toBeInTheDocument();
     });
 
     it('should not show favorite button when showFavoriteButton is false', () => {
@@ -166,7 +170,9 @@ describe('GameCard', () => {
         favoriteGameIds: new Set(),
       });
 
-      expect(screen.queryByTestId('favorite-button-abcd1234-5678-90ab-cdef-1234567890ab')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('favorite-button-abcd1234-5678-90ab-cdef-1234567890ab')
+      ).not.toBeInTheDocument();
     });
   });
 
@@ -177,7 +183,9 @@ describe('GameCard', () => {
         favoriteGameIds: new Set(['abcd1234-5678-90ab-cdef-1234567890ab']),
       });
 
-      expect(screen.getByTestId('remove-button-abcd1234-5678-90ab-cdef-1234567890ab')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('remove-button-abcd1234-5678-90ab-cdef-1234567890ab')
+      ).toBeInTheDocument();
     });
 
     it('should not show remove button when game is not favorited', () => {
@@ -186,7 +194,9 @@ describe('GameCard', () => {
         favoriteGameIds: new Set(),
       });
 
-      expect(screen.queryByTestId('remove-button-abcd1234-5678-90ab-cdef-1234567890ab')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('remove-button-abcd1234-5678-90ab-cdef-1234567890ab')
+      ).not.toBeInTheDocument();
     });
 
     it('should not show remove button when showRemoveButton is false', () => {
@@ -195,7 +205,9 @@ describe('GameCard', () => {
         favoriteGameIds: new Set(['abcd1234-5678-90ab-cdef-1234567890ab']),
       });
 
-      expect(screen.queryByTestId('remove-button-abcd1234-5678-90ab-cdef-1234567890ab')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('remove-button-abcd1234-5678-90ab-cdef-1234567890ab')
+      ).not.toBeInTheDocument();
     });
   });
 
@@ -268,7 +280,9 @@ describe('GameCard', () => {
       await user.click(button);
 
       await waitFor(() => {
-        expect(screen.getByTestId('playlist-modal-abcd1234-5678-90ab-cdef-1234567890ab')).toBeInTheDocument();
+        expect(
+          screen.getByTestId('playlist-modal-abcd1234-5678-90ab-cdef-1234567890ab')
+        ).toBeInTheDocument();
       });
     });
 
@@ -283,7 +297,9 @@ describe('GameCard', () => {
       await user.click(button);
 
       expect(toast.error).toHaveBeenCalledWith('Please log in to add games to playlists');
-      expect(screen.queryByTestId('playlist-modal-abcd1234-5678-90ab-cdef-1234567890ab')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('playlist-modal-abcd1234-5678-90ab-cdef-1234567890ab')
+      ).not.toBeInTheDocument();
     });
   });
 
@@ -312,7 +328,10 @@ describe('GameCard', () => {
       renderGameCard(mockFlashGame);
 
       const playButton = screen.getByLabelText('Play Test Flash Game');
-      expect(playButton).toHaveAttribute('href', '/games/abcd1234-5678-90ab-cdef-1234567890ab/play');
+      expect(playButton).toHaveAttribute(
+        'href',
+        '/games/abcd1234-5678-90ab-cdef-1234567890ab/play'
+      );
     });
 
     it('should include shareToken in play URL when provided', () => {
@@ -322,7 +341,10 @@ describe('GameCard', () => {
 
       const playButton = screen.getByLabelText('Play Test Flash Game');
       // When shareToken is provided, it uses play-shared route with shareToken query param
-      expect(playButton).toHaveAttribute('href', '/games/abcd1234-5678-90ab-cdef-1234567890ab/play-shared?shareToken=test-share-token');
+      expect(playButton).toHaveAttribute(
+        'href',
+        '/games/abcd1234-5678-90ab-cdef-1234567890ab/play-shared?shareToken=test-share-token'
+      );
     });
   });
 
diff --git a/frontend/src/components/library/GameCard.tsx b/frontend/src/components/library/GameCard.tsx
index 058cb07..9cb2510 100644
--- a/frontend/src/components/library/GameCard.tsx
+++ b/frontend/src/components/library/GameCard.tsx
@@ -63,7 +63,7 @@ const GameCardComponent = function GameCard({
   // Handle navigation to game details (for clicking on image/footer area)
   const handleCardClick = () => {
     navigate(gameDetailUrl, {
-      state: breadcrumbContext ? { breadcrumbContext } : undefined
+      state: breadcrumbContext ? { breadcrumbContext } : undefined,
     });
   };
 
diff --git a/frontend/src/components/library/GameList.tsx b/frontend/src/components/library/GameList.tsx
index 6e6aa04..1da2822 100644
--- a/frontend/src/components/library/GameList.tsx
+++ b/frontend/src/components/library/GameList.tsx
@@ -13,15 +13,19 @@ interface GameListProps {
   breadcrumbContext?: BreadcrumbContext; // Optional: Context for breadcrumb navigation
 }
 
-export function GameList({ games, showFavoriteButton = true, showAddToPlaylistButton = true, favoriteGameIds, isFavoritePage = false, shareToken = null, breadcrumbContext }: GameListProps) {
+export function GameList({
+  games,
+  showFavoriteButton = true,
+  showAddToPlaylistButton = true,
+  favoriteGameIds,
+  isFavoritePage = false,
+  shareToken = null,
+  breadcrumbContext,
+}: GameListProps) {
   const listColumns = useUIStore((state) => state.listColumns);
 
   if (games.length === 0) {
-    return (
-      <div className="text-center py-12 text-gray-400">
-        No games found
-      </div>
-    );
+    return <div className="text-center py-12 text-gray-400">No games found</div>;
   }
 
   // Dynamic grid classes based on column count
@@ -29,7 +33,7 @@ export function GameList({ games, showFavoriteButton = true, showAddToPlaylistBu
     1: 'grid grid-cols-1 gap-3',
     2: 'grid grid-cols-1 md:grid-cols-2 gap-3',
     3: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3',
-    4: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3'
+    4: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3',
   };
 
   return (
diff --git a/frontend/src/components/library/GameListItem.tsx b/frontend/src/components/library/GameListItem.tsx
index c37f0d5..de5b144 100644
--- a/frontend/src/components/library/GameListItem.tsx
+++ b/frontend/src/components/library/GameListItem.tsx
@@ -26,7 +26,17 @@ interface GameListItemProps {
   breadcrumbContext?: BreadcrumbContext; // Optional: Context for breadcrumb navigation
 }
 
-export function GameListItem({ game, showFavoriteButton = true, showRemoveButton = false, showFavoriteIndicator = false, showAddToPlaylistButton = true, favoriteGameIds, isFavoritePage = false, shareToken = null, breadcrumbContext }: GameListItemProps) {
+export function GameListItem({
+  game,
+  showFavoriteButton = true,
+  showRemoveButton = false,
+  showFavoriteIndicator = false,
+  showAddToPlaylistButton = true,
+  favoriteGameIds,
+  isFavoritePage = false,
+  shareToken = null,
+  breadcrumbContext,
+}: GameListItemProps) {
   const [imageError, setImageError] = useState(false);
   const [isPlaylistModalOpen, setIsPlaylistModalOpen] = useState(false);
 
@@ -38,7 +48,11 @@ export function GameListItem({ game, showFavoriteButton = true, showRemoveButton
 
   // Parse tags (limit to first 3 for list display)
   const tags = game.tagsStr
-    ? game.tagsStr.split(';').map(t => t.trim()).filter(Boolean).slice(0, 3)
+    ? game.tagsStr
+        .split(';')
+        .map((t) => t.trim())
+        .filter(Boolean)
+        .slice(0, 3)
     : [];
 
   const isFavorited = favoriteGameIds?.has(game.id) ?? false;
@@ -51,7 +65,7 @@ export function GameListItem({ game, showFavoriteButton = true, showRemoveButton
   // Handle navigation to game details with breadcrumb context
   const handleNavigateToDetails = () => {
     navigate(gameDetailUrl, {
-      state: breadcrumbContext ? { breadcrumbContext } : undefined
+      state: breadcrumbContext ? { breadcrumbContext } : undefined,
     });
   };
 
@@ -82,7 +96,10 @@ export function GameListItem({ game, showFavoriteButton = true, showRemoveButton
           {/* Game Info */}
           <div className="flex-1 min-w-0 space-y-1">
             <div onClick={handleNavigateToDetails} className="cursor-pointer">
-              <h3 className="font-semibold text-sm truncate hover:text-primary transition-colors" title={game.title}>
+              <h3
+                className="font-semibold text-sm truncate hover:text-primary transition-colors"
+                title={game.title}
+              >
                 {game.title}
               </h3>
             </div>
@@ -117,11 +134,7 @@ export function GameListItem({ game, showFavoriteButton = true, showRemoveButton
 
             {/* Remove from Favorites Button (Favorites page only) */}
             {showRemoveButton && isFavoritePage ? (
-              <RemoveFavoriteButton
-                gameId={game.id}
-                size="sm"
-                className="h-9 w-9 p-0"
-              />
+              <RemoveFavoriteButton gameId={game.id} size="sm" className="h-9 w-9 p-0" />
             ) : null}
 
             {/* Add to Favorites Button (other pages, when not favorited) */}
@@ -144,7 +157,7 @@ export function GameListItem({ game, showFavoriteButton = true, showRemoveButton
                   e.preventDefault();
                   e.stopPropagation();
                   if (!isAuthenticated) {
-                    toast.error("Please log in to add games to playlists");
+                    toast.error('Please log in to add games to playlists');
                     return;
                   }
                   setIsPlaylistModalOpen(true);
@@ -158,15 +171,8 @@ export function GameListItem({ game, showFavoriteButton = true, showRemoveButton
             ) : null}
 
             {isPlayable ? (
-              <Button
-                size="sm"
-                asChild
-              >
-                <Link
-                  to={gamePlayUrl}
-                  title="Play Game"
-                  aria-label="Play Game"
-                >
+              <Button size="sm" asChild>
+                <Link to={gamePlayUrl} title="Play Game" aria-label="Play Game">
                   <Play size={18} />
                 </Link>
               </Button>
diff --git a/frontend/src/components/library/GameListSkeleton.tsx b/frontend/src/components/library/GameListSkeleton.tsx
index 13a814d..928820a 100644
--- a/frontend/src/components/library/GameListSkeleton.tsx
+++ b/frontend/src/components/library/GameListSkeleton.tsx
@@ -9,7 +9,7 @@ export function GameListSkeleton() {
     1: 'grid grid-cols-1 gap-2',
     2: 'grid grid-cols-1 md:grid-cols-2 gap-2',
     3: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2',
-    4: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2'
+    4: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2',
   };
 
   // Show 20 skeleton items
diff --git a/frontend/src/components/player/GamePlayer.tsx b/frontend/src/components/player/GamePlayer.tsx
index 9a860ea..19ecf36 100644
--- a/frontend/src/components/player/GamePlayer.tsx
+++ b/frontend/src/components/player/GamePlayer.tsx
@@ -98,7 +98,8 @@ export function GamePlayer({
     if (isWebPlatform && !launchCommand) {
       // Missing content data
       reason = 'This game is missing content data and cannot be played.';
-      details = 'This game entry is incomplete. Try launching it from the Flashpoint Launcher instead.';
+      details =
+        'This game entry is incomplete. Try launching it from the Flashpoint Launcher instead.';
     } else {
       // Not a web platform
       reason = `The ${platform} platform requires the Flashpoint Launcher.`;
@@ -106,7 +107,9 @@ export function GamePlayer({
     }
 
     return (
-      <div className={`flex items-center justify-center bg-card border border-border rounded-lg p-8 ${className}`}>
+      <div
+        className={`flex items-center justify-center bg-card border border-border rounded-lg p-8 ${className}`}
+      >
         <div className="text-center">
           <AlertCircle size={48} className="text-yellow-500 mx-auto mb-4" />
           <h3 className="text-xl font-bold mb-2">Cannot Play in Browser</h3>
@@ -122,9 +125,7 @@ export function GamePlayer({
     );
   }
 
-  const containerClasses = isFullscreen
-    ? 'fixed inset-0 z-50 bg-black'
-    : className;
+  const containerClasses = isFullscreen ? 'fixed inset-0 z-50 bg-black' : className;
 
   // Special handling for aspect-video containers - use flex layout
   const isAspectVideo = height === 'aspect-video';
@@ -170,12 +171,14 @@ export function GamePlayer({
       {/* Game Player Container */}
       <div
         className={`bg-black relative ${isAspectVideo ? 'flex-1 min-h-0' : ''}`}
-        style={isAspectVideo ? {} : {
-          height: isFullscreen
-            ? showControls ? 'calc(100vh - 64px)' : '100vh'
-            : height,
-          minHeight: isFullscreen ? 'auto' : '600px'
-        }}
+        style={
+          isAspectVideo
+            ? {}
+            : {
+                height: isFullscreen ? (showControls ? 'calc(100vh - 64px)' : '100vh') : height,
+                minHeight: isFullscreen ? 'auto' : '600px',
+              }
+        }
       >
         {platform === 'Flash' && contentUrl ? (
           <RufflePlayer
diff --git a/frontend/src/components/player/README.md b/frontend/src/components/player/README.md
index bd14d90..0061d06 100644
--- a/frontend/src/components/player/README.md
+++ b/frontend/src/components/player/README.md
@@ -1,14 +1,17 @@
 # Game Player Components
 
-This directory contains reusable components for playing Flash (SWF) and HTML5 games.
+This directory contains reusable components for playing Flash (SWF) and HTML5
+games.
 
 ## Components
 
 ### `GamePlayer`
 
-A flexible, reusable game player component that can render Flash (via Ruffle) or HTML5 games. Can be embedded in pages, dialogs, or any other container.
+A flexible, reusable game player component that can render Flash (via Ruffle) or
+HTML5 games. Can be embedded in pages, dialogs, or any other container.
 
 **Features:**
+
 - Supports Flash (SWF) and HTML5 games
 - Optional fullscreen mode
 - Player controls (fullscreen toggle)
@@ -91,23 +94,24 @@ function GameSidebar() {
 
 **Props:**
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | Required | Game title for display |
-| `platform` | `string` | Required | Platform (Flash, HTML5, etc.) |
-| `contentUrl` | `string?` | - | Content URL for the game |
-| `launchCommand` | `string?` | - | Launch command (if any) |
-| `canPlayInBrowser` | `boolean` | Required | Whether the game can be played in browser |
-| `allowFullscreen` | `boolean` | `true` | Enable fullscreen mode |
-| `initialFullscreen` | `boolean` | `false` | Start in fullscreen |
-| `onFullscreenChange` | `(isFullscreen: boolean) => void` | - | Callback when fullscreen changes |
-| `className` | `string` | `''` | Custom class name |
-| `showControls` | `boolean` | `true` | Show player controls |
-| `height` | `string` | `'calc(100vh - 220px)'` | Container height (CSS value) |
+| Prop                 | Type                              | Default                 | Description                               |
+| -------------------- | --------------------------------- | ----------------------- | ----------------------------------------- |
+| `title`              | `string`                          | Required                | Game title for display                    |
+| `platform`           | `string`                          | Required                | Platform (Flash, HTML5, etc.)             |
+| `contentUrl`         | `string?`                         | -                       | Content URL for the game                  |
+| `launchCommand`      | `string?`                         | -                       | Launch command (if any)                   |
+| `canPlayInBrowser`   | `boolean`                         | Required                | Whether the game can be played in browser |
+| `allowFullscreen`    | `boolean`                         | `true`                  | Enable fullscreen mode                    |
+| `initialFullscreen`  | `boolean`                         | `false`                 | Start in fullscreen                       |
+| `onFullscreenChange` | `(isFullscreen: boolean) => void` | -                       | Callback when fullscreen changes          |
+| `className`          | `string`                          | `''`                    | Custom class name                         |
+| `showControls`       | `boolean`                         | `true`                  | Show player controls                      |
+| `height`             | `string`                          | `'calc(100vh - 220px)'` | Container height (CSS value)              |
 
 ### `RufflePlayer`
 
-Low-level component for rendering Flash SWF files using Ruffle emulator. Used internally by `GamePlayer` but can be used directly for advanced use cases.
+Low-level component for rendering Flash SWF files using Ruffle emulator. Used
+internally by `GamePlayer` but can be used directly for advanced use cases.
 
 **Example:**
 
@@ -129,7 +133,9 @@ function MyFlashPlayer() {
 
 ## Example: Full Dialog Implementation
 
-See `components/dialogs/GamePlayerDialog.tsx` for a complete example of using `GamePlayer` in a dialog with:
+See `components/dialogs/GamePlayerDialog.tsx` for a complete example of using
+`GamePlayer` in a dialog with:
+
 - ESC key to close
 - Header with game info
 - Close button
@@ -149,4 +155,5 @@ GamePlayerDialog (Example Dialog)
       └─ iframe (HTML5)
 ```
 
-The `GamePlayer` component is designed to be platform-agnostic and context-agnostic, making it easy to use anywhere in the application.
+The `GamePlayer` component is designed to be platform-agnostic and
+context-agnostic, making it easy to use anywhere in the application.
diff --git a/frontend/src/components/player/RufflePlayer.tsx b/frontend/src/components/player/RufflePlayer.tsx
index e3c732e..03080e3 100644
--- a/frontend/src/components/player/RufflePlayer.tsx
+++ b/frontend/src/components/player/RufflePlayer.tsx
@@ -1,23 +1,23 @@
-import { useEffect, useRef, useState } from "react";
-import { logger } from "@/lib/logger";
-import type { RufflePlayer as RufflePlayerType } from "@ruffle-rs/ruffle";
+import { useEffect, useRef, useState } from 'react';
+import { logger } from '@/lib/logger';
+import type { RufflePlayer as RufflePlayerType } from '@ruffle-rs/ruffle';
 
 export interface RufflePlayerProps {
   swfUrl: string;
   width?: string | number;
   height?: string | number;
   className?: string;
-  scaleMode?: "exactfit" | "noborder" | "showall" | "noscale";
+  scaleMode?: 'exactfit' | 'noborder' | 'showall' | 'noscale';
   onLoadError?: (error: Error) => void;
   onLoadSuccess?: () => void;
 }
 
 export function RufflePlayer({
   swfUrl,
-  width = "100%",
-  height = "100%",
-  className = "",
-  scaleMode = "showall",
+  width = '100%',
+  height = '100%',
+  className = '',
+  scaleMode = 'showall',
   onLoadError,
   onLoadSuccess,
 }: RufflePlayerProps) {
@@ -43,7 +43,7 @@ export function RufflePlayer({
 
     const initRuffle = async () => {
       if (!containerRef.current || isInitializingRef.current) {
-        logger.debug("[Ruffle] Already initializing or no container, skipping");
+        logger.debug('[Ruffle] Already initializing or no container, skipping');
         return;
       }
 
@@ -55,7 +55,7 @@ export function RufflePlayer({
 
         // Give Ruffle time to clean up from previous instance (especially after navigation)
         // This ensures Ruffle's internal registry is fully cleared
-        logger.debug("[Ruffle] Waiting for any previous cleanup to complete...");
+        logger.debug('[Ruffle] Waiting for any previous cleanup to complete...');
         await new Promise((resolve) => setTimeout(resolve, 100));
 
         if (!mounted) {
@@ -66,23 +66,23 @@ export function RufflePlayer({
         // Clean up any existing player before creating a new one
         if (rufflePlayerRef.current) {
           try {
-            logger.debug("[Ruffle] Cleaning up existing player instance");
+            logger.debug('[Ruffle] Cleaning up existing player instance');
             // Try to destroy the player more thoroughly
             const oldPlayer = rufflePlayerRef.current;
             rufflePlayerRef.current = null;
 
             // Call destroy if available, otherwise remove
-            if (typeof oldPlayer.destroy === "function") {
+            if (typeof oldPlayer.destroy === 'function') {
               oldPlayer.destroy();
             } else {
               oldPlayer.remove();
             }
 
             // Give Ruffle additional time to clean up internal state
-            logger.debug("[Ruffle] Waiting for cleanup to complete...");
+            logger.debug('[Ruffle] Waiting for cleanup to complete...');
             await new Promise((resolve) => setTimeout(resolve, 200));
           } catch (err) {
-            logger.warn("[Ruffle] Error cleaning up existing player:", err);
+            logger.warn('[Ruffle] Error cleaning up existing player:', err);
           }
         }
 
@@ -93,19 +93,16 @@ export function RufflePlayer({
 
         // Load Ruffle script from self-hosted location (only if not already loaded)
         if (!(window as any).RufflePlayer) {
-          const existingScript = document.querySelector(
-            'script[src="/ruffle/ruffle.js"]',
-          );
+          const existingScript = document.querySelector('script[src="/ruffle/ruffle.js"]');
 
           if (!existingScript) {
-            const script = document.createElement("script");
-            script.src = "/ruffle/ruffle.js";
+            const script = document.createElement('script');
+            script.src = '/ruffle/ruffle.js';
 
             // Wait for script to load
             await new Promise<void>((resolve, reject) => {
               script.onload = () => resolve();
-              script.onerror = () =>
-                reject(new Error("Failed to load Ruffle script"));
+              script.onerror = () => reject(new Error('Failed to load Ruffle script'));
               document.head.appendChild(script);
             });
           }
@@ -121,7 +118,7 @@ export function RufflePlayer({
 
         if (!RufflePlayer) {
           throw new Error(
-            "RufflePlayer not found. The Ruffle library may not have loaded correctly.",
+            'RufflePlayer not found. The Ruffle library may not have loaded correctly.'
           );
         }
 
@@ -129,14 +126,14 @@ export function RufflePlayer({
         const ruffle = RufflePlayer.newest();
 
         if (!ruffle) {
-          throw new Error("Could not initialize Ruffle player.");
+          throw new Error('Could not initialize Ruffle player.');
         }
 
         // Create player instance
         player = ruffle.createPlayer();
 
         if (!player) {
-          throw new Error("Could not create Ruffle player instance.");
+          throw new Error('Could not create Ruffle player instance.');
         }
 
         // Store reference
@@ -144,44 +141,38 @@ export function RufflePlayer({
 
         // Configure player for better scaling
         player.config = {
-          autoplay: "auto",
-          backgroundColor: "#000000",
-          letterbox: "on", // Add letterboxing to properly frame content
-          unmuteOverlay: "visible",
+          autoplay: 'auto',
+          backgroundColor: '#000000',
+          letterbox: 'on', // Add letterboxing to properly frame content
+          unmuteOverlay: 'visible',
           contextMenu: true,
           showSwfDownload: false,
-          upgradeToHttps: window.location.protocol === "https:",
+          upgradeToHttps: window.location.protocol === 'https:',
           warnOnUnsupportedContent: true,
-          logLevel: "error",
-          publicPath: "/ruffle/",
+          logLevel: 'error',
+          publicPath: '/ruffle/',
           scale: scaleMode, // Use scale mode from props (from system settings)
           forceScale: true, // Prevent SWF from changing scale mode at runtime
-          quality: "high",
-          allowScriptAccess: "sameDomain",
-          salign: "", // Default alignment (center)
-          wmode: "opaque", // Opaque mode to prevent transparency issues
+          quality: 'high',
+          allowScriptAccess: 'sameDomain',
+          salign: '', // Default alignment (center)
+          wmode: 'opaque', // Opaque mode to prevent transparency issues
         };
 
-
         // Set explicit size to fill container with overflow clipping
-        player.style.width = "100%";
-        player.style.height = "100%";
-        player.style.display = "block";
-        player.style.overflow = "hidden"; // Clip any content extending beyond player bounds
+        player.style.width = '100%';
+        player.style.height = '100%';
+        player.style.display = 'block';
+        player.style.overflow = 'hidden'; // Clip any content extending beyond player bounds
 
         // Add player to container (only if still mounted and container exists)
         if (!mounted || !containerRef.current) {
-          logger.debug(
-            "[Ruffle] Component unmounted during initialization, aborting",
-          );
+          logger.debug('[Ruffle] Component unmounted during initialization, aborting');
           if (player) {
             try {
               player.remove();
             } catch (err) {
-              logger.error(
-                "[Ruffle] Error removing player during abort:",
-                err,
-              );
+              logger.error('[Ruffle] Error removing player during abort:', err);
             }
           }
           isInitializingRef.current = false;
@@ -196,40 +187,34 @@ export function RufflePlayer({
 
         // Load SWF (check mounted again before async operation)
         if (!mounted) {
-          logger.debug("[Ruffle] Component unmounted before load, aborting");
+          logger.debug('[Ruffle] Component unmounted before load, aborting');
           if (player) {
             try {
               player.remove();
             } catch (err) {
-              logger.error(
-                "[Ruffle] Error removing player during abort:",
-                err,
-              );
+              logger.error('[Ruffle] Error removing player during abort:', err);
             }
           }
           isInitializingRef.current = false;
           return;
         }
 
-        logger.debug("[Ruffle] Loading SWF:", swfUrl);
+        logger.debug('[Ruffle] Loading SWF:', swfUrl);
         await player.load(swfUrl);
 
         if (mounted) {
           setIsLoading(false);
           onLoadSuccessRef.current?.();
-          logger.debug("[Ruffle] SWF loaded successfully");
+          logger.debug('[Ruffle] SWF loaded successfully');
         }
       } catch (err) {
-        logger.error("[Ruffle] Error loading SWF:", err);
+        logger.error('[Ruffle] Error loading SWF:', err);
 
         if (mounted) {
-          const errorMsg =
-            err instanceof Error ? err.message : "Failed to load Flash content";
+          const errorMsg = err instanceof Error ? err.message : 'Failed to load Flash content';
           setError(errorMsg);
           setIsLoading(false);
-          onLoadErrorRef.current?.(
-            err instanceof Error ? err : new Error(errorMsg),
-          );
+          onLoadErrorRef.current?.(err instanceof Error ? err : new Error(errorMsg));
         }
       } finally {
         isInitializingRef.current = false;
@@ -240,7 +225,7 @@ export function RufflePlayer({
 
     // Cleanup
     return () => {
-      logger.debug("[Ruffle] Cleanup: Component unmounting");
+      logger.debug('[Ruffle] Cleanup: Component unmounting');
       mounted = false;
       isInitializingRef.current = false;
 
@@ -248,15 +233,15 @@ export function RufflePlayer({
       const playerToCleanup = player || rufflePlayerRef.current;
       if (playerToCleanup) {
         try {
-          logger.debug("[Ruffle] Cleanup: Removing player instance");
+          logger.debug('[Ruffle] Cleanup: Removing player instance');
           // Try destroy first if available, otherwise remove
-          if (typeof playerToCleanup.destroy === "function") {
+          if (typeof playerToCleanup.destroy === 'function') {
             playerToCleanup.destroy();
           } else {
             playerToCleanup.remove();
           }
         } catch (err) {
-          logger.error("[Ruffle] Error removing player:", err);
+          logger.error('[Ruffle] Error removing player:', err);
         }
       }
       rufflePlayerRef.current = null;
@@ -268,7 +253,7 @@ export function RufflePlayer({
             containerRef.current.removeChild(containerRef.current.firstChild);
           }
         } catch (err) {
-          logger.error("[Ruffle] Error clearing container:", err);
+          logger.error('[Ruffle] Error clearing container:', err);
         }
       }
     };
@@ -281,23 +266,21 @@ export function RufflePlayer({
       if (player.config) {
         player.config.scale = scaleMode;
         player.config.forceScale = true;
-        logger.debug("[Ruffle] Scale mode updated to:", scaleMode);
+        logger.debug('[Ruffle] Scale mode updated to:', scaleMode);
         // Note: Scale mode changes may require reloading the SWF to take effect
       }
     }
   }, [scaleMode]);
 
   return (
-    <div
-      className={`ruffle-player-container relative h-full overflow-hidden ${className}`}
-    >
+    <div className={`ruffle-player-container relative h-full overflow-hidden ${className}`}>
       <div
         ref={containerRef}
         style={{
-          width: typeof width === "number" ? `${width}px` : width,
-          height: typeof height === "number" ? `${height}px` : height,
-          position: "relative",
-          overflow: "hidden", // Clip any content that extends beyond container bounds
+          width: typeof width === 'number' ? `${width}px` : width,
+          height: typeof height === 'number' ? `${height}px` : height,
+          position: 'relative',
+          overflow: 'hidden', // Clip any content that extends beyond container bounds
         }}
         className="ruffle-player-wrapper"
       />
@@ -316,9 +299,7 @@ export function RufflePlayer({
         <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 z-10">
           <div className="text-center max-w-md p-6">
             <div className="text-red-500 text-5xl mb-4">⚠️</div>
-            <h3 className="text-xl font-bold text-white mb-2">
-              Failed to Load Game
-            </h3>
+            <h3 className="text-xl font-bold text-white mb-2">Failed to Load Game</h3>
             <p className="text-gray-300 mb-4">{error}</p>
             <div className="bg-gray-800 rounded p-3 mb-4">
               <p className="text-sm text-gray-400 text-left">
@@ -326,8 +307,7 @@ export function RufflePlayer({
               </p>
             </div>
             <p className="text-sm text-gray-400">
-              This game may require additional files or may not be compatible
-              with Ruffle yet.
+              This game may require additional files or may not be compatible with Ruffle yet.
             </p>
           </div>
         </div>
diff --git a/frontend/src/components/playlist/AddToPlaylistModal.tsx b/frontend/src/components/playlist/AddToPlaylistModal.tsx
index 41993e5..8a9622f 100644
--- a/frontend/src/components/playlist/AddToPlaylistModal.tsx
+++ b/frontend/src/components/playlist/AddToPlaylistModal.tsx
@@ -82,7 +82,9 @@ export function AddToPlaylistModal({
 
       await Promise.all(promises);
 
-      toast.success(`Added to ${selectedPlaylists.size} playlist${selectedPlaylists.size > 1 ? 's' : ''}`);
+      toast.success(
+        `Added to ${selectedPlaylists.size} playlist${selectedPlaylists.size > 1 ? 's' : ''}`
+      );
 
       onClose();
     } catch (error) {
@@ -107,7 +109,9 @@ export function AddToPlaylistModal({
           <DialogHeader>
             <DialogTitle>Add to Playlist</DialogTitle>
             <DialogDescription>
-              {gameTitle ? `Select playlists to add "${gameTitle}" to` : 'Select playlists for this game'}
+              {gameTitle
+                ? `Select playlists to add "${gameTitle}" to`
+                : 'Select playlists for this game'}
             </DialogDescription>
           </DialogHeader>
 
@@ -124,9 +128,7 @@ export function AddToPlaylistModal({
 
             {/* Playlists List */}
             {isLoading ? (
-              <div className="text-center py-8 text-muted-foreground">
-                Loading playlists...
-              </div>
+              <div className="text-center py-8 text-muted-foreground">Loading playlists...</div>
             ) : playlists.length === 0 ? (
               <div className="text-center py-8 text-muted-foreground">
                 <ListVideo size={48} className="mx-auto mb-2 opacity-50" />
@@ -151,9 +153,7 @@ export function AddToPlaylistModal({
                           className="mt-0.5"
                         />
                         <div className="flex-1 min-w-0">
-                          <p className="font-medium text-sm truncate">
-                            {playlist.title}
-                          </p>
+                          <p className="font-medium text-sm truncate">{playlist.title}</p>
                           {playlist.description ? (
                             <p className="text-xs text-muted-foreground line-clamp-1">
                               {playlist.description}
diff --git a/frontend/src/components/playlist/BrowseCommunityPlaylistsModal.tsx b/frontend/src/components/playlist/BrowseCommunityPlaylistsModal.tsx
index df356f9..bf151e3 100644
--- a/frontend/src/components/playlist/BrowseCommunityPlaylistsModal.tsx
+++ b/frontend/src/components/playlist/BrowseCommunityPlaylistsModal.tsx
@@ -28,7 +28,10 @@ interface BrowseCommunityPlaylistsModalProps {
   onClose: () => void;
 }
 
-export function BrowseCommunityPlaylistsModal({ isOpen, onClose }: BrowseCommunityPlaylistsModalProps) {
+export function BrowseCommunityPlaylistsModal({
+  isOpen,
+  onClose,
+}: BrowseCommunityPlaylistsModalProps) {
   const [selectedCategory, setSelectedCategory] = useState('all');
   const [searchQuery, setSearchQuery] = useState('');
   const [downloadingUrl, setDownloadingUrl] = useState<string | null>(null);
@@ -43,12 +46,12 @@ export function BrowseCommunityPlaylistsModal({ isOpen, onClose }: BrowseCommuni
   const downloadedTitles = useMemo(() => {
     const titles = new Set<string>();
     if (localPlaylists) {
-      localPlaylists.forEach(playlist => {
+      localPlaylists.forEach((playlist) => {
         titles.add(playlist.title.toLowerCase().trim());
       });
     }
     // Also add playlists downloaded in this session
-    downloadedInSession.forEach(title => {
+    downloadedInSession.forEach((title) => {
       titles.add(title.toLowerCase().trim());
     });
     return titles;
@@ -61,29 +64,28 @@ export function BrowseCommunityPlaylistsModal({ isOpen, onClose }: BrowseCommuni
     let allPlaylists: CommunityPlaylist[] = [];
 
     // Flatten all playlists from all categories
-    data.categories.forEach(category => {
+    data.categories.forEach((category) => {
       allPlaylists.push(...category.playlists);
     });
 
     // Filter by category
     if (selectedCategory !== 'all') {
-      allPlaylists = allPlaylists.filter(p => p.category === selectedCategory);
+      allPlaylists = allPlaylists.filter((p) => p.category === selectedCategory);
     }
 
     // Filter by search query
     if (searchQuery.trim()) {
       const query = searchQuery.toLowerCase();
-      allPlaylists = allPlaylists.filter(p =>
-        p.name.toLowerCase().includes(query) ||
-        p.description.toLowerCase().includes(query) ||
-        p.author.toLowerCase().includes(query)
+      allPlaylists = allPlaylists.filter(
+        (p) =>
+          p.name.toLowerCase().includes(query) ||
+          p.description.toLowerCase().includes(query) ||
+          p.author.toLowerCase().includes(query)
       );
     }
 
     // Filter out already downloaded playlists
-    allPlaylists = allPlaylists.filter(p =>
-      !downloadedTitles.has(p.name.toLowerCase().trim())
-    );
+    allPlaylists = allPlaylists.filter((p) => !downloadedTitles.has(p.name.toLowerCase().trim()));
 
     return allPlaylists;
   }, [data, selectedCategory, searchQuery, downloadedTitles]);
@@ -91,7 +93,7 @@ export function BrowseCommunityPlaylistsModal({ isOpen, onClose }: BrowseCommuni
   // Get all unique categories
   const categories = useMemo(() => {
     if (!data?.categories) return [];
-    return data.categories.map(cat => cat.name);
+    return data.categories.map((cat) => cat.name);
   }, [data]);
 
   const handleDownload = async (playlist: CommunityPlaylist) => {
@@ -100,7 +102,7 @@ export function BrowseCommunityPlaylistsModal({ isOpen, onClose }: BrowseCommuni
       await downloadMutation.mutateAsync(playlist.downloadUrl);
 
       // Track downloaded playlist in session
-      setDownloadedInSession(prev => new Set([...prev, playlist.name]));
+      setDownloadedInSession((prev) => new Set([...prev, playlist.name]));
 
       showToast(`"${playlist.name}" downloaded successfully!`, 'success');
       // Modal stays open for more downloads
@@ -108,7 +110,7 @@ export function BrowseCommunityPlaylistsModal({ isOpen, onClose }: BrowseCommuni
       if (isApiError(error) && error.response?.status === 409) {
         showToast('You already have this playlist', 'info');
         // Also track as downloaded since it already exists
-        setDownloadedInSession(prev => new Set([...prev, playlist.name]));
+        setDownloadedInSession((prev) => new Set([...prev, playlist.name]));
       } else {
         showToast('Failed to download playlist', 'error');
       }
@@ -134,106 +136,108 @@ export function BrowseCommunityPlaylistsModal({ isOpen, onClose }: BrowseCommuni
         <DialogBody className="flex flex-col">
           {/* Filters */}
           <div className="flex gap-3 mb-4">
-          <div className="flex-1">
-            <Select
-              value={selectedCategory}
-              onValueChange={setSelectedCategory}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="All Categories" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All Categories</SelectItem>
-                {categories.map(cat => (
-                  <SelectItem key={cat} value={cat}>{cat}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex-1 relative">
-            <Search size={18} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10" />
-            <Input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search playlists..."
-              className="pl-10"
-            />
-          </div>
+            <div className="flex-1">
+              <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+                <SelectTrigger>
+                  <SelectValue placeholder="All Categories" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Categories</SelectItem>
+                  {categories.map((cat) => (
+                    <SelectItem key={cat} value={cat}>
+                      {cat}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex-1 relative">
+              <Search
+                size={18}
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10"
+              />
+              <Input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search playlists..."
+                className="pl-10"
+              />
+            </div>
           </div>
 
           {/* Content */}
           <div className="flex-1 overflow-y-auto space-y-3">
-          {/* Loading State */}
-          {isLoading ? (
-            <div className="flex flex-col items-center justify-center py-12">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mb-4"></div>
-              <p className="text-gray-400">Loading community playlists...</p>
-            </div>
-          ) : null}
+            {/* Loading State */}
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center py-12">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mb-4"></div>
+                <p className="text-gray-400">Loading community playlists...</p>
+              </div>
+            ) : null}
 
-          {/* Error State */}
-          {error ? (
-            <div className="text-center py-12">
-              <p className="text-red-400 mb-4">Failed to load community playlists</p>
-              <Button
-                onClick={() => refetch()}
-                variant="secondary"
-              >
-                Try Again
-              </Button>
-            </div>
-          ) : null}
-
-          {/* Empty State */}
-          {!isLoading && !error && filteredPlaylists.length === 0 ? (
-            <div className="text-center py-12 text-gray-400">
-              {searchQuery || selectedCategory !== 'all'
-                ? 'No playlists match your search'
-                : 'No community playlists available'}
-            </div>
-          ) : null}
-
-          {/* Playlist Cards */}
-          {!isLoading && !error ? filteredPlaylists.map((playlist, index) => (
-            <div
-              key={`${playlist.downloadUrl}-${index}`}
-              className="bg-gray-700 rounded-lg p-4 hover:bg-gray-650 transition-colors"
-            >
-              <div className="flex items-start justify-between">
-                <div className="flex-1 min-w-0">
-                  <h3 className="font-semibold text-lg mb-1">{playlist.name}</h3>
-                  <p className="text-sm text-gray-400 mb-2">
-                    by {playlist.author} • {playlist.category}
-                  </p>
-                  {playlist.description ? (
-                    <p className="text-sm text-gray-300 line-clamp-2">
-                      {playlist.description}
-                    </p>
-                  ) : null}
-                </div>
-                <Button
-                  onClick={() => handleDownload(playlist)}
-                  disabled={downloadingUrl === playlist.downloadUrl}
-                  size="icon"
-                  title="Download playlist"
-                >
-                  {downloadingUrl === playlist.downloadUrl ? (
-                    <Loader2 className="animate-spin" size={20} />
-                  ) : (
-                    <Download size={20} />
-                  )}
+            {/* Error State */}
+            {error ? (
+              <div className="text-center py-12">
+                <p className="text-red-400 mb-4">Failed to load community playlists</p>
+                <Button onClick={() => refetch()} variant="secondary">
+                  Try Again
                 </Button>
               </div>
-            </div>
-          )) : null}
+            ) : null}
+
+            {/* Empty State */}
+            {!isLoading && !error && filteredPlaylists.length === 0 ? (
+              <div className="text-center py-12 text-gray-400">
+                {searchQuery || selectedCategory !== 'all'
+                  ? 'No playlists match your search'
+                  : 'No community playlists available'}
+              </div>
+            ) : null}
+
+            {/* Playlist Cards */}
+            {!isLoading && !error
+              ? filteredPlaylists.map((playlist, index) => (
+                  <div
+                    key={`${playlist.downloadUrl}-${index}`}
+                    className="bg-gray-700 rounded-lg p-4 hover:bg-gray-650 transition-colors"
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1 min-w-0">
+                        <h3 className="font-semibold text-lg mb-1">{playlist.name}</h3>
+                        <p className="text-sm text-gray-400 mb-2">
+                          by {playlist.author} • {playlist.category}
+                        </p>
+                        {playlist.description ? (
+                          <p className="text-sm text-gray-300 line-clamp-2">
+                            {playlist.description}
+                          </p>
+                        ) : null}
+                      </div>
+                      <Button
+                        onClick={() => handleDownload(playlist)}
+                        disabled={downloadingUrl === playlist.downloadUrl}
+                        size="icon"
+                        title="Download playlist"
+                      >
+                        {downloadingUrl === playlist.downloadUrl ? (
+                          <Loader2 className="animate-spin" size={20} />
+                        ) : (
+                          <Download size={20} />
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                ))
+              : null}
           </div>
 
           {/* Footer Info */}
           {!isLoading && !error && filteredPlaylists.length > 0 ? (
             <div className="mt-4 pt-4 border-t border-gray-700">
               <p className="text-sm text-gray-400 text-center">
-                Showing {filteredPlaylists.length} playlist{filteredPlaylists.length !== 1 ? 's' : ''}
+                Showing {filteredPlaylists.length} playlist
+                {filteredPlaylists.length !== 1 ? 's' : ''}
                 {selectedCategory !== 'all' && ` in ${selectedCategory}`}
               </p>
             </div>
diff --git a/frontend/src/components/playlist/CreatePlaylistModal.tsx b/frontend/src/components/playlist/CreatePlaylistModal.tsx
index 112e93f..d3b4fa1 100644
--- a/frontend/src/components/playlist/CreatePlaylistModal.tsx
+++ b/frontend/src/components/playlist/CreatePlaylistModal.tsx
@@ -67,7 +67,7 @@ export function CreatePlaylistModal({ isOpen, onClose }: CreatePlaylistModalProp
         title: values.title,
         description: values.description?.trim() || undefined,
         author: values.author?.trim() || undefined,
-        library: values.library
+        library: values.library,
       });
 
       // Reset form
@@ -97,100 +97,84 @@ export function CreatePlaylistModal({ isOpen, onClose }: CreatePlaylistModalProp
         <DialogBody>
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Playlist Title *</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="My Awesome Playlist"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder="A collection of my favorite games..."
-                      rows={3}
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="author"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Author</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Your name"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="library"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Library</FormLabel>
-                  <Select
-                    value={field.value}
-                    onValueChange={field.onChange}
-                  >
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Playlist Title *</FormLabel>
                     <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select library" />
-                      </SelectTrigger>
+                      <Input placeholder="My Awesome Playlist" {...field} />
                     </FormControl>
-                    <SelectContent>
-                      <SelectItem value="arcade">Arcade</SelectItem>
-                      <SelectItem value="theatre">Theatre</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-            <DialogFooter>
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={onClose}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                disabled={createPlaylist.isPending}
-              >
-                {createPlaylist.isPending ? 'Creating...' : 'Create Playlist'}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="A collection of my favorite games..."
+                        rows={3}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="author"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Author</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Your name" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="library"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Library</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select library" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="arcade">Arcade</SelectItem>
+                        <SelectItem value="theatre">Theatre</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={createPlaylist.isPending}>
+                  {createPlaylist.isPending ? 'Creating...' : 'Create Playlist'}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
         </DialogBody>
       </DialogContent>
     </Dialog>
diff --git a/frontend/src/components/playlist/CreateUserPlaylistDialog.tsx b/frontend/src/components/playlist/CreateUserPlaylistDialog.tsx
index c38e94a..5b41cd7 100644
--- a/frontend/src/components/playlist/CreateUserPlaylistDialog.tsx
+++ b/frontend/src/components/playlist/CreateUserPlaylistDialog.tsx
@@ -92,8 +92,7 @@ export function CreateUserPlaylistDialog({
       }
     } catch (error) {
       toast.error(
-        getErrorMessage(error) ||
-          `Failed to ${isEditing ? 'update' : 'create'} playlist`
+        getErrorMessage(error) || `Failed to ${isEditing ? 'update' : 'create'} playlist`
       );
     }
   };
@@ -108,9 +107,7 @@ export function CreateUserPlaylistDialog({
     <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle>
-            {isEditing ? 'Edit Playlist' : 'Create New Playlist'}
-          </DialogTitle>
+          <DialogTitle>{isEditing ? 'Edit Playlist' : 'Create New Playlist'}</DialogTitle>
           <DialogDescription>
             {isEditing
               ? 'Update your playlist details below.'
@@ -167,10 +164,7 @@ export function CreateUserPlaylistDialog({
             >
               Cancel
             </Button>
-            <Button
-              type="submit"
-              disabled={createPlaylist.isPending || updatePlaylist.isPending}
-            >
+            <Button type="submit" disabled={createPlaylist.isPending || updatePlaylist.isPending}>
               {createPlaylist.isPending || updatePlaylist.isPending
                 ? isEditing
                   ? 'Updating...'
diff --git a/frontend/src/components/playlist/IconSelector.tsx b/frontend/src/components/playlist/IconSelector.tsx
index 650e9e8..48189ee 100644
--- a/frontend/src/components/playlist/IconSelector.tsx
+++ b/frontend/src/components/playlist/IconSelector.tsx
@@ -53,15 +53,18 @@ export function IconSelector({
 
   // Flatten all icons from all categories into a single array (memoized to prevent GC pressure)
   const allIcons = useMemo(
-    () => Object.values(ICON_CATEGORIES).flatMap(category => category.icons),
+    () => Object.values(ICON_CATEGORIES).flatMap((category) => category.icons),
     [] // ICON_CATEGORIES is static, no dependencies needed
   );
 
   // Memoized handler to select an icon and close popover
-  const handleIconSelect = useCallback((iconName: PlaylistIconName) => {
-    onChange(iconName);
-    setOpen(false);
-  }, [onChange]);
+  const handleIconSelect = useCallback(
+    (iconName: PlaylistIconName) => {
+      onChange(iconName);
+      setOpen(false);
+    },
+    [onChange]
+  );
 
   // Memoized handler to clear selection
   const handleClear = useCallback(() => {
diff --git a/frontend/src/components/roles/PermissionSelector.tsx b/frontend/src/components/roles/PermissionSelector.tsx
index 9dec86f..d10c83e 100644
--- a/frontend/src/components/roles/PermissionSelector.tsx
+++ b/frontend/src/components/roles/PermissionSelector.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
-import { usePermissions, useUpdateRolePermissions } from "../../hooks/useRoles";
-import { Role } from "../../types/auth";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { getErrorMessage } from "@/types/api-error";
+import { useEffect, useState } from 'react';
+import { usePermissions, useUpdateRolePermissions } from '../../hooks/useRoles';
+import { Role } from '../../types/auth';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { getErrorMessage } from '@/types/api-error';
 import {
   Dialog,
   DialogContent,
@@ -13,7 +13,7 @@ import {
   DialogTitle,
   DialogFooter,
   DialogDescription,
-} from "@/components/ui/dialog";
+} from '@/components/ui/dialog';
 
 interface PermissionSelectorProps {
   role: Role;
@@ -21,17 +21,11 @@ interface PermissionSelectorProps {
   onSuccess: () => void;
 }
 
-export function PermissionSelector({
-  role,
-  onClose,
-  onSuccess,
-}: PermissionSelectorProps) {
+export function PermissionSelector({ role, onClose, onSuccess }: PermissionSelectorProps) {
   const { data: permissions } = usePermissions();
   const updatePermissionsMutation = useUpdateRolePermissions();
 
-  const [selectedPermissionIds, setSelectedPermissionIds] = useState<number[]>(
-    [],
-  );
+  const [selectedPermissionIds, setSelectedPermissionIds] = useState<number[]>([]);
 
   useEffect(() => {
     if (role) {
@@ -43,7 +37,7 @@ export function PermissionSelector({
     setSelectedPermissionIds((prev) =>
       prev.includes(permissionId)
         ? prev.filter((id) => id !== permissionId)
-        : [...prev, permissionId],
+        : [...prev, permissionId]
     );
   };
 
@@ -80,7 +74,7 @@ export function PermissionSelector({
         acc[permission.resource].push(permission);
         return acc;
       },
-      {} as Record<string, typeof permissions>,
+      {} as Record<string, typeof permissions>
     ) || {};
 
   return (
@@ -114,15 +108,13 @@ export function PermissionSelector({
 
         <DialogBody>
           {!permissions ? (
-            <div className="text-center py-8 text-muted-foreground">
-              Loading permissions...
-            </div>
+            <div className="text-center py-8 text-muted-foreground">Loading permissions...</div>
           ) : null}
 
           {updatePermissionsMutation.isError ? (
             <Alert variant="destructive" className="mb-4">
               <AlertDescription>
-                {getErrorMessage(updatePermissionsMutation.error) || "Failed to update permissions"}
+                {getErrorMessage(updatePermissionsMutation.error) || 'Failed to update permissions'}
               </AlertDescription>
             </Alert>
           ) : null}
@@ -145,16 +137,12 @@ export function PermissionSelector({
                           className="flex items-start space-x-3 cursor-pointer hover:bg-accent p-2 rounded"
                         >
                           <Checkbox
-                            checked={selectedPermissionIds.includes(
-                              permission.id,
-                            )}
+                            checked={selectedPermissionIds.includes(permission.id)}
                             onCheckedChange={() => handleToggle(permission.id)}
                             className="mt-0.5"
                           />
                           <div className="flex-1">
-                            <div className="text-sm font-medium">
-                              {permission.name}
-                            </div>
+                            <div className="text-sm font-medium">{permission.name}</div>
                             <div className="text-xs text-muted-foreground">
                               {permission.description}
                             </div>
@@ -171,8 +159,7 @@ export function PermissionSelector({
 
         <DialogFooter className="flex flex-col sm:flex-row sm:justify-between gap-4 sm:gap-0 items-center">
           <div className="text-sm text-muted-foreground">
-            {selectedPermissionIds.length} of {permissions?.length ?? 0}{" "}
-            permissions selected
+            {selectedPermissionIds.length} of {permissions?.length ?? 0} permissions selected
           </div>
           <div className="flex gap-2">
             <Button type="button" variant="secondary" onClick={onClose}>
@@ -183,9 +170,7 @@ export function PermissionSelector({
               onClick={handleSubmit}
               disabled={updatePermissionsMutation.isPending || !permissions}
             >
-              {updatePermissionsMutation.isPending
-                ? "Saving..."
-                : "Save Permissions"}
+              {updatePermissionsMutation.isPending ? 'Saving...' : 'Save Permissions'}
             </Button>
           </div>
         </DialogFooter>
diff --git a/frontend/src/components/roles/RoleForm.tsx b/frontend/src/components/roles/RoleForm.tsx
index 909a6b7..6f95c2e 100644
--- a/frontend/src/components/roles/RoleForm.tsx
+++ b/frontend/src/components/roles/RoleForm.tsx
@@ -29,9 +29,15 @@ import {
 } from '@/components/ui/dialog';
 
 const roleSchema = z.object({
-  name: z.string().min(3, 'Name must be at least 3 characters').max(50, 'Name must be at most 50 characters'),
+  name: z
+    .string()
+    .min(3, 'Name must be at least 3 characters')
+    .max(50, 'Name must be at most 50 characters'),
   description: z.string().optional(),
-  priority: z.number().min(0, 'Priority must be at least 0').max(100, 'Priority must be at most 100'),
+  priority: z
+    .number()
+    .min(0, 'Priority must be at least 0')
+    .max(100, 'Priority must be at most 100'),
   permissionIds: z.array(z.number()).optional(),
 });
 
@@ -56,7 +62,7 @@ export function RoleForm({ role, onClose, onSuccess }: RoleFormProps) {
       name: role?.name || '',
       description: role?.description || '',
       priority: role?.priority || 0,
-      permissionIds: role?.permissions?.map(p => p.id) || [],
+      permissionIds: role?.permissions?.map((p) => p.id) || [],
     },
   });
 
@@ -66,7 +72,7 @@ export function RoleForm({ role, onClose, onSuccess }: RoleFormProps) {
         name: role.name,
         description: role.description,
         priority: role.priority,
-        permissionIds: role.permissions?.map(p => p.id) || [],
+        permissionIds: role.permissions?.map((p) => p.id) || [],
       });
     }
   }, [role, form]);
@@ -102,9 +108,7 @@ export function RoleForm({ role, onClose, onSuccess }: RoleFormProps) {
     <Dialog open={true} onOpenChange={(open: boolean) => !open && onClose()}>
       <DialogContent className="sm:max-w-2xl">
         <DialogHeader>
-          <DialogTitle>
-            {isEditMode ? 'Edit Role' : 'Create New Role'}
-          </DialogTitle>
+          <DialogTitle>{isEditMode ? 'Edit Role' : 'Create New Role'}</DialogTitle>
         </DialogHeader>
 
         <DialogBody>
@@ -125,10 +129,7 @@ export function RoleForm({ role, onClose, onSuccess }: RoleFormProps) {
                   <FormItem>
                     <FormLabel>Name</FormLabel>
                     <FormControl>
-                      <Input
-                        placeholder="e.g. moderator"
-                        {...field}
-                      />
+                      <Input placeholder="e.g. moderator" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -211,7 +212,7 @@ export function RoleForm({ role, onClose, onSuccess }: RoleFormProps) {
                                               field.value?.filter(
                                                 (value) => value !== permission.id
                                               )
-                                            )
+                                            );
                                       }}
                                     />
                                   </FormControl>
@@ -226,7 +227,7 @@ export function RoleForm({ role, onClose, onSuccess }: RoleFormProps) {
                                     ) : null}
                                   </div>
                                 </FormItem>
-                              )
+                              );
                             }}
                           />
                         ))}
@@ -240,23 +241,17 @@ export function RoleForm({ role, onClose, onSuccess }: RoleFormProps) {
               {isEditMode ? (
                 <Alert className="border-blue-500 bg-blue-500/10 text-blue-400">
                   <AlertDescription>
-                    Permissions can be managed separately from role details. Use the permissions management page to update role permissions.
+                    Permissions can be managed separately from role details. Use the permissions
+                    management page to update role permissions.
                   </AlertDescription>
                 </Alert>
               ) : null}
 
               <DialogFooter>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={onClose}
-                >
+                <Button type="button" variant="secondary" onClick={onClose}>
                   Cancel
                 </Button>
-                <Button
-                  type="submit"
-                  disabled={mutation.isPending}
-                >
+                <Button type="submit" disabled={mutation.isPending}>
                   {mutation.isPending ? 'Saving...' : isEditMode ? 'Update' : 'Create'}
                 </Button>
               </DialogFooter>
diff --git a/frontend/src/components/roles/RoleTable.tsx b/frontend/src/components/roles/RoleTable.tsx
index e96100f..6fe50f1 100644
--- a/frontend/src/components/roles/RoleTable.tsx
+++ b/frontend/src/components/roles/RoleTable.tsx
@@ -65,10 +65,10 @@ export function RoleTable({ onEdit, onManagePermissions }: RoleTableProps) {
           name === 'admin'
             ? 'default'
             : name === 'user'
-            ? 'secondary'
-            : name === 'guest'
-            ? 'outline'
-            : 'secondary';
+              ? 'secondary'
+              : name === 'guest'
+                ? 'outline'
+                : 'secondary';
         return (
           <Badge variant={variant} className="capitalize">
             {name}
@@ -79,27 +79,19 @@ export function RoleTable({ onEdit, onManagePermissions }: RoleTableProps) {
     {
       accessorKey: 'description',
       header: 'Description',
-      cell: ({ row }) => (
-        <div className="text-muted-foreground">{row.getValue('description')}</div>
-      ),
+      cell: ({ row }) => <div className="text-muted-foreground">{row.getValue('description')}</div>,
     },
     {
       accessorKey: 'priority',
       header: 'Priority',
-      cell: ({ row }) => (
-        <div className="text-muted-foreground">{row.getValue('priority')}</div>
-      ),
+      cell: ({ row }) => <div className="text-muted-foreground">{row.getValue('priority')}</div>,
     },
     {
       accessorKey: 'permissions',
       header: 'Permissions',
       cell: ({ row }) => {
         const permissions = row.getValue('permissions') as string[];
-        return (
-          <div className="text-muted-foreground">
-            {permissions.length} permissions
-          </div>
-        );
+        return <div className="text-muted-foreground">{permissions.length} permissions</div>;
       },
     },
     {
@@ -122,10 +114,7 @@ export function RoleTable({ onEdit, onManagePermissions }: RoleTableProps) {
                 <DropdownMenuLabel>Actions</DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <RoleGuard permission="roles.update">
-                  <DropdownMenuItem
-                    onClick={() => onEdit(role)}
-                    disabled={isSystemRole}
-                  >
+                  <DropdownMenuItem onClick={() => onEdit(role)} disabled={isSystemRole}>
                     Edit Role
                   </DropdownMenuItem>
                 </RoleGuard>
@@ -145,9 +134,7 @@ export function RoleTable({ onEdit, onManagePermissions }: RoleTableProps) {
                 </RoleGuard>
               </DropdownMenuContent>
             </DropdownMenu>
-            {isSystemRole ? (
-              <span className="text-xs text-muted-foreground">(System)</span>
-            ) : null}
+            {isSystemRole ? <span className="text-xs text-muted-foreground">(System)</span> : null}
           </div>
         );
       },
@@ -157,8 +144,7 @@ export function RoleTable({ onEdit, onManagePermissions }: RoleTableProps) {
   if (isError) {
     return (
       <div className="rounded-lg border border-destructive bg-destructive/10 px-4 py-3 text-destructive">
-        Error loading roles:{' '}
-        {getErrorMessage(error) || 'Unknown error'}
+        Error loading roles: {getErrorMessage(error) || 'Unknown error'}
       </div>
     );
   }
diff --git a/frontend/src/components/search/FilterChips.tsx b/frontend/src/components/search/FilterChips.tsx
index 908b929..ae8e480 100644
--- a/frontend/src/components/search/FilterChips.tsx
+++ b/frontend/src/components/search/FilterChips.tsx
@@ -27,7 +27,7 @@ export function FilterChips({ chips, onRemove, onClearAll, className }: FilterCh
   }
 
   return (
-    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+    <div className={cn('flex flex-wrap items-center gap-2', className)}>
       <span className="text-sm text-muted-foreground font-medium">Active Filters:</span>
 
       {chips.map((chip) => (
diff --git a/frontend/src/components/search/FilterDropdown.tsx b/frontend/src/components/search/FilterDropdown.tsx
index 7301a09..c2e9172 100644
--- a/frontend/src/components/search/FilterDropdown.tsx
+++ b/frontend/src/components/search/FilterDropdown.tsx
@@ -41,21 +41,33 @@ export function FilterDropdown({
 }: FilterDropdownProps) {
   const selectedCount = selectedValues.length;
   const buttonText = compact
-    ? (selectedCount > 0 ? `${selectedCount}` : '')
-    : (selectedCount > 0 ? `${selectedCount} ${label}${selectedCount > 1 ? 's' : ''}` : placeholder);
+    ? selectedCount > 0
+      ? `${selectedCount}`
+      : ''
+    : selectedCount > 0
+      ? `${selectedCount} ${label}${selectedCount > 1 ? 's' : ''}`
+      : placeholder;
 
   return (
     <Popover open={isOpen} onOpenChange={onOpenChange} modal={false}>
       <PopoverTrigger asChild>
         <Button
           variant="outline"
-          className={compact ? "justify-between" : "min-w-[120px] justify-between"}
+          className={compact ? 'justify-between' : 'min-w-[120px] justify-between'}
           type="button"
           aria-label={`Filter by ${label}: ${selectedCount > 0 ? `${selectedCount} selected` : 'none selected'}`}
         >
-          {icon && <span className={compact ? "" : "mr-2"} aria-hidden="true">{icon}</span>}
-          {buttonText && <span className={compact && icon ? "ml-1" : ""}>{buttonText}</span>}
-          <ChevronDown size={16} className={`${compact ? 'ml-1' : 'ml-2'} transition-transform ${isOpen ? 'rotate-180' : ''}`} aria-hidden="true" />
+          {icon && (
+            <span className={compact ? '' : 'mr-2'} aria-hidden="true">
+              {icon}
+            </span>
+          )}
+          {buttonText && <span className={compact && icon ? 'ml-1' : ''}>{buttonText}</span>}
+          <ChevronDown
+            size={16}
+            className={`${compact ? 'ml-1' : 'ml-2'} transition-transform ${isOpen ? 'rotate-180' : ''}`}
+            aria-hidden="true"
+          />
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -101,9 +113,7 @@ export function FilterDropdown({
               </label>
             ))
           ) : (
-            <div className="p-4 text-center text-sm text-muted-foreground">
-              {emptyMessage}
-            </div>
+            <div className="p-4 text-center text-sm text-muted-foreground">{emptyMessage}</div>
           )}
         </div>
       </PopoverContent>
diff --git a/frontend/src/components/search/FilterPanel.tsx b/frontend/src/components/search/FilterPanel.tsx
index 70c8967..5454bdf 100644
--- a/frontend/src/components/search/FilterPanel.tsx
+++ b/frontend/src/components/search/FilterPanel.tsx
@@ -65,9 +65,8 @@ export function FilterPanel({ filters, showPlatformFilter = true }: FilterPanelP
   const renderFilters = (isMobile: boolean) => {
     const suffix = isMobile ? 'mobile' : 'desktop';
 
-    return FILTER_CONFIGS
-      .filter(config => showPlatformFilter || config.id !== 'platform')
-      .map(config => {
+    return FILTER_CONFIGS.filter((config) => showPlatformFilter || config.id !== 'platform').map(
+      (config) => {
         const handlers = createFilterHandlers(
           config.paramKey,
           config.id,
@@ -77,7 +76,8 @@ export function FilterPanel({ filters, showPlatformFilter = true }: FilterPanelP
         );
 
         const currentValue = filters[config.paramKey];
-        const selectedValues = typeof currentValue === 'string' ? currentValue.split(',').filter(Boolean) : [];
+        const selectedValues =
+          typeof currentValue === 'string' ? currentValue.split(',').filter(Boolean) : [];
         const options = filterOptions?.[config.optionsKey] || [];
 
         return (
@@ -96,7 +96,8 @@ export function FilterPanel({ filters, showPlatformFilter = true }: FilterPanelP
             compact={isMobile}
           />
         );
-      });
+      }
+    );
   };
 
   /**
@@ -104,11 +105,11 @@ export function FilterPanel({ filters, showPlatformFilter = true }: FilterPanelP
    * Eliminates 7 separate badge sections
    */
   const renderFilterBadges = () => {
-    return FILTER_CONFIGS
-      .filter(config => showPlatformFilter || config.id !== 'platform')
-      .map(config => {
+    return FILTER_CONFIGS.filter((config) => showPlatformFilter || config.id !== 'platform').map(
+      (config) => {
         const currentValue = filters[config.paramKey];
-        const selectedValues = typeof currentValue === 'string' ? currentValue.split(',').filter(Boolean) : [];
+        const selectedValues =
+          typeof currentValue === 'string' ? currentValue.split(',').filter(Boolean) : [];
         if (selectedValues.length === 0) return null;
 
         const handlers = createFilterHandlers(
@@ -136,7 +137,8 @@ export function FilterPanel({ filters, showPlatformFilter = true }: FilterPanelP
             ))}
           </div>
         );
-      });
+      }
+    );
   };
 
   return (
@@ -184,9 +186,7 @@ export function FilterPanel({ filters, showPlatformFilter = true }: FilterPanelP
         ) : null}
 
         {/* Filter Badges - Data-driven rendering */}
-        <div className="space-y-2">
-          {renderFilterBadges()}
-        </div>
+        <div className="space-y-2">{renderFilterBadges()}</div>
       </div>
     </fieldset>
   );
diff --git a/frontend/src/components/search/filterConfig.ts b/frontend/src/components/search/filterConfig.ts
index 3d0cd46..dfe6458 100644
--- a/frontend/src/components/search/filterConfig.ts
+++ b/frontend/src/components/search/filterConfig.ts
@@ -2,14 +2,21 @@ import { Gamepad2, Tv, User, Building2, Users, Globe, Tag, type LucideIcon } fro
 import type { GameFilters } from '@/types/game';
 
 export interface FilterConfig {
-  id: string;              // 'platform', 'series', etc.
-  label: string;           // 'Platform', 'Series', etc.
+  id: string; // 'platform', 'series', etc.
+  label: string; // 'Platform', 'Series', etc.
   icon: LucideIcon;
-  paramKey: keyof GameFilters;        // URL param key
-  optionsKey: 'platforms' | 'series' | 'developers' | 'publishers' | 'playModes' | 'languages' | 'tags';      // Key in filterOptions response
+  paramKey: keyof GameFilters; // URL param key
+  optionsKey:
+    | 'platforms'
+    | 'series'
+    | 'developers'
+    | 'publishers'
+    | 'playModes'
+    | 'languages'
+    | 'tags'; // Key in filterOptions response
   placeholder?: string;
   emptyMessage?: string;
-  badgeLabel: string;      // Plural form for badges ("Platforms", "Tags", etc.)
+  badgeLabel: string; // Plural form for badges ("Platforms", "Tags", etc.)
 }
 
 export const FILTER_CONFIGS: FilterConfig[] = [
diff --git a/frontend/src/components/settings/AppSettingsTab.tsx b/frontend/src/components/settings/AppSettingsTab.tsx
index 546448e..4919f02 100644
--- a/frontend/src/components/settings/AppSettingsTab.tsx
+++ b/frontend/src/components/settings/AppSettingsTab.tsx
@@ -1,16 +1,22 @@
-import { useState, useEffect } from "react";
-import { Palette, Check, Globe, Plus, Trash2 } from "lucide-react";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import { Button } from "@/components/ui/button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { motion, Variants } from "framer-motion";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { systemSettingsApi } from "@/lib/api";
-import { useAuthStore } from "@/store/auth";
-import { useDialog } from "@/contexts/DialogContext";
-import { AppSettings } from "@/types/settings";
-import { useDomains, useAddDomain, useDeleteDomain, useSetDefaultDomain } from "@/hooks/useDomains";
+import { useState, useEffect } from 'react';
+import { Palette, Check, Globe, Plus, Trash2 } from 'lucide-react';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { motion, Variants } from 'framer-motion';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { systemSettingsApi } from '@/lib/api';
+import { useAuthStore } from '@/store/auth';
+import { useDialog } from '@/contexts/DialogContext';
+import { AppSettings } from '@/types/settings';
+import { useDomains, useAddDomain, useDeleteDomain, useSetDefaultDomain } from '@/hooks/useDomains';
 
 interface AppSettingsTabProps {
   tabContentVariants: Variants;
@@ -20,13 +26,13 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
   const { user } = useAuthStore();
   const { showToast } = useDialog();
   const queryClient = useQueryClient();
-  const isAdmin = user?.permissions.includes("settings.update");
+  const isAdmin = user?.permissions.includes('settings.update');
 
   // Local state for site name input
-  const [siteNameInput, setSiteNameInput] = useState("");
+  const [siteNameInput, setSiteNameInput] = useState('');
 
   // Domain settings state
-  const [domainInput, setDomainInput] = useState("");
+  const [domainInput, setDomainInput] = useState('');
   const [domainError, setDomainError] = useState<string | null>(null);
   const { data: domains } = useDomains(!!isAdmin);
   const addDomainMutation = useAddDomain();
@@ -35,8 +41,8 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
 
   // Fetch app settings
   const { data: appSettings } = useQuery({
-    queryKey: ["systemSettings", "app"],
-    queryFn: async () => systemSettingsApi.getCategory("app") as unknown as AppSettings,
+    queryKey: ['systemSettings', 'app'],
+    queryFn: async () => systemSettingsApi.getCategory('app') as unknown as AppSettings,
     enabled: isAdmin,
   });
 
@@ -49,42 +55,33 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
 
   // Update system settings mutation
   const updateSystemSettings = useMutation({
-    mutationFn: ({
-      category,
-      settings,
-    }: {
-      category: string;
-      settings: Record<string, unknown>;
-    }) => systemSettingsApi.updateCategory(category, settings),
+    mutationFn: ({ category, settings }: { category: string; settings: Record<string, unknown> }) =>
+      systemSettingsApi.updateCategory(category, settings),
     onSuccess: (updatedSettings, variables) => {
       // Use response data instead of refetching
-      queryClient.setQueryData(
-        ["systemSettings", variables.category],
-        updatedSettings
-      );
+      queryClient.setQueryData(['systemSettings', variables.category], updatedSettings);
 
       // Invalidate public settings cache so header updates
       queryClient.invalidateQueries({
-        queryKey: ["system-settings", "public"],
+        queryKey: ['system-settings', 'public'],
       });
 
-      showToast("Settings updated successfully", "success");
+      showToast('Settings updated successfully', 'success');
     },
     onError: (error: any) => {
-      const message =
-        error?.response?.data?.error?.message || "Failed to update settings";
-      showToast(message, "error");
+      const message = error?.response?.data?.error?.message || 'Failed to update settings';
+      showToast(message, 'error');
     },
   });
 
   // Handler to save site name
   const handleSaveSiteName = () => {
-    if (siteNameInput.trim() === "") {
-      showToast("Site name cannot be empty", "error");
+    if (siteNameInput.trim() === '') {
+      showToast('Site name cannot be empty', 'error');
       return;
     }
     updateSystemSettings.mutate({
-      category: "app",
+      category: 'app',
       settings: { siteName: siteNameInput.trim() },
     });
   };
@@ -122,7 +119,7 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
                   value={siteNameInput}
                   onChange={(e) => setSiteNameInput(e.target.value)}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter") {
+                    if (e.key === 'Enter') {
                       handleSaveSiteName();
                     }
                   }}
@@ -133,7 +130,7 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
                   onClick={handleSaveSiteName}
                   disabled={
                     updateSystemSettings.isPending ||
-                    siteNameInput.trim() === "" ||
+                    siteNameInput.trim() === '' ||
                     siteNameInput === appSettings?.siteName
                   }
                   size="icon"
@@ -151,8 +148,7 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
                   Maintenance Mode
                 </Label>
                 <p className="text-sm text-muted-foreground">
-                  Enable maintenance mode to prevent non-admin users from
-                  accessing the application.
+                  Enable maintenance mode to prevent non-admin users from accessing the application.
                 </p>
               </div>
               <Switch
@@ -160,7 +156,7 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
                 checked={appSettings.maintenanceMode || false}
                 onCheckedChange={(checked: boolean) => {
                   updateSystemSettings.mutate({
-                    category: "app",
+                    category: 'app',
                     settings: { maintenanceMode: checked },
                   });
                 }}
@@ -177,10 +173,10 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
                 Default theme mode for new users (light, dark, or system).
               </p>
               <Select
-                value={appSettings.defaultTheme || "dark"}
+                value={appSettings.defaultTheme || 'dark'}
                 onValueChange={(value: string) => {
                   updateSystemSettings.mutate({
-                    category: "app",
+                    category: 'app',
                     settings: { defaultTheme: value },
                   });
                 }}
@@ -202,14 +198,12 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
               <Label htmlFor="default-primary-color" className="text-base">
                 Default Primary Color
               </Label>
-              <p className="text-sm text-muted-foreground">
-                Default primary color for new users.
-              </p>
+              <p className="text-sm text-muted-foreground">Default primary color for new users.</p>
               <Select
-                value={appSettings.defaultPrimaryColor || "blue"}
+                value={appSettings.defaultPrimaryColor || 'blue'}
                 onValueChange={(value: string) => {
                   updateSystemSettings.mutate({
-                    category: "app",
+                    category: 'app',
                     settings: {
                       defaultPrimaryColor: value,
                     },
@@ -257,8 +251,8 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
             <h2 className="text-xl font-semibold">Domain Settings</h2>
           </div>
           <p className="text-sm text-muted-foreground mb-4">
-            Configure custom domains for sharing playlists. The default domain
-            is used in share links for non-admin users.
+            Configure custom domains for sharing playlists. The default domain is used in share
+            links for non-admin users.
           </p>
 
           {/* Add Domain */}
@@ -267,7 +261,7 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
               <input
                 type="text"
                 className={`w-full px-3 py-2 bg-background border rounded-md focus:outline-none focus:ring-1 focus:ring-primary ${
-                  domainError ? "border-destructive" : "border-border"
+                  domainError ? 'border-destructive' : 'border-border'
                 }`}
                 value={domainInput}
                 onChange={(e) => {
@@ -275,14 +269,12 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
                   setDomainError(null);
                 }}
                 onKeyDown={(e) => {
-                  if (e.key === "Enter") handleAddDomain();
+                  if (e.key === 'Enter') handleAddDomain();
                 }}
                 placeholder="e.g., play.example.com"
                 disabled={addDomainMutation.isPending}
               />
-              {domainError ? (
-                <p className="text-xs text-destructive mt-1">{domainError}</p>
-              ) : null}
+              {domainError ? <p className="text-xs text-destructive mt-1">{domainError}</p> : null}
             </div>
             <Button
               onClick={handleAddDomain}
@@ -311,9 +303,7 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
                       disabled={setDefaultDomainMutation.isPending}
                       className="accent-primary"
                     />
-                    <span className="text-sm font-mono truncate">
-                      {domain.hostname}
-                    </span>
+                    <span className="text-sm font-mono truncate">{domain.hostname}</span>
                     {domain.isDefault ? (
                       <span className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full whitespace-nowrap">
                         default
@@ -335,8 +325,7 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
             </div>
           ) : (
             <p className="text-sm text-muted-foreground italic">
-              No domains configured. Share links will use the current browser
-              URL.
+              No domains configured. Share links will use the current browser URL.
             </p>
           )}
         </div>
@@ -358,13 +347,13 @@ export function AppSettingsTab({ tabContentVariants }: AppSettingsTabProps) {
       return;
     }
     if (domains?.some((d) => d.hostname.toLowerCase() === value.toLowerCase())) {
-      setDomainError("This domain already exists");
+      setDomainError('This domain already exists');
       return;
     }
 
     addDomainMutation.mutate(value, {
       onSuccess: () => {
-        setDomainInput("");
+        setDomainInput('');
         setDomainError(null);
       },
     });
diff --git a/frontend/src/components/settings/FeaturesSettingsTab.tsx b/frontend/src/components/settings/FeaturesSettingsTab.tsx
index 5002925..cf953da 100644
--- a/frontend/src/components/settings/FeaturesSettingsTab.tsx
+++ b/frontend/src/components/settings/FeaturesSettingsTab.tsx
@@ -1,54 +1,43 @@
-import { ToggleLeft, Info } from "lucide-react";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { motion, Variants } from "framer-motion";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { systemSettingsApi } from "@/lib/api";
-import { useAuthStore } from "@/store/auth";
-import { useDialog } from "@/contexts/DialogContext";
+import { ToggleLeft, Info } from 'lucide-react';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { motion, Variants } from 'framer-motion';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { systemSettingsApi } from '@/lib/api';
+import { useAuthStore } from '@/store/auth';
+import { useDialog } from '@/contexts/DialogContext';
 
 interface FeaturesSettingsTabProps {
   tabContentVariants: Variants;
 }
 
-export function FeaturesSettingsTab({
-  tabContentVariants,
-}: FeaturesSettingsTabProps) {
+export function FeaturesSettingsTab({ tabContentVariants }: FeaturesSettingsTabProps) {
   const { user } = useAuthStore();
   const { showToast } = useDialog();
   const queryClient = useQueryClient();
-  const isAdmin = user?.permissions.includes("settings.update");
+  const isAdmin = user?.permissions.includes('settings.update');
 
   // Fetch feature settings
   const { data: featureSettings } = useQuery({
-    queryKey: ["systemSettings", "features"],
-    queryFn: () => systemSettingsApi.getCategory("features"),
+    queryKey: ['systemSettings', 'features'],
+    queryFn: () => systemSettingsApi.getCategory('features'),
     enabled: isAdmin,
   });
 
   // Update system settings mutation
   const updateSystemSettings = useMutation({
-    mutationFn: ({
-      category,
-      settings,
-    }: {
-      category: string;
-      settings: Record<string, unknown>;
-    }) => systemSettingsApi.updateCategory(category, settings),
+    mutationFn: ({ category, settings }: { category: string; settings: Record<string, unknown> }) =>
+      systemSettingsApi.updateCategory(category, settings),
     onSuccess: (updatedSettings, variables) => {
       // Use response data instead of refetching
-      queryClient.setQueryData(
-        ["systemSettings", variables.category],
-        updatedSettings
-      );
+      queryClient.setQueryData(['systemSettings', variables.category], updatedSettings);
 
-      showToast("Settings updated successfully", "success");
+      showToast('Settings updated successfully', 'success');
     },
     onError: (error: any) => {
-      const message =
-        error?.response?.data?.error?.message || "Failed to update settings";
-      showToast(message, "error");
+      const message = error?.response?.data?.error?.message || 'Failed to update settings';
+      showToast(message, 'error');
     },
   });
 
@@ -71,7 +60,9 @@ export function FeaturesSettingsTab({
           <Alert className="mb-6 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
             <Info className="h-4 w-4 text-blue-600 dark:text-blue-400" />
             <AlertDescription className="text-blue-800 dark:text-blue-200">
-              <strong>Admin Access:</strong> Feature flags only affect normal users. As an admin, you have full access to all features regardless of these settings, allowing you to manage and monitor the system effectively.
+              <strong>Admin Access:</strong> Feature flags only affect normal users. As an admin,
+              you have full access to all features regardless of these settings, allowing you to
+              manage and monitor the system effectively.
             </AlertDescription>
           </Alert>
 
@@ -91,7 +82,7 @@ export function FeaturesSettingsTab({
                 checked={featureSettings.enablePlaylists !== false}
                 onCheckedChange={(checked: boolean) => {
                   updateSystemSettings.mutate({
-                    category: "features",
+                    category: 'features',
                     settings: { enablePlaylists: checked },
                   });
                 }}
@@ -114,7 +105,7 @@ export function FeaturesSettingsTab({
                 checked={featureSettings.enableFavorites !== false}
                 onCheckedChange={(checked: boolean) => {
                   updateSystemSettings.mutate({
-                    category: "features",
+                    category: 'features',
                     settings: { enableFavorites: checked },
                   });
                 }}
@@ -137,7 +128,7 @@ export function FeaturesSettingsTab({
                 checked={featureSettings.enableStatistics !== false}
                 onCheckedChange={(checked: boolean) => {
                   updateSystemSettings.mutate({
-                    category: "features",
+                    category: 'features',
                     settings: { enableStatistics: checked },
                   });
                 }}
diff --git a/frontend/src/components/settings/GeneralSettingsTab.tsx b/frontend/src/components/settings/GeneralSettingsTab.tsx
index c58880b..7f677f4 100644
--- a/frontend/src/components/settings/GeneralSettingsTab.tsx
+++ b/frontend/src/components/settings/GeneralSettingsTab.tsx
@@ -1,51 +1,49 @@
-import { Shield, Calendar } from "lucide-react";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import { motion, Variants } from "framer-motion";
-import { useQuery, useMutation } from "@tanstack/react-query";
-import { authSettingsApi, ruffleApi, usersApi } from "@/lib/api";
-import { useAuthStore } from "@/store/auth";
-import { useDialog } from "@/contexts/DialogContext";
-import { usePublicSettings } from "@/hooks/usePublicSettings";
+import { Shield, Calendar } from 'lucide-react';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { motion, Variants } from 'framer-motion';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { authSettingsApi, ruffleApi, usersApi } from '@/lib/api';
+import { useAuthStore } from '@/store/auth';
+import { useDialog } from '@/contexts/DialogContext';
+import { usePublicSettings } from '@/hooks/usePublicSettings';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from '@/components/ui/select';
 
 interface GeneralSettingsTabProps {
   tabContentVariants: Variants;
 }
 
-export function GeneralSettingsTab({
-  tabContentVariants,
-}: GeneralSettingsTabProps) {
+export function GeneralSettingsTab({ tabContentVariants }: GeneralSettingsTabProps) {
   const { user } = useAuthStore();
   const { showToast } = useDialog();
-  const isAdmin = user?.permissions.includes("settings.update");
+  const isAdmin = user?.permissions.includes('settings.update');
 
   // Public settings (cached, no extra request) for edition/version
   const { data: publicSettings } = usePublicSettings();
 
   // Fetch auth settings
   const { data: authSettings, refetch: refetchAuthSettings } = useQuery({
-    queryKey: ["authSettings"],
+    queryKey: ['authSettings'],
     queryFn: () => authSettingsApi.get(),
     enabled: isAdmin,
   });
 
   // Fetch Ruffle version (public - accessible to all users)
   const { data: ruffleVersion, isLoading: isLoadingRuffleVersion } = useQuery({
-    queryKey: ["ruffleVersion"],
+    queryKey: ['ruffleVersion'],
     queryFn: () => ruffleApi.getVersion(),
     staleTime: 5 * 60 * 1000, // 5 minutes
   });
 
   // Fetch user settings (for date/time format preferences)
   const { data: userSettings, refetch: refetchUserSettings } = useQuery({
-    queryKey: ["userSettings"],
+    queryKey: ['userSettings'],
     queryFn: () => usersApi.getAllSettings(),
     staleTime: 5 * 60 * 1000, // 5 minutes
   });
@@ -55,27 +53,24 @@ export function GeneralSettingsTab({
     mutationFn: (settings: Partial<any>) => authSettingsApi.update(settings),
     onSuccess: () => {
       refetchAuthSettings();
-      showToast("Settings updated successfully", "success");
+      showToast('Settings updated successfully', 'success');
     },
     onError: (error: any) => {
-      const message =
-        error?.response?.data?.error?.message || "Failed to update settings";
-      showToast(message, "error");
+      const message = error?.response?.data?.error?.message || 'Failed to update settings';
+      showToast(message, 'error');
     },
   });
 
   // Update user settings mutation (for date/time format preferences)
   const updateUserSettings = useMutation({
-    mutationFn: (settings: Record<string, string>) =>
-      usersApi.updateSettings(settings),
+    mutationFn: (settings: Record<string, string>) => usersApi.updateSettings(settings),
     onSuccess: () => {
       refetchUserSettings();
-      showToast("Settings updated successfully", "success");
+      showToast('Settings updated successfully', 'success');
     },
     onError: (error: any) => {
-      const message =
-        error?.response?.data?.error?.message || "Failed to update settings";
-      showToast(message, "error");
+      const message = error?.response?.data?.error?.message || 'Failed to update settings';
+      showToast(message, 'error');
     },
   });
 
@@ -97,7 +92,7 @@ export function GeneralSettingsTab({
             <span className="font-medium">
               {publicSettings?.metadata?.flashpointVersion
                 ? String(publicSettings.metadata.flashpointVersion)
-                : "Unknown"}
+                : 'Unknown'}
             </span>
           </div>
           <div className="flex justify-between">
@@ -105,7 +100,7 @@ export function GeneralSettingsTab({
             <span className="font-medium capitalize">
               {publicSettings?.metadata?.flashpointEdition
                 ? String(publicSettings.metadata.flashpointEdition)
-                : "Unknown"}
+                : 'Unknown'}
             </span>
           </div>
           <div className="flex justify-between">
@@ -116,8 +111,8 @@ export function GeneralSettingsTab({
             <span className="text-muted-foreground">Ruffle Emulator:</span>
             <span className="font-medium">
               {isLoadingRuffleVersion
-                ? "Loading..."
-                : ruffleVersion?.currentVersion || "Not installed"}
+                ? 'Loading...'
+                : ruffleVersion?.currentVersion || 'Not installed'}
             </span>
           </div>
         </div>
@@ -139,7 +134,7 @@ export function GeneralSettingsTab({
                 Choose how dates are displayed throughout the application
               </p>
               <Select
-                value={userSettings.date_format || "MM/dd/yyyy"}
+                value={userSettings.date_format || 'MM/dd/yyyy'}
                 onValueChange={(value: string) => {
                   updateUserSettings.mutate({ date_format: value });
                 }}
@@ -168,7 +163,7 @@ export function GeneralSettingsTab({
                 Choose how times are displayed throughout the application
               </p>
               <Select
-                value={userSettings.time_format || "hh:mm a"}
+                value={userSettings.time_format || 'hh:mm a'}
                 onValueChange={(value: string) => {
                   updateUserSettings.mutate({ time_format: value });
                 }}
@@ -205,8 +200,8 @@ export function GeneralSettingsTab({
                     Allow User Registration
                   </Label>
                   <p className="text-sm text-muted-foreground">
-                    When enabled, anonymous users can create their own accounts.
-                    When disabled, only administrators can create users.
+                    When enabled, anonymous users can create their own accounts. When disabled, only
+                    administrators can create users.
                   </p>
                 </div>
                 <Switch
@@ -227,9 +222,8 @@ export function GeneralSettingsTab({
                     Allow Guest Access
                   </Label>
                   <p className="text-sm text-muted-foreground">
-                    When enabled, users can browse games without logging in.
-                    When disabled, authentication is required to access the
-                    application.
+                    When enabled, users can browse games without logging in. When disabled,
+                    authentication is required to access the application.
                   </p>
                 </div>
                 <Switch
diff --git a/frontend/src/components/settings/UpdateSettingsTab.tsx b/frontend/src/components/settings/UpdateSettingsTab.tsx
index 1cd51a4..f2a607e 100644
--- a/frontend/src/components/settings/UpdateSettingsTab.tsx
+++ b/frontend/src/components/settings/UpdateSettingsTab.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from 'react';
 import { logger } from '@/lib/logger';
 import {
   RefreshCw,
@@ -11,23 +11,19 @@ import {
   ChevronDown,
   ChevronUp,
   Calendar,
-} from "lucide-react";
-import { motion, Variants } from "framer-motion";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { FormattedDate } from "@/components/common/FormattedDate";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useAuthStore } from "@/store/auth";
-import { useDialog } from "@/contexts/DialogContext";
-import { useMountEffect } from "@/hooks/useMountEffect";
-import { useQuery, useMutation } from "@tanstack/react-query";
-import { ruffleApi, updatesApi } from "@/lib/api";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+} from 'lucide-react';
+import { motion, Variants } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { FormattedDate } from '@/components/common/FormattedDate';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useAuthStore } from '@/store/auth';
+import { useDialog } from '@/contexts/DialogContext';
+import { useMountEffect } from '@/hooks/useMountEffect';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { ruffleApi, updatesApi } from '@/lib/api';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 interface MetadataUpdateInfo {
   hasUpdates: boolean;
@@ -44,19 +40,15 @@ interface UpdateSettingsTabProps {
   tabContentVariants: Variants;
 }
 
-export function UpdateSettingsTab({
-  tabContentVariants,
-}: UpdateSettingsTabProps) {
+export function UpdateSettingsTab({ tabContentVariants }: UpdateSettingsTabProps) {
   const { user } = useAuthStore();
   const { showToast } = useDialog();
-  const isAdmin = user?.permissions.includes("settings.update");
+  const isAdmin = user?.permissions.includes('settings.update');
 
   const [isSyncingMetadata, setIsSyncingMetadata] = useState(false);
   const [syncProgress, setSyncProgress] = useState(0);
-  const [syncMessage, setSyncMessage] = useState("");
-  const [metadataInfo, setMetadataInfo] = useState<MetadataUpdateInfo | null>(
-    null,
-  );
+  const [syncMessage, setSyncMessage] = useState('');
+  const [metadataInfo, setMetadataInfo] = useState<MetadataUpdateInfo | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [updateCheckResult, setUpdateCheckResult] = useState<{
     latestVersion: string;
@@ -80,21 +72,21 @@ export function UpdateSettingsTab({
     isFetchingMetadata.current = true;
 
     try {
-      const response = await fetch("/api/updates/metadata");
+      const response = await fetch('/api/updates/metadata');
       if (!response.ok) {
-        throw new Error("Failed to check metadata updates");
+        throw new Error('Failed to check metadata updates');
       }
 
       const data = await response.json();
       setMetadataInfo(data);
     } catch (err) {
-      logger.error("Error checking metadata updates:", err);
+      logger.error('Error checking metadata updates:', err);
       setMetadataInfo({
         hasUpdates: false,
         gamesUpdateAvailable: false,
         tagsUpdateAvailable: false,
       });
-      setError("Failed to check metadata updates. Please try again later.");
+      setError('Failed to check metadata updates. Please try again later.');
     } finally {
       isFetchingMetadata.current = false;
     }
@@ -113,7 +105,7 @@ export function UpdateSettingsTab({
   const syncMetadata = async () => {
     setIsSyncingMetadata(true);
     setSyncProgress(0);
-    setSyncMessage("Starting sync...");
+    setSyncMessage('Starting sync...');
     setError(null);
 
     // Clear any existing polling
@@ -130,12 +122,12 @@ export function UpdateSettingsTab({
       const startResult = await updatesApi.startMetadataSync();
 
       if (!startResult.success) {
-        showToast("Sync is already in progress", "warning");
+        showToast('Sync is already in progress', 'warning');
         setIsSyncingMetadata(false);
         return;
       }
 
-      showToast("Metadata sync started. Polling for progress...", "info");
+      showToast('Metadata sync started. Polling for progress...', 'info');
 
       // Poll for status updates
       pollIntervalRef.current = setInterval(async () => {
@@ -157,15 +149,15 @@ export function UpdateSettingsTab({
 
             setIsSyncingMetadata(false);
             setSyncProgress(0);
-            setSyncMessage("");
+            setSyncMessage('');
 
-            if (status.stage === "completed" && status.result) {
+            if (status.stage === 'completed' && status.result) {
               const result = status.result;
               const message = `Metadata sync completed! ${result.gamesUpdated} game${result.gamesUpdated !== 1 ? 's' : ''} updated.`;
-              showToast(message, "success");
+              showToast(message, 'success');
               await checkMetadataUpdates();
-            } else if (status.stage === "failed") {
-              throw new Error(status.error || "Metadata sync failed");
+            } else if (status.stage === 'failed') {
+              throw new Error(status.error || 'Metadata sync failed');
             }
           }
         } catch (pollError) {
@@ -179,7 +171,7 @@ export function UpdateSettingsTab({
           }
           setIsSyncingMetadata(false);
           setSyncProgress(0);
-          setSyncMessage("");
+          setSyncMessage('');
           throw pollError;
         }
       }, 1000);
@@ -191,22 +183,22 @@ export function UpdateSettingsTab({
         }
         setIsSyncingMetadata(false);
         setSyncProgress(0);
-        setSyncMessage("");
-        showToast("Sync timeout - please check server logs", "warning");
+        setSyncMessage('');
+        showToast('Sync timeout - please check server logs', 'warning');
       }, 600000);
     } catch (err: any) {
       // Handle 409 conflict (sync already in progress)
       if (err?.response?.status === 409) {
-        showToast("Sync is already in progress", "warning");
+        showToast('Sync is already in progress', 'warning');
       } else {
-        const errorMsg = err?.response?.data?.error || err?.message || "Failed to sync metadata";
+        const errorMsg = err?.response?.data?.error || err?.message || 'Failed to sync metadata';
         setError(errorMsg);
-        showToast(errorMsg, "error");
+        showToast(errorMsg, 'error');
       }
 
       setIsSyncingMetadata(false);
       setSyncProgress(0);
-      setSyncMessage("");
+      setSyncMessage('');
 
       if (pollIntervalRef.current) {
         clearInterval(pollIntervalRef.current);
@@ -221,7 +213,7 @@ export function UpdateSettingsTab({
 
   // Fetch Ruffle version (public - accessible to all users)
   const { data: ruffleVersion, refetch: refetchRuffleVersion } = useQuery({
-    queryKey: ["ruffleVersion"],
+    queryKey: ['ruffleVersion'],
     queryFn: () => ruffleApi.getVersion(),
     staleTime: 5 * 60 * 1000, // 5 minutes
   });
@@ -239,16 +231,15 @@ export function UpdateSettingsTab({
       if (data.updateAvailable) {
         showToast(
           `Ruffle ${data.latestVersion} is available! Current: ${data.currentVersion}`,
-          "success",
+          'success'
         );
       } else {
-        showToast("Ruffle is up to date!", "success");
+        showToast('Ruffle is up to date!', 'success');
       }
     },
     onError: (error: any) => {
-      const message =
-        error?.response?.data?.error?.message || "Failed to check for updates";
-      showToast(message, "error");
+      const message = error?.response?.data?.error?.message || 'Failed to check for updates';
+      showToast(message, 'error');
     },
   });
 
@@ -256,26 +247,19 @@ export function UpdateSettingsTab({
   const updateRuffle = useMutation({
     mutationFn: () => ruffleApi.update(),
     onSuccess: (data) => {
-      showToast(
-        `${data.message}. Please refresh the page to use the new version.`,
-        "success",
-      );
+      showToast(`${data.message}. Please refresh the page to use the new version.`, 'success');
       refetchRuffleVersion();
       setUpdateCheckResult(null);
     },
     onError: (error: any) => {
-      const message =
-        error?.response?.data?.error?.message || "Failed to update Ruffle";
-      showToast(message, "error");
+      const message = error?.response?.data?.error?.message || 'Failed to update Ruffle';
+      showToast(message, 'error');
     },
   });
 
   // Auto-expand changelog if new version is available with changelog
   useEffect(() => {
-    if (
-      updateCheckResult?.updateAvailable &&
-      updateCheckResult?.changelog
-    ) {
+    if (updateCheckResult?.updateAvailable && updateCheckResult?.changelog) {
       setShowChangelog(true);
     } else {
       setShowChangelog(false);
@@ -311,7 +295,7 @@ export function UpdateSettingsTab({
               <Database size={24} className="text-primary" />
               <h2 className="text-xl font-semibold">Game Metadata</h2>
             </div>
-            {metadataInfo?.edition !== "ultimate" ? (
+            {metadataInfo?.edition !== 'ultimate' ? (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -322,169 +306,151 @@ export function UpdateSettingsTab({
                   >
                     <RefreshCw
                       size={18}
-                      className={isFetchingMetadata.current ? "animate-spin" : ""}
+                      className={isFetchingMetadata.current ? 'animate-spin' : ''}
                     />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <p>
-                    {isFetchingMetadata.current
-                      ? "Checking..."
-                      : "Check for Updates"}
-                  </p>
+                  <p>{isFetchingMetadata.current ? 'Checking...' : 'Check for Updates'}</p>
                 </TooltipContent>
               </Tooltip>
             ) : null}
           </div>
 
           {/* Ultimate Edition: No metadata sync available */}
-          {metadataInfo?.edition === "ultimate" ? (
+          {metadataInfo?.edition === 'ultimate' ? (
             <div className="bg-muted border border-border rounded-lg p-4 flex items-center gap-3">
               <Info size={20} className="text-muted-foreground flex-shrink-0" />
               <div>
-                <p className="text-foreground font-medium">
-                  Metadata sync not available
-                </p>
+                <p className="text-foreground font-medium">Metadata sync not available</p>
                 <p className="text-muted-foreground text-sm mt-1">
-                  Flashpoint Ultimate edition does not include a metadata source
-                  server. Metadata sync is only available with Flashpoint Infinity.
+                  Flashpoint Ultimate edition does not include a metadata source server. Metadata
+                  sync is only available with Flashpoint Infinity.
                 </p>
               </div>
             </div>
           ) : null}
 
           {/* Infinity Edition: Metadata sync UI */}
-          {metadataInfo?.edition !== "ultimate" ? (
+          {metadataInfo?.edition !== 'ultimate' ? (
             <>
-          {/* Error Message */}
-          {error ? (
-            <div className="bg-red-500/10 border border-red-500 rounded-lg p-3 mb-4 flex items-start gap-2">
-              <p className="text-foreground text-sm font-medium">{error}</p>
-            </div>
-          ) : null}
-
-          {/* Skeleton Loading State */}
-          {!metadataInfo ? (
-            <div className="bg-muted border border-border rounded-lg p-4 animate-pulse">
-              <div className="flex items-start justify-between gap-4">
-                <div className="flex items-start gap-3 flex-1">
-                  <div className="w-5 h-5 bg-accent rounded-full flex-shrink-0 mt-0.5"></div>
-                  <div className="flex-1 space-y-3">
-                    <div className="h-5 bg-accent rounded w-48"></div>
-                    <div className="h-4 bg-accent rounded w-64"></div>
-                    <div className="h-3 bg-accent rounded w-40"></div>
-                  </div>
+              {/* Error Message */}
+              {error ? (
+                <div className="bg-red-500/10 border border-red-500 rounded-lg p-3 mb-4 flex items-start gap-2">
+                  <p className="text-foreground text-sm font-medium">{error}</p>
                 </div>
-                <div className="w-24 h-10 bg-accent rounded-lg flex-shrink-0"></div>
-              </div>
-            </div>
-          ) : null}
+              ) : null}
 
-          {/* Metadata Update Info */}
-          {metadataInfo ? (
-            <div>
-              {metadataInfo.gamesUpdateAvailable ? (
-                <div className="bg-primary/10 border border-primary rounded-lg p-4">
+              {/* Skeleton Loading State */}
+              {!metadataInfo ? (
+                <div className="bg-muted border border-border rounded-lg p-4 animate-pulse">
                   <div className="flex items-start justify-between gap-4">
                     <div className="flex items-start gap-3 flex-1">
-                      <Info
-                        size={20}
-                        className="text-primary flex-shrink-0 mt-0.5"
-                      />
-                      <div className="flex-1">
-                        <p className="text-foreground font-medium mb-1">
-                          {metadataInfo.gamesUpdateCount !== undefined &&
-                          metadataInfo.gamesUpdateCount >= 0
-                            ? `${metadataInfo.gamesUpdateCount} Game Info Update${metadataInfo.gamesUpdateCount !== 1 ? "s" : ""} Ready`
-                            : "Game Info Updates Ready"}
-                        </p>
-                        <p className="text-muted-foreground text-sm">
-                          {metadataInfo.gamesUpdateCount !== undefined &&
-                          metadataInfo.gamesUpdateCount >= 0 ? (
-                            <>
-                              There{" "}
-                              {metadataInfo.gamesUpdateCount === 1
-                                ? "is"
-                                : "are"}{" "}
-                              {metadataInfo.gamesUpdateCount} game info update
-                              {metadataInfo.gamesUpdateCount !== 1
-                                ? "s"
-                                : ""}{" "}
-                              available
-                            </>
-                          ) : (
-                            <>Game metadata updates are available</>
-                          )}
-                        </p>
+                      <div className="w-5 h-5 bg-accent rounded-full flex-shrink-0 mt-0.5"></div>
+                      <div className="flex-1 space-y-3">
+                        <div className="h-5 bg-accent rounded w-48"></div>
+                        <div className="h-4 bg-accent rounded w-64"></div>
+                        <div className="h-3 bg-accent rounded w-40"></div>
+                      </div>
+                    </div>
+                    <div className="w-24 h-10 bg-accent rounded-lg flex-shrink-0"></div>
+                  </div>
+                </div>
+              ) : null}
+
+              {/* Metadata Update Info */}
+              {metadataInfo ? (
+                <div>
+                  {metadataInfo.gamesUpdateAvailable ? (
+                    <div className="bg-primary/10 border border-primary rounded-lg p-4">
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="flex items-start gap-3 flex-1">
+                          <Info size={20} className="text-primary flex-shrink-0 mt-0.5" />
+                          <div className="flex-1">
+                            <p className="text-foreground font-medium mb-1">
+                              {metadataInfo.gamesUpdateCount !== undefined &&
+                              metadataInfo.gamesUpdateCount >= 0
+                                ? `${metadataInfo.gamesUpdateCount} Game Info Update${metadataInfo.gamesUpdateCount !== 1 ? 's' : ''} Ready`
+                                : 'Game Info Updates Ready'}
+                            </p>
+                            <p className="text-muted-foreground text-sm">
+                              {metadataInfo.gamesUpdateCount !== undefined &&
+                              metadataInfo.gamesUpdateCount >= 0 ? (
+                                <>
+                                  There {metadataInfo.gamesUpdateCount === 1 ? 'is' : 'are'}{' '}
+                                  {metadataInfo.gamesUpdateCount} game info update
+                                  {metadataInfo.gamesUpdateCount !== 1 ? 's' : ''} available
+                                </>
+                              ) : (
+                                <>Game metadata updates are available</>
+                              )}
+                            </p>
+                            {metadataInfo.lastCheckedTime ? (
+                              <p className="text-muted-foreground text-xs mt-2">
+                                Last synced:{' '}
+                                <FormattedDate
+                                  date={metadataInfo.lastCheckedTime}
+                                  type="datetime"
+                                />
+                              </p>
+                            ) : null}
+
+                            {/* Progress Bar */}
+                            {isSyncingMetadata ? (
+                              <div className="mt-3 space-y-2">
+                                <div className="flex items-center justify-between text-xs">
+                                  <span className="text-primary">{syncMessage}</span>
+                                  <span className="text-primary font-medium">{syncProgress}%</span>
+                                </div>
+                                <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
+                                  <div
+                                    className="bg-primary h-full transition-all duration-300 ease-out"
+                                    style={{
+                                      width: `${syncProgress}%`,
+                                    }}
+                                  />
+                                </div>
+                              </div>
+                            ) : null}
+                          </div>
+                        </div>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              onClick={syncMetadata}
+                              disabled={isSyncingMetadata}
+                              size="icon"
+                              className="flex-shrink-0"
+                            >
+                              {isSyncingMetadata ? (
+                                <RefreshCw size={18} className="animate-spin" />
+                              ) : (
+                                <Download size={18} />
+                              )}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>{isSyncingMetadata ? 'Syncing...' : 'Sync Now'}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="bg-green-500/10 border border-green-500 rounded-lg p-4 flex items-center gap-3">
+                      <CheckCircle size={20} className="text-green-500" />
+                      <div>
+                        <p className="text-foreground font-medium">Game metadata is up to date</p>
                         {metadataInfo.lastCheckedTime ? (
-                          <p className="text-muted-foreground text-xs mt-2">
-                            Last synced:{" "}
+                          <p className="text-muted-foreground text-xs mt-1">
+                            Last synced:{' '}
                             <FormattedDate date={metadataInfo.lastCheckedTime} type="datetime" />
                           </p>
                         ) : null}
-
-                        {/* Progress Bar */}
-                        {isSyncingMetadata ? (
-                          <div className="mt-3 space-y-2">
-                            <div className="flex items-center justify-between text-xs">
-                              <span className="text-primary">
-                                {syncMessage}
-                              </span>
-                              <span className="text-primary font-medium">
-                                {syncProgress}%
-                              </span>
-                            </div>
-                            <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
-                              <div
-                                className="bg-primary h-full transition-all duration-300 ease-out"
-                                style={{
-                                  width: `${syncProgress}%`,
-                                }}
-                              />
-                            </div>
-                          </div>
-                        ) : null}
                       </div>
                     </div>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          onClick={syncMetadata}
-                          disabled={isSyncingMetadata}
-                          size="icon"
-                          className="flex-shrink-0"
-                        >
-                          {isSyncingMetadata ? (
-                            <RefreshCw size={18} className="animate-spin" />
-                          ) : (
-                            <Download size={18} />
-                          )}
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>{isSyncingMetadata ? "Syncing..." : "Sync Now"}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </div>
+                  )}
                 </div>
-              ) : (
-                <div className="bg-green-500/10 border border-green-500 rounded-lg p-4 flex items-center gap-3">
-                  <CheckCircle size={20} className="text-green-500" />
-                  <div>
-                    <p className="text-foreground font-medium">
-                      Game metadata is up to date
-                    </p>
-                    {metadataInfo.lastCheckedTime ? (
-                      <p className="text-muted-foreground text-xs mt-1">
-                        Last synced:{" "}
-                        <FormattedDate date={metadataInfo.lastCheckedTime} type="datetime" />
-                      </p>
-                    ) : null}
-                  </div>
-                </div>
-              )}
-            </div>
-          ) : null}
+              ) : null}
             </>
           ) : null}
         </div>
@@ -495,20 +461,16 @@ export function UpdateSettingsTab({
         <div className="bg-card rounded-lg p-6 border border-border shadow-md">
           <div className="flex items-center gap-2 mb-4">
             <Download size={24} className="text-primary" />
-            <h2 className="text-xl font-semibold">
-              Ruffle Emulator Management
-            </h2>
+            <h2 className="text-xl font-semibold">Ruffle Emulator Management</h2>
           </div>
 
           <div className="space-y-4">
             <div className="flex items-center justify-between">
               <div className="space-y-1">
-                <Label className="text-sm text-muted-foreground">
-                  Current Version
-                </Label>
+                <Label className="text-sm text-muted-foreground">Current Version</Label>
                 <div className="flex items-center gap-2">
                   <span className="text-lg font-semibold">
-                    {ruffleVersion.currentVersion || "Not installed"}
+                    {ruffleVersion.currentVersion || 'Not installed'}
                   </span>
                   {ruffleVersion.isInstalled ? (
                     <CheckCircle2 className="h-5 w-5 text-green-500" />
@@ -548,27 +510,21 @@ export function UpdateSettingsTab({
                     </p>
                     <p className="text-sm text-muted-foreground mt-1">
                       {updateCheckResult.updateAvailable
-                        ? "A new version of Ruffle is available for download."
-                        : "You have the latest version of Ruffle installed."}
+                        ? 'A new version of Ruffle is available for download.'
+                        : 'You have the latest version of Ruffle installed.'}
                     </p>
                     {updateCheckResult.publishedAt ? (
                       <div className="flex items-center gap-1 mt-2 text-xs text-muted-foreground">
                         <Calendar className="h-3 w-3" />
                         <span>
-                          Published:{" "}
-                          <FormattedDate
-                            date={updateCheckResult.publishedAt}
-                            type="date"
-                          />
+                          Published:{' '}
+                          <FormattedDate date={updateCheckResult.publishedAt} type="date" />
                         </span>
                       </div>
                     ) : null}
                   </div>
                   {updateCheckResult.updateAvailable ? (
-                    <Button
-                      onClick={() => updateRuffle.mutate()}
-                      disabled={updateRuffle.isPending}
-                    >
+                    <Button onClick={() => updateRuffle.mutate()} disabled={updateRuffle.isPending}>
                       {updateRuffle.isPending ? (
                         <>
                           <Download className="mr-2 h-4 w-4 animate-pulse" />
@@ -585,46 +541,44 @@ export function UpdateSettingsTab({
                 </div>
 
                 {/* Changelog Section - Only show if update is available */}
-                {updateCheckResult.updateAvailable &&
-                  updateCheckResult.changelog ? (
-                    <div className="border-t pt-3">
-                      <button
-                        onClick={() => setShowChangelog(!showChangelog)}
-                        className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full"
-                      >
-                        {showChangelog ? (
-                          <ChevronUp className="h-4 w-4" />
-                        ) : (
-                          <ChevronDown className="h-4 w-4" />
-                        )}
-                        <span>{showChangelog ? "Hide" : "View"} Changelog</span>
-                      </button>
+                {updateCheckResult.updateAvailable && updateCheckResult.changelog ? (
+                  <div className="border-t pt-3">
+                    <button
+                      onClick={() => setShowChangelog(!showChangelog)}
+                      className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full"
+                    >
                       {showChangelog ? (
-                        <div className="mt-3 p-3 bg-background border rounded-lg">
-                          <div className="text-xs text-muted-foreground mb-2 font-medium">
-                            Release Notes:
-                          </div>
-                          <div className="text-sm text-foreground/90 max-h-96 overflow-y-auto prose prose-sm dark:prose-invert max-w-none prose-headings:mt-3 prose-headings:mb-2 prose-p:my-2 prose-ul:my-2 prose-li:my-0.5 prose-code:text-xs prose-pre:text-xs">
-                            <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                              {updateCheckResult.changelog}
-                            </ReactMarkdown>
-                          </div>
+                        <ChevronUp className="h-4 w-4" />
+                      ) : (
+                        <ChevronDown className="h-4 w-4" />
+                      )}
+                      <span>{showChangelog ? 'Hide' : 'View'} Changelog</span>
+                    </button>
+                    {showChangelog ? (
+                      <div className="mt-3 p-3 bg-background border rounded-lg">
+                        <div className="text-xs text-muted-foreground mb-2 font-medium">
+                          Release Notes:
                         </div>
-                      ) : null}
-                    </div>
-                  ) : null}
+                        <div className="text-sm text-foreground/90 max-h-96 overflow-y-auto prose prose-sm dark:prose-invert max-w-none prose-headings:mt-3 prose-headings:mb-2 prose-p:my-2 prose-ul:my-2 prose-li:my-0.5 prose-code:text-xs prose-pre:text-xs">
+                          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                            {updateCheckResult.changelog}
+                          </ReactMarkdown>
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                ) : null}
               </div>
             ) : null}
 
             <div className="text-sm text-muted-foreground pt-2 space-y-1">
               <p>
-                Ruffle is an open-source Flash Player emulator. Keeping it up
-                to date ensures the best compatibility and performance for Flash
-                games.
+                Ruffle is an open-source Flash Player emulator. Keeping it up to date ensures the
+                best compatibility and performance for Flash games.
               </p>
               <p className="text-amber-600 dark:text-amber-400">
-                <strong>Note:</strong> After updating Ruffle, you must refresh
-                the browser page for the new version to take effect.
+                <strong>Note:</strong> After updating Ruffle, you must refresh the browser page for
+                the new version to take effect.
               </p>
             </div>
           </div>
diff --git a/frontend/src/components/stats/GamesDistributionChart.tsx b/frontend/src/components/stats/GamesDistributionChart.tsx
index a13dda3..6b5c6ab 100644
--- a/frontend/src/components/stats/GamesDistributionChart.tsx
+++ b/frontend/src/components/stats/GamesDistributionChart.tsx
@@ -78,7 +78,9 @@ export function GamesDistributionChart() {
       <div className="bg-card rounded-lg p-6 border border-border shadow-md">
         <h3 className="text-lg font-semibold mb-4">Playtime Distribution</h3>
         <div className="h-96 flex items-center justify-center">
-          <p className="text-muted-foreground">No games played yet. Start playing to see distribution!</p>
+          <p className="text-muted-foreground">
+            No games played yet. Start playing to see distribution!
+          </p>
         </div>
       </div>
     );
@@ -91,24 +93,21 @@ export function GamesDistributionChart() {
     fullName: game.name,
     value: game.value,
     percentage: (game.value / totalPlaytime) * 100,
-    color: COLORS[index % COLORS.length]
+    color: COLORS[index % COLORS.length],
   }));
 
   const renderLegend = (props: CustomLegendProps) => {
     const { payload } = props;
     return (
       <div className="flex flex-wrap gap-2 justify-center mt-4">
-        {payload?.map((entry, index: number) => (
+        {payload?.map((entry, index: number) =>
           entry.value ? (
             <div key={`legend-${index}`} className="flex items-center gap-2 text-xs">
-              <div
-                className="w-3 h-3 rounded-full"
-                style={{ backgroundColor: entry.color }}
-              />
+              <div className="w-3 h-3 rounded-full" style={{ backgroundColor: entry.color }} />
               <span className="text-muted-foreground">{entry.value}</span>
             </div>
           ) : null
-        ))}
+        )}
       </div>
     );
   };
@@ -118,31 +117,31 @@ export function GamesDistributionChart() {
       <h3 className="text-lg font-semibold mb-4">Playtime Distribution</h3>
       <div className="bg-accent rounded-lg p-4">
         <ResponsiveContainer width="100%" height={380}>
-        <PieChart>
-          <Pie
-            data={chartData}
-            cx="50%"
-            cy="50%"
-            labelLine={false}
-            label={(props: { percent?: number }) => {
-              if (!props.percent) return '';
-              const percentage = props.percent * 100;
-              return `${percentage.toFixed(0)}%`;
-            }}
-            outerRadius={120}
-            innerRadius={60}
-            fill="#8884d8"
-            dataKey="value"
-            paddingAngle={2}
-          >
-            {chartData.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={entry.color} />
-            ))}
-          </Pie>
-          <Tooltip content={<CustomTooltip />} />
-          <Legend content={renderLegend} />
-        </PieChart>
-      </ResponsiveContainer>
+          <PieChart>
+            <Pie
+              data={chartData}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              label={(props: { percent?: number }) => {
+                if (!props.percent) return '';
+                const percentage = props.percent * 100;
+                return `${percentage.toFixed(0)}%`;
+              }}
+              outerRadius={120}
+              innerRadius={60}
+              fill="#8884d8"
+              dataKey="value"
+              paddingAngle={2}
+            >
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Pie>
+            <Tooltip content={<CustomTooltip />} />
+            <Legend content={renderLegend} />
+          </PieChart>
+        </ResponsiveContainer>
         <div className="text-center mt-4">
           <p className="text-muted-foreground text-sm">
             Total Playtime: <span className="font-semibold">{formatPlaytime(totalPlaytime)}</span>
diff --git a/frontend/src/components/stats/PlaytimeChart.tsx b/frontend/src/components/stats/PlaytimeChart.tsx
index 18252ea..9965613 100644
--- a/frontend/src/components/stats/PlaytimeChart.tsx
+++ b/frontend/src/components/stats/PlaytimeChart.tsx
@@ -1,4 +1,13 @@
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts';
 import { usePlayActivityOverTime } from '../../hooks/usePlayTracking';
 import { useDateTimeFormat } from '../../hooks/useDateTimeFormat';
 import type { CustomTooltipProps } from '@/types/chart';
@@ -60,16 +69,18 @@ export function PlaytimeChart() {
       <div className="bg-card rounded-lg p-6 border border-border shadow-md">
         <h3 className="text-lg font-semibold mb-4">Play Activity (Last 30 Days)</h3>
         <div className="h-80 flex items-center justify-center">
-          <p className="text-muted-foreground">No play activity data yet. Start playing to see your activity!</p>
+          <p className="text-muted-foreground">
+            No play activity data yet. Start playing to see your activity!
+          </p>
         </div>
       </div>
     );
   }
 
-  const chartData = data.map(item => ({
+  const chartData = data.map((item) => ({
     date: formatDate(item.date),
     playtime: item.playtime,
-    sessions: item.sessions
+    sessions: item.sessions,
   }));
 
   return (
@@ -77,52 +88,48 @@ export function PlaytimeChart() {
       <h3 className="text-lg font-semibold mb-4">Play Activity (Last 30 Days)</h3>
       <div className="bg-accent rounded-lg p-4">
         <ResponsiveContainer width="100%" height={320}>
-        <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
-          <defs>
-            <linearGradient id="colorPlaytime" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.8}/>
-              <stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/>
-            </linearGradient>
-            <linearGradient id="colorSessions" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor="#10b981" stopOpacity={0.8}/>
-              <stop offset="95%" stopColor="#10b981" stopOpacity={0}/>
-            </linearGradient>
-          </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-          <XAxis
-            dataKey="date"
-            stroke="#9ca3af"
-            tick={{ fill: '#9ca3af', fontSize: 12 }}
-          />
-          <YAxis
-            stroke="#9ca3af"
-            tick={{ fill: '#9ca3af', fontSize: 12 }}
-            tickFormatter={(value: number) => formatPlaytime(value)}
-          />
-          <Tooltip content={<CustomTooltip />} />
-          <Legend
-            wrapperStyle={{ paddingTop: '20px' }}
-            iconType="circle"
-            formatter={(value: string) => <span className="text-gray-300">{value}</span>}
-          />
-          <Area
-            type="monotone"
-            dataKey="playtime"
-            stroke="#3b82f6"
-            fillOpacity={1}
-            fill="url(#colorPlaytime)"
-            name="Playtime (seconds)"
-          />
-          <Area
-            type="monotone"
-            dataKey="sessions"
-            stroke="#10b981"
-            fillOpacity={1}
-            fill="url(#colorSessions)"
-            name="Sessions"
-          />
-        </AreaChart>
-      </ResponsiveContainer>
+          <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
+            <defs>
+              <linearGradient id="colorPlaytime" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+              </linearGradient>
+              <linearGradient id="colorSessions" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#10b981" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+            <XAxis dataKey="date" stroke="#9ca3af" tick={{ fill: '#9ca3af', fontSize: 12 }} />
+            <YAxis
+              stroke="#9ca3af"
+              tick={{ fill: '#9ca3af', fontSize: 12 }}
+              tickFormatter={(value: number) => formatPlaytime(value)}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            <Legend
+              wrapperStyle={{ paddingTop: '20px' }}
+              iconType="circle"
+              formatter={(value: string) => <span className="text-gray-300">{value}</span>}
+            />
+            <Area
+              type="monotone"
+              dataKey="playtime"
+              stroke="#3b82f6"
+              fillOpacity={1}
+              fill="url(#colorPlaytime)"
+              name="Playtime (seconds)"
+            />
+            <Area
+              type="monotone"
+              dataKey="sessions"
+              stroke="#10b981"
+              fillOpacity={1}
+              fill="url(#colorSessions)"
+              name="Sessions"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
       </div>
     </div>
   );
diff --git a/frontend/src/components/stats/TopGamesChart.tsx b/frontend/src/components/stats/TopGamesChart.tsx
index 16732e0..4f2d7aa 100644
--- a/frontend/src/components/stats/TopGamesChart.tsx
+++ b/frontend/src/components/stats/TopGamesChart.tsx
@@ -1,4 +1,13 @@
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from 'recharts';
 import { useTopGames } from '../../hooks/usePlayTracking';
 import type { CustomTooltipProps } from '@/types/chart';
 
@@ -77,7 +86,9 @@ export function TopGamesChart() {
       <div className="bg-card rounded-lg p-6 border border-border shadow-md">
         <h3 className="text-lg font-semibold mb-4">Top Played Games</h3>
         <div className="h-96 flex items-center justify-center">
-          <p className="text-muted-foreground">No games played yet. Start playing to see your top games!</p>
+          <p className="text-muted-foreground">
+            No games played yet. Start playing to see your top games!
+          </p>
         </div>
       </div>
     );
@@ -88,7 +99,7 @@ export function TopGamesChart() {
     fullTitle: game.gameTitle,
     playtime: game.totalPlaytimeSeconds,
     plays: game.totalPlays,
-    color: COLORS[index % COLORS.length]
+    color: COLORS[index % COLORS.length],
   }));
 
   return (
@@ -96,33 +107,33 @@ export function TopGamesChart() {
       <h3 className="text-lg font-semibold mb-4">Top Played Games</h3>
       <div className="bg-accent rounded-lg p-4">
         <ResponsiveContainer width="100%" height={400}>
-        <BarChart
-          data={chartData}
-          layout="vertical"
-          margin={{ top: 5, right: 30, left: 120, bottom: 5 }}
-        >
-          <CartesianGrid strokeDasharray="3 3" stroke="#374151" horizontal={false} />
-          <XAxis
-            type="number"
-            stroke="#9ca3af"
-            tick={{ fill: '#9ca3af', fontSize: 12 }}
-            tickFormatter={(value: number) => formatPlaytime(value)}
-          />
-          <YAxis
-            type="category"
-            dataKey="name"
-            stroke="#9ca3af"
-            tick={{ fill: '#9ca3af', fontSize: 12 }}
-            width={120}
-          />
-          <Tooltip content={<CustomTooltip />} />
-          <Bar dataKey="playtime" radius={[0, 8, 8, 0]}>
-            {chartData.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={entry.color} />
-            ))}
-          </Bar>
-        </BarChart>
-      </ResponsiveContainer>
+          <BarChart
+            data={chartData}
+            layout="vertical"
+            margin={{ top: 5, right: 30, left: 120, bottom: 5 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" stroke="#374151" horizontal={false} />
+            <XAxis
+              type="number"
+              stroke="#9ca3af"
+              tick={{ fill: '#9ca3af', fontSize: 12 }}
+              tickFormatter={(value: number) => formatPlaytime(value)}
+            />
+            <YAxis
+              type="category"
+              dataKey="name"
+              stroke="#9ca3af"
+              tick={{ fill: '#9ca3af', fontSize: 12 }}
+              width={120}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            <Bar dataKey="playtime" radius={[0, 8, 8, 0]}>
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
       </div>
     </div>
   );
diff --git a/frontend/src/components/stats/UserStatsPanel.tsx b/frontend/src/components/stats/UserStatsPanel.tsx
index 78fd194..be357bd 100644
--- a/frontend/src/components/stats/UserStatsPanel.tsx
+++ b/frontend/src/components/stats/UserStatsPanel.tsx
@@ -5,9 +5,15 @@ import { useDateTimeFormat } from '../../hooks/useDateTimeFormat';
 import { ChartErrorBoundary } from './ChartErrorBoundary';
 
 // Lazy load chart components to reduce initial bundle size
-const PlaytimeChart = lazy(() => import('./PlaytimeChart').then(m => ({ default: m.PlaytimeChart })));
-const TopGamesChart = lazy(() => import('./TopGamesChart').then(m => ({ default: m.TopGamesChart })));
-const GamesDistributionChart = lazy(() => import('./GamesDistributionChart').then(m => ({ default: m.GamesDistributionChart })));
+const PlaytimeChart = lazy(() =>
+  import('./PlaytimeChart').then((m) => ({ default: m.PlaytimeChart }))
+);
+const TopGamesChart = lazy(() =>
+  import('./TopGamesChart').then((m) => ({ default: m.TopGamesChart }))
+);
+const GamesDistributionChart = lazy(() =>
+  import('./GamesDistributionChart').then((m) => ({ default: m.GamesDistributionChart }))
+);
 
 // Skeleton loader for chart components
 function ChartSkeleton({ height = 'h-80' }: { height?: string }) {
@@ -61,7 +67,9 @@ export function UserStatsPanel() {
           <BarChart3 size={20} className="text-primary" />
           Play Statistics
         </h3>
-        <p className="text-muted-foreground">No play data available yet. Start playing some games!</p>
+        <p className="text-muted-foreground">
+          No play data available yet. Start playing some games!
+        </p>
       </div>
     );
   }
@@ -72,22 +80,22 @@ export function UserStatsPanel() {
       label: 'Games Played',
       value: stats.totalGamesPlayed.toString(),
       color: 'text-blue-400',
-      bgColor: 'bg-blue-500/10'
+      bgColor: 'bg-blue-500/10',
     },
     {
       icon: Clock,
       label: 'Total Playtime',
       value: formatPlaytime(stats.totalPlaytimeSeconds),
       color: 'text-green-400',
-      bgColor: 'bg-green-500/10'
+      bgColor: 'bg-green-500/10',
     },
     {
       icon: TrendingUp,
       label: 'Play Sessions',
       value: stats.totalSessions.toString(),
       color: 'text-purple-400',
-      bgColor: 'bg-purple-500/10'
-    }
+      bgColor: 'bg-purple-500/10',
+    },
   ];
 
   return (
@@ -126,11 +134,15 @@ export function UserStatsPanel() {
         <div className="grid grid-cols-2 gap-4 pt-4 border-t border-border">
           <div>
             <p className="text-muted-foreground text-sm">First Played</p>
-            <p className="font-medium">{stats.firstPlayAt ? formatDate(stats.firstPlayAt) : 'Never'}</p>
+            <p className="font-medium">
+              {stats.firstPlayAt ? formatDate(stats.firstPlayAt) : 'Never'}
+            </p>
           </div>
           <div>
             <p className="text-muted-foreground text-sm">Last Played</p>
-            <p className="font-medium">{stats.lastPlayAt ? formatDate(stats.lastPlayAt) : 'Never'}</p>
+            <p className="font-medium">
+              {stats.lastPlayAt ? formatDate(stats.lastPlayAt) : 'Never'}
+            </p>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/theme/ThemePicker.tsx b/frontend/src/components/theme/ThemePicker.tsx
index 90ea3f9..2616935 100644
--- a/frontend/src/components/theme/ThemePicker.tsx
+++ b/frontend/src/components/theme/ThemePicker.tsx
@@ -23,7 +23,12 @@ export function ThemePicker() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon" className="border-primary data-[state=open]:border-transparent" title="Theme settings">
+        <Button
+          variant="outline"
+          size="icon"
+          className="border-primary data-[state=open]:border-transparent"
+          title="Theme settings"
+        >
           <Palette className="h-5 w-5" />
           <span className="sr-only">Theme settings</span>
         </Button>
diff --git a/frontend/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
index d0cb4a2..f0a53dd 100644
--- a/frontend/src/components/ui/alert-dialog.tsx
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -1,14 +1,14 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
-import { cn } from "@/lib/index"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from '@/lib/index';
+import { buttonVariants } from '@/components/ui/button';
 
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -16,14 +16,14 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
     ref={ref}
   />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -34,42 +34,27 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}
     />
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
     {...props}
   />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -77,11 +62,11 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold", className)}
+    className={cn('text-lg font-semibold', className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -89,24 +74,19 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -114,15 +94,11 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
     {...props}
   />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -136,4 +112,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/frontend/src/components/ui/alert.tsx b/frontend/src/components/ui/alert.tsx
index 316c586..705a18b 100644
--- a/frontend/src/components/ui/alert.tsx
+++ b/frontend/src/components/ui/alert.tsx
@@ -1,59 +1,49 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: 'bg-background text-foreground',
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
-)
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = 'Alert';
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+AlertTitle.displayName = 'AlertTitle';
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
+  <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+));
+AlertDescription.displayName = 'AlertDescription';
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
index e85dc4f..3e73bfb 100644
--- a/frontend/src/components/ui/avatar.tsx
+++ b/frontend/src/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -11,14 +11,11 @@ const Avatar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -26,11 +23,11 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn('aspect-square h-full w-full', className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -39,12 +36,12 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
       className
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
index 809d3b2..870990d 100644
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -1,29 +1,28 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib"
+import { cn } from '@/lib';
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded px-2 py-1 text-xs font-medium transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1",
+  'inline-flex items-center rounded px-2 py-1 text-xs font-medium transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1',
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-        platform: "",
-        tag: "bg-gray-700 text-gray-300",
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+        platform: '',
+        tag: 'bg-gray-700 text-gray-300',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
-)
+);
 
 function getPlatformColor(platformName: string): string {
   const platform = platformName.toLowerCase();
@@ -48,27 +47,18 @@ function getPlatformColor(platformName: string): string {
 }
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, children, ...props }: BadgeProps) {
   // Special handling for platform variant
-  const platformClass = variant === 'platform' && typeof children === 'string'
-    ? getPlatformColor(children)
-    : '';
+  const platformClass =
+    variant === 'platform' && typeof children === 'string' ? getPlatformColor(children) : '';
 
   return (
-    <div
-      className={cn(
-        badgeVariants({ variant }),
-        platformClass,
-        className
-      )}
-      {...props}
-    >
+    <div className={cn(badgeVariants({ variant }), platformClass, className)} {...props}>
       {children}
     </div>
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index ff32739..cbe517a 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -1,56 +1,49 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 data-[state=open]:ring-0 data-[state=open]:focus-visible:ring-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 data-[state=open]:ring-0 data-[state=open]:focus-visible:ring-0',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          "border border-input bg-background hover:bg-primary/10 hover:text-primary hover:border-primary",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-primary/10 hover:text-primary",
-        ghost: "hover:bg-primary/10 hover:text-primary",
-        link: "text-primary underline-offset-4 hover:underline",
+          'border border-input bg-background hover:bg-primary/10 hover:text-primary hover:border-primary',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-primary/10 hover:text-primary',
+        ghost: 'hover:bg-primary/10 hover:text-primary',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
-)
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : 'button';
     return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = 'Button';
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/frontend/src/components/ui/calendar.tsx b/frontend/src/components/ui/calendar.tsx
index ee7d82e..5288e31 100644
--- a/frontend/src/components/ui/calendar.tsx
+++ b/frontend/src/components/ui/calendar.tsx
@@ -1,157 +1,121 @@
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+import * as React from 'react';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
 
-import { cn } from "@/lib/index"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { cn } from '@/lib/index';
+import { Button, buttonVariants } from '@/components/ui/button';
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
   formatters,
   components,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        'bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
       )}
       captionLayout={captionLayout}
       formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
+        formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
         ...formatters,
       }}
       classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
-        ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
+        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
         nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          'h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50',
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          'h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50',
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          'flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]',
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          'flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium',
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          'has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border',
           defaultClassNames.dropdown_root
         ),
-        dropdown: cn(
-          "bg-popover absolute inset-0 opacity-0",
-          defaultClassNames.dropdown
-        ),
+        dropdown: cn('bg-popover absolute inset-0 opacity-0', defaultClassNames.dropdown),
         caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : '[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5',
           defaultClassNames.caption_label
         ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          'text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal',
           defaultClassNames.weekday
         ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-[--cell-size] select-none",
-          defaultClassNames.week_number_header
-        ),
+        week: cn('mt-2 flex w-full', defaultClassNames.week),
+        week_number_header: cn('w-[--cell-size] select-none', defaultClassNames.week_number_header),
         week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
+          'text-muted-foreground select-none text-[0.8rem]',
           defaultClassNames.week_number
         ),
         day: cn(
-          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          'group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md',
           defaultClassNames.day
         ),
-        range_start: cn(
-          "bg-accent rounded-l-md",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        range_start: cn('bg-accent rounded-l-md', defaultClassNames.range_start),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('bg-accent rounded-r-md', defaultClassNames.range_end),
         today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
           defaultClassNames.today
         ),
         outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
+          'text-muted-foreground aria-selected:text-muted-foreground',
           defaultClassNames.outside
         ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
+        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+        hidden: cn('invisible', defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
         Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
+          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
         },
         Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
+          if (orientation === 'left') {
+            return <ChevronLeftIcon className={cn('size-4', className)} {...props} />;
           }
 
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
+          if (orientation === 'right') {
+            return <ChevronRightIcon className={cn('size-4', className)} {...props} />;
           }
 
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+          return <ChevronDownIcon className={cn('size-4', className)} {...props} />;
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props }) => {
@@ -161,13 +125,13 @@ function Calendar({
                 {children}
               </div>
             </td>
-          )
+          );
         },
         ...components,
       }}
       {...props}
     />
-  )
+  );
 }
 
 function CalendarDayButton({
@@ -176,12 +140,12 @@ function CalendarDayButton({
   modifiers,
   ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
 
   return (
     <Button
@@ -199,13 +163,13 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70',
         defaultClassNames.day,
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index dd135ae..0ba1308 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -1,79 +1,55 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib"
+import { cn } from '@/lib';
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-md",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-md', className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
 
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
 
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
index 4aaf03f..0aa4501 100644
--- a/frontend/src/components/ui/checkbox.tsx
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -11,18 +11,16 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      'grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator
-      className={cn("grid place-content-center text-current")}
-    >
+    <CheckboxPrimitive.Indicator className={cn('grid place-content-center text-current')}>
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };
diff --git a/frontend/src/components/ui/collapsible.tsx b/frontend/src/components/ui/collapsible.tsx
index a23e7a2..9605c4e 100644
--- a/frontend/src/components/ui/collapsible.tsx
+++ b/frontend/src/components/ui/collapsible.tsx
@@ -1,9 +1,9 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 
-const Collapsible = CollapsiblePrimitive.Root
+const Collapsible = CollapsiblePrimitive.Root;
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/frontend/src/components/ui/data-table.tsx b/frontend/src/components/ui/data-table.tsx
index 3798c81..6987880 100644
--- a/frontend/src/components/ui/data-table.tsx
+++ b/frontend/src/components/ui/data-table.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from 'react';
 import {
   ColumnDef,
   ColumnFiltersState,
@@ -10,13 +10,13 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"
+} from '@tanstack/react-table';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 
-import { getSortIcon } from "./data-table-utils"
+import { getSortIcon } from './data-table-utils';
 
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
 import {
   Table,
   TableBody,
@@ -24,23 +24,23 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from '@/components/ui/table';
 
 interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
   pagination?: {
-    page: number
-    totalPages: number
-    total: number
-    limit: number
-  }
-  onPageChange?: (page: number) => void
-  sorting?: SortingState
-  onSortingChange?: (updater: SortingState | ((old: SortingState) => SortingState)) => void
-  isLoading?: boolean
-  emptyMessage?: string
-  caption?: string
+    page: number;
+    totalPages: number;
+    total: number;
+    limit: number;
+  };
+  onPageChange?: (page: number) => void;
+  sorting?: SortingState;
+  onSortingChange?: (updater: SortingState | ((old: SortingState) => SortingState)) => void;
+  isLoading?: boolean;
+  emptyMessage?: string;
+  caption?: string;
 }
 
 export function DataTable<TData, TValue>({
@@ -51,32 +51,32 @@ export function DataTable<TData, TValue>({
   sorting: controlledSorting,
   onSortingChange: onControlledSortingChange,
   isLoading = false,
-  emptyMessage = "No results.",
+  emptyMessage = 'No results.',
   caption,
 }: DataTableProps<TData, TValue>) {
-  const [internalSorting, setInternalSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
+  const [internalSorting, setInternalSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
 
   // Use controlled sorting if provided, otherwise use internal state
-  const sorting = controlledSorting ?? internalSorting
+  const sorting = controlledSorting ?? internalSorting;
 
   const setSorting = React.useCallback(
     (updater: SortingState | ((old: SortingState) => SortingState)) => {
       if (onControlledSortingChange) {
-        onControlledSortingChange(updater)
+        onControlledSortingChange(updater);
       } else {
         // Properly handle both function and value updaters
         if (typeof updater === 'function') {
-          setInternalSorting((old) => updater(old))
+          setInternalSorting((old) => updater(old));
         } else {
-          setInternalSorting(updater)
+          setInternalSorting(updater);
         }
       }
     },
     [onControlledSortingChange]
-  )
+  );
 
   const table = useReactTable({
     data,
@@ -99,7 +99,7 @@ export function DataTable<TData, TValue>({
     manualSorting: !!controlledSorting,
     pageCount: pagination?.totalPages,
     enableSortingRemoval: false,
-  })
+  });
 
   if (isLoading) {
     return (
@@ -112,7 +112,7 @@ export function DataTable<TData, TValue>({
         <span className="sr-only">Loading data, please wait...</span>
         <span aria-hidden="true">Loading...</span>
       </div>
-    )
+    );
   }
 
   return (
@@ -131,24 +131,27 @@ export function DataTable<TData, TValue>({
                           <div
                             className={
                               header.column.getCanSort()
-                                ? "flex items-center gap-2 cursor-pointer select-none hover:text-primary transition-colors"
-                                : ""
+                                ? 'flex items-center gap-2 cursor-pointer select-none hover:text-primary transition-colors'
+                                : ''
                             }
                             onClick={header.column.getToggleSortingHandler()}
-                            role={header.column.getCanSort() ? "button" : undefined}
+                            role={header.column.getCanSort() ? 'button' : undefined}
                             tabIndex={header.column.getCanSort() ? 0 : undefined}
                             onKeyDown={(e) => {
-                              if (header.column.getCanSort() && (e.key === "Enter" || e.key === " ")) {
-                                e.preventDefault()
-                                header.column.getToggleSortingHandler()?.(e as any)
+                              if (
+                                header.column.getCanSort() &&
+                                (e.key === 'Enter' || e.key === ' ')
+                              ) {
+                                e.preventDefault();
+                                header.column.getToggleSortingHandler()?.(e as any);
                               }
                             }}
                             aria-sort={
-                              header.column.getIsSorted() === "asc"
-                                ? "ascending"
-                                : header.column.getIsSorted() === "desc"
-                                ? "descending"
-                                : undefined
+                              header.column.getIsSorted() === 'asc'
+                                ? 'ascending'
+                                : header.column.getIsSorted() === 'desc'
+                                  ? 'descending'
+                                  : undefined
                             }
                             aria-label={
                               header.column.getCanSort()
@@ -161,7 +164,7 @@ export function DataTable<TData, TValue>({
                           </div>
                         )}
                       </TableHead>
-                    )
+                    );
                   })}
                 </TableRow>
               ))}
@@ -169,10 +172,7 @@ export function DataTable<TData, TValue>({
             <TableBody>
               {table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
+                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id}>
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -240,5 +240,5 @@ export function DataTable<TData, TValue>({
         ) : null}
       </Card>
     </div>
-  )
+  );
 }
diff --git a/frontend/src/components/ui/date-picker.tsx b/frontend/src/components/ui/date-picker.tsx
index e34000e..a133d5c 100644
--- a/frontend/src/components/ui/date-picker.tsx
+++ b/frontend/src/components/ui/date-picker.tsx
@@ -1,14 +1,10 @@
-import * as React from "react";
-import { Calendar as CalendarIcon, X } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { useDateTimeFormat } from "@/hooks/useDateTimeFormat";
+import * as React from 'react';
+import { Calendar as CalendarIcon, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useDateTimeFormat } from '@/hooks/useDateTimeFormat';
 
 export interface DatePickerProps {
   /** The selected date */
@@ -34,7 +30,7 @@ export interface DatePickerProps {
 export function DatePicker({
   date,
   onDateChange,
-  placeholder = "Pick a date",
+  placeholder = 'Pick a date',
   disabled = false,
   disabledDates,
   clearable = true,
@@ -66,17 +62,15 @@ export function DatePicker({
             id={id}
             variant="outline"
             className={cn(
-              "flex-1 justify-start text-left font-normal",
-              !date && "text-muted-foreground",
+              'flex-1 justify-start text-left font-normal',
+              !date && 'text-muted-foreground',
               className
             )}
             disabled={disabled}
           >
             <CalendarIcon className="mr-2 h-4 w-4" />
             {displayDate || placeholder}
-            {required && !date ? (
-              <span className="ml-1 text-destructive">*</span>
-            ) : null}
+            {required && !date ? <span className="ml-1 text-destructive">*</span> : null}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index c836f7b..03c6cdb 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
 
-import { cn } from "@/lib/index";
+import { cn } from '@/lib/index';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -19,8 +19,8 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
     )}
     {...props}
   />
@@ -36,8 +36,8 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-0 bg-background p-6 shadow-lg duration-200 outline-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-0 bg-background p-6 shadow-lg duration-200 outline-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
       )}
       {...props}
     >
@@ -51,47 +51,23 @@ const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
 );
-DialogHeader.displayName = "DialogHeader";
+DialogHeader.displayName = 'DialogHeader';
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
     {...props}
   />
 );
-DialogFooter.displayName = "DialogFooter";
+DialogFooter.displayName = 'DialogFooter';
 
-const DialogBody = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "-mx-4 max-h-[80vh] overflow-y-auto px-4",
-      className,
-    )}
-    {...props}
-  />
+const DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('-mx-4 max-h-[80vh] overflow-y-auto px-4', className)} {...props} />
 );
-DialogBody.displayName = "DialogBody";
+DialogBody.displayName = 'DialogBody';
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -99,10 +75,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
     {...props}
   />
 ));
@@ -114,7 +87,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ));
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index ccea65a..69a4e20 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -1,32 +1,32 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
       className
     )}
     {...props}
@@ -34,9 +34,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -45,14 +44,13 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-primary/50 bg-popover p-1 text-popover-foreground shadow-lg outline-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-primary/50 bg-popover p-1 text-popover-foreground shadow-lg outline-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
       className
     )}
     {...props}
   />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -63,32 +61,32 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-primary/50 bg-popover p-1 text-popover-foreground shadow-md outline-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        'z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-primary/50 bg-popover p-1 text-popover-foreground shadow-md outline-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
         className
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
       className
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -97,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
@@ -110,9 +108,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -121,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -133,26 +130,22 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -160,24 +153,18 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+    <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
 export {
   DropdownMenu,
@@ -195,4 +182,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};
diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
index 39fd2ef..274b845 100644
--- a/frontend/src/components/ui/form.tsx
+++ b/frontend/src/components/ui/form.tsx
@@ -1,8 +1,8 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
 import {
   Controller,
   FormProvider,
@@ -10,25 +10,25 @@ import {
   type ControllerProps,
   type FieldPath,
   type FieldValues,
-} from "react-hook-form"
+} from 'react-hook-form';
 
-import { cn } from "@/lib/index"
-import { Label } from "@/components/ui/label"
+import { cn } from '@/lib/index';
+import { Label } from '@/components/ui/label';
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -36,25 +36,25 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error('useFormField should be used within <FormField>');
   }
 
   if (!itemContext) {
-    throw new Error("useFormField should be used within <FormItem>")
+    throw new Error('useFormField should be used within <FormItem>');
   }
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -63,112 +63,104 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
-const FormItemContext = React.createContext<FormItemContextValue | null>(null)
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
 
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
 
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn('space-y-2', className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  }
+);
+FormItem.displayName = 'FormItem';
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
       ref={ref}
-      className={cn(error && "text-destructive", className)}
+      className={cn(error && 'text-destructive', className)}
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = 'FormLabel';
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
   return (
     <Slot
       ref={ref}
       id={formItemId}
-      className={cn(
-        error && "border-destructive focus-visible:ring-destructive",
-        className
-      )}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
+      className={cn(error && 'border-destructive focus-visible:ring-destructive', className)}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = 'FormControl';
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn('text-sm text-muted-foreground', className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = 'FormDescription';
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? '') : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+      className={cn('text-sm font-medium text-destructive', className)}
       {...props}
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = 'FormMessage';
 
 export {
   useFormField,
@@ -179,4 +171,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index c1d93fd..ddaa1f6 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -1,22 +1,22 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-base text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          'flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-base text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Input.displayName = "Input"
+);
+Input.displayName = 'Input';
 
-export { Input }
+export { Input };
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
index 39bec4d..9b071e0 100644
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -1,24 +1,19 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/frontend/src/components/ui/pagination.tsx b/frontend/src/components/ui/pagination.tsx
index 6dd84dc..09f4338 100644
--- a/frontend/src/components/ui/pagination.tsx
+++ b/frontend/src/components/ui/pagination.tsx
@@ -136,10 +136,7 @@ export function Pagination({
               onClick={() => onPageChange(page)}
               aria-label={`Go to page ${page}`}
               aria-current={isActive ? 'page' : undefined}
-              className={cn(
-                'h-9 w-9',
-                isActive && 'pointer-events-none'
-              )}
+              className={cn('h-9 w-9', isActive && 'pointer-events-none')}
             >
               {page}
             </Button>
@@ -196,11 +193,7 @@ export function PaginationInfo({
   const end = Math.min(currentPage * pageSize, totalItems);
 
   if (totalItems === 0) {
-    return (
-      <p className={cn('text-sm text-muted-foreground', className)}>
-        No results found
-      </p>
-    );
+    return <p className={cn('text-sm text-muted-foreground', className)}>No results found</p>;
   }
 
   return (
@@ -235,11 +228,7 @@ export function PaginationWithInfo({
   return (
     <div className={cn('flex flex-col items-center gap-4', className)}>
       {showInfo ? (
-        <PaginationInfo
-          currentPage={currentPage}
-          pageSize={pageSize}
-          totalItems={totalItems}
-        />
+        <PaginationInfo currentPage={currentPage} pageSize={pageSize} totalItems={totalItems} />
       ) : null}
       <Pagination
         currentPage={currentPage}
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
index f991f86..f6444f5 100644
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -1,16 +1,16 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
@@ -18,13 +18,13 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       onOpenAutoFocus={(e) => e.preventDefault()}
       className={cn(
-        "z-[100] w-72 rounded-md border border-primary/50 bg-popover p-4 text-popover-foreground shadow-md outline-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        'z-[100] w-72 rounded-md border border-primary/50 bg-popover p-4 text-popover-foreground shadow-md outline-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]',
         className
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/frontend/src/components/ui/radio-group.tsx b/frontend/src/components/ui/radio-group.tsx
index 96bf6ce..8ed799f 100644
--- a/frontend/src/components/ui/radio-group.tsx
+++ b/frontend/src/components/ui/radio-group.tsx
@@ -1,22 +1,16 @@
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -26,7 +20,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
@@ -35,8 +29,8 @@ const RadioGroupItem = React.forwardRef<
         <Circle className="h-2.5 w-2.5 fill-current text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };
diff --git a/frontend/src/components/ui/scroll-area.tsx b/frontend/src/components/ui/scroll-area.tsx
index 107f8e5..6cda09b 100644
--- a/frontend/src/components/ui/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -11,7 +11,7 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    className={cn('relative overflow-hidden', className)}
     {...props}
   >
     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
@@ -20,29 +20,27 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
+>(({ className, orientation = 'vertical', ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
       className
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-[hsl(var(--scrollbar-thumb))] hover:bg-[hsl(var(--scrollbar-thumb-hover))] transition-colors" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index 88de321..9b25c50 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -1,16 +1,16 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 
-import { cn } from "@/lib"
+import { cn } from '@/lib';
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -29,8 +29,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -38,16 +38,13 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -55,29 +52,25 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = 'popper', ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        'relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
       )}
       position={position}
@@ -86,9 +79,9 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
         )}
       >
         {children}
@@ -96,8 +89,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -105,11 +98,11 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -118,7 +111,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -131,8 +124,8 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -140,11 +133,11 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -157,4 +150,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};
diff --git a/frontend/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx
index 6949b42..e55c37f 100644
--- a/frontend/src/components/ui/separator.tsx
+++ b/frontend/src/components/ui/separator.tsx
@@ -1,29 +1,24 @@
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from "@/lib"
+import { cn } from '@/lib';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'shrink-0 bg-border',
+      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+      className
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
index 4ba93ac..2e1aa31 100644
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -1,17 +1,17 @@
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
 
-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -19,36 +19,37 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
     ref={ref}
   />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
       },
     },
     defaultVariants: {
-      side: "right",
+      side: 'right',
     },
   }
-)
+);
 
 export interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+  extends
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {
   className?: string;
   children?: React.ReactNode;
@@ -57,14 +58,10 @@ export interface SheetContentProps
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = 'right', className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
@@ -72,36 +69,21 @@ const SheetContent = React.forwardRef<
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
     {...props}
   />
-)
-SheetHeader.displayName = "SheetHeader"
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = 'SheetFooter';
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -109,11 +91,11 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
+    className={cn('text-lg font-semibold text-foreground', className)}
     {...props}
   />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -121,11 +103,11 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -138,4 +120,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
index 01c1bb0..d48ff0e 100644
--- a/frontend/src/components/ui/sonner.tsx
+++ b/frontend/src/components/ui/sonner.tsx
@@ -1,22 +1,19 @@
-import {
-  CircleCheck,
-  Info,
-  LoaderCircle,
-  OctagonX,
-  TriangleAlert,
-} from "lucide-react"
-import { Toaster as Sonner } from "sonner"
-import { useThemeStore } from "@/store/theme"
+import { CircleCheck, Info, LoaderCircle, OctagonX, TriangleAlert } from 'lucide-react';
+import { Toaster as Sonner } from 'sonner';
+import { useThemeStore } from '@/store/theme';
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { mode } = useThemeStore()
+  const { mode } = useThemeStore();
 
   // Compute actual theme (resolve 'system' to 'light' or 'dark')
-  const actualTheme = mode === 'system'
-    ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-    : mode
+  const actualTheme =
+    mode === 'system'
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+      : mode;
 
   return (
     <Sonner
@@ -32,25 +29,22 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
           success:
-            "group-[.toaster]:bg-toast-success group-[.toaster]:text-toast-success-foreground group-[.toaster]:border-toast-success-border",
+            'group-[.toaster]:bg-toast-success group-[.toaster]:text-toast-success-foreground group-[.toaster]:border-toast-success-border',
           error:
-            "group-[.toaster]:bg-toast-error group-[.toaster]:text-toast-error-foreground group-[.toaster]:border-toast-error-border",
+            'group-[.toaster]:bg-toast-error group-[.toaster]:text-toast-error-foreground group-[.toaster]:border-toast-error-border',
           warning:
-            "group-[.toaster]:bg-toast-warning group-[.toaster]:text-toast-warning-foreground group-[.toaster]:border-toast-warning-border",
-          info:
-            "group-[.toaster]:bg-toast-info group-[.toaster]:text-toast-info-foreground group-[.toaster]:border-toast-info-border",
+            'group-[.toaster]:bg-toast-warning group-[.toaster]:text-toast-warning-foreground group-[.toaster]:border-toast-warning-border',
+          info: 'group-[.toaster]:bg-toast-info group-[.toaster]:text-toast-info-foreground group-[.toaster]:border-toast-info-border',
         },
       }}
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
index 9e9dd53..a0fe033 100644
--- a/frontend/src/components/ui/switch.tsx
+++ b/frontend/src/components/ui/switch.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
       className
     )}
     {...props}
@@ -17,11 +17,11 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
index 9237b43..c8ef221 100644
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -1,38 +1,33 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <table
-    ref={ref}
-    className={cn("w-full caption-bottom text-sm", className)}
-    {...props}
-  />
-))
-Table.displayName = "Table"
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+  )
+);
+Table.displayName = 'Table';
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b bg-muted/50 [&_tr]:hover:bg-muted/50", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+  <thead
+    ref={ref}
+    className={cn('[&_tr]:border-b bg-muted/50 [&_tr]:hover:bg-muted/50', className)}
+    {...props}
+  />
+));
+TableHeader.displayName = 'TableHeader';
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+));
+TableBody.displayName = 'TableBody';
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -40,29 +35,25 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
+    className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = 'TableFooter';
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = 'TableRow';
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -71,13 +62,13 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-semibold text-foreground [&:has([role=checkbox])]:pr-0",
+      'h-12 px-4 text-left align-middle font-semibold text-foreground [&:has([role=checkbox])]:pr-0',
       className
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -85,31 +76,18 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
+  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+));
+TableCaption.displayName = 'TableCaption';
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index d8ad07f..1677fdc 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -12,13 +12,13 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
       className
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -27,13 +27,13 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm',
       className
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -42,12 +42,12 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1',
       className
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
index c91448f..13683f6 100644
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -1,22 +1,21 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib"
+import { cn } from '@/lib';
 
-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Textarea.displayName = "Textarea"
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
 
-export { Textarea }
+export { Textarea };
diff --git a/frontend/src/components/ui/toast.tsx b/frontend/src/components/ui/toast.tsx
index e6ed477..0f45ff5 100644
--- a/frontend/src/components/ui/toast.tsx
+++ b/frontend/src/components/ui/toast.tsx
@@ -1,13 +1,13 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
 
-import { cn } from "@/lib"
+import { cn } from '@/lib';
 
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -16,34 +16,33 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
       className
     )}
     {...props}
   />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     variants: {
       variant: {
-        default: "border bg-background text-foreground",
+        default: 'border bg-background text-foreground',
         destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
-)
+);
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
@@ -51,9 +50,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -62,13 +61,13 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
       className
     )}
     {...props}
   />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -77,7 +76,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
       className
     )}
     toast-close=""
@@ -85,20 +84,16 @@ const ToastClose = React.forwardRef<
   >
     <X className="h-4 w-4" />
   </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+  <ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold', className)} {...props} />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -106,15 +101,15 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm opacity-90", className)}
+    className={cn('text-sm opacity-90', className)}
     {...props}
   />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
   type ToastProps,
@@ -126,4 +121,4 @@ export {
   ToastDescription,
   ToastClose,
   ToastAction,
-}
+};
diff --git a/frontend/src/components/ui/toaster.tsx b/frontend/src/components/ui/toaster.tsx
index 20db261..241ffbb 100644
--- a/frontend/src/components/ui/toaster.tsx
+++ b/frontend/src/components/ui/toaster.tsx
@@ -1,6 +1,6 @@
-"use client"
+'use client';
 
-import { useToast } from "@/hooks/use-toast"
+import { useToast } from '@/hooks/use-toast';
 import {
   Toast,
   ToastClose,
@@ -8,10 +8,10 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast"
+} from '@/components/ui/toast';
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider>
@@ -20,16 +20,14 @@ export function Toaster() {
           <Toast key={id} {...props}>
             <div className="grid gap-1">
               {title ? <ToastTitle>{title}</ToastTitle> : null}
-              {description ? (
-                <ToastDescription>{description}</ToastDescription>
-              ) : null}
+              {description ? <ToastDescription>{description}</ToastDescription> : null}
             </div>
             {action}
             <ToastClose />
           </Toast>
-        )
+        );
       })}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }
diff --git a/frontend/src/components/ui/toggle-group.tsx b/frontend/src/components/ui/toggle-group.tsx
index 9fef452..878eb91 100644
--- a/frontend/src/components/ui/toggle-group.tsx
+++ b/frontend/src/components/ui/toggle-group.tsx
@@ -1,16 +1,14 @@
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/index"
-import { toggleVariants } from "./toggle"
+import { cn } from '@/lib/index';
+import { toggleVariants } from './toggle';
 
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: "default",
-  variant: "default",
-})
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+});
 
 const ToggleGroup = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
@@ -19,23 +17,21 @@ const ToggleGroup = React.forwardRef<
 >(({ className, variant, size, children, ...props }, ref) => (
   <ToggleGroupPrimitive.Root
     ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
+    className={cn('flex items-center justify-center gap-1', className)}
     {...props}
   >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
   </ToggleGroupPrimitive.Root>
-))
+));
 
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
 const ToggleGroupItem = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
     VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
+  const context = React.useContext(ToggleGroupContext);
 
   return (
     <ToggleGroupPrimitive.Item
@@ -51,9 +47,9 @@ const ToggleGroupItem = React.forwardRef<
     >
       {children}
     </ToggleGroupPrimitive.Item>
-  )
-})
+  );
+});
 
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };
diff --git a/frontend/src/components/ui/toggle.tsx b/frontend/src/components/ui/toggle.tsx
index 30394a8..7cbb948 100644
--- a/frontend/src/components/ui/toggle.tsx
+++ b/frontend/src/components/ui/toggle.tsx
@@ -1,43 +1,41 @@
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11",
+        default: 'h-10 px-3 min-w-10',
+        sm: 'h-9 px-2.5 min-w-9',
+        lg: 'h-11 px-5 min-w-11',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
-)
+);
 
 const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}
     className={cn(toggleVariants({ variant, size, className }))}
     {...props}
   />
-))
+));
 
-Toggle.displayName = TogglePrimitive.Root.displayName
+Toggle.displayName = TogglePrimitive.Root.displayName;
 
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
index 9374fb1..949bc3b 100644
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from "@/lib/index"
+import { cn } from '@/lib/index';
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -18,13 +18,13 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]',
         className
       )}
       {...props}
     />
   </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/frontend/src/components/users/ChangePasswordDialog.tsx b/frontend/src/components/users/ChangePasswordDialog.tsx
index 01efdf1..fdeffca 100644
--- a/frontend/src/components/users/ChangePasswordDialog.tsx
+++ b/frontend/src/components/users/ChangePasswordDialog.tsx
@@ -24,14 +24,16 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog';
 
-const changePasswordSchema = z.object({
-  currentPassword: z.string().min(6, 'Password must be at least 6 characters'),
-  newPassword: z.string().min(6, 'Password must be at least 6 characters'),
-  confirmPassword: z.string().min(6, 'Password must be at least 6 characters'),
-}).refine((data) => data.newPassword === data.confirmPassword, {
-  message: "Passwords don't match",
-  path: ["confirmPassword"],
-});
+const changePasswordSchema = z
+  .object({
+    currentPassword: z.string().min(6, 'Password must be at least 6 characters'),
+    newPassword: z.string().min(6, 'Password must be at least 6 characters'),
+    confirmPassword: z.string().min(6, 'Password must be at least 6 characters'),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+  });
 
 type ChangePasswordFormValues = z.infer<typeof changePasswordSchema>;
 
@@ -42,7 +44,12 @@ interface ChangePasswordDialogProps {
   onSuccess: () => void;
 }
 
-export function ChangePasswordDialog({ isOpen, user, onClose, onSuccess }: ChangePasswordDialogProps) {
+export function ChangePasswordDialog({
+  isOpen,
+  user,
+  onClose,
+  onSuccess,
+}: ChangePasswordDialogProps) {
   const changePasswordMutation = useChangePassword();
 
   const form = useForm<ChangePasswordFormValues>({
@@ -60,8 +67,8 @@ export function ChangePasswordDialog({ isOpen, user, onClose, onSuccess }: Chang
         id: user.id,
         passwordData: {
           currentPassword: values.currentPassword,
-          newPassword: values.newPassword
-        }
+          newPassword: values.newPassword,
+        },
       });
       onSuccess();
       onClose();
@@ -74,9 +81,7 @@ export function ChangePasswordDialog({ isOpen, user, onClose, onSuccess }: Chang
     <Dialog open={isOpen} onOpenChange={(open: boolean) => !open && onClose()}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>
-            Change Password for {user.username}
-          </DialogTitle>
+          <DialogTitle>Change Password for {user.username}</DialogTitle>
         </DialogHeader>
 
         <DialogBody>
@@ -97,11 +102,7 @@ export function ChangePasswordDialog({ isOpen, user, onClose, onSuccess }: Chang
                   <FormItem>
                     <FormLabel>Current Password</FormLabel>
                     <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="******************"
-                        {...field}
-                      />
+                      <Input type="password" placeholder="******************" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -115,11 +116,7 @@ export function ChangePasswordDialog({ isOpen, user, onClose, onSuccess }: Chang
                   <FormItem>
                     <FormLabel>New Password</FormLabel>
                     <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="******************"
-                        {...field}
-                      />
+                      <Input type="password" placeholder="******************" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -133,11 +130,7 @@ export function ChangePasswordDialog({ isOpen, user, onClose, onSuccess }: Chang
                   <FormItem>
                     <FormLabel>Confirm New Password</FormLabel>
                     <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="******************"
-                        {...field}
-                      />
+                      <Input type="password" placeholder="******************" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -145,17 +138,10 @@ export function ChangePasswordDialog({ isOpen, user, onClose, onSuccess }: Chang
               />
 
               <DialogFooter>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={onClose}
-                >
+                <Button type="button" variant="secondary" onClick={onClose}>
                   Cancel
                 </Button>
-                <Button
-                  type="submit"
-                  disabled={changePasswordMutation.isPending}
-                >
+                <Button type="submit" disabled={changePasswordMutation.isPending}>
                   {changePasswordMutation.isPending ? 'Changing...' : 'Change Password'}
                 </Button>
               </DialogFooter>
diff --git a/frontend/src/components/users/UserForm.tsx b/frontend/src/components/users/UserForm.tsx
index b39c438..3a76544 100644
--- a/frontend/src/components/users/UserForm.tsx
+++ b/frontend/src/components/users/UserForm.tsx
@@ -36,7 +36,10 @@ import {
 } from '@/components/ui/dialog';
 
 const createUserSchema = z.object({
-  username: z.string().min(3, 'Username must be at least 3 characters').max(50, 'Username must be at most 50 characters'),
+  username: z
+    .string()
+    .min(3, 'Username must be at least 3 characters')
+    .max(50, 'Username must be at most 50 characters'),
   email: z.string().email('Invalid email address'),
   password: z.string().min(6, 'Password must be at least 6 characters'),
   roleId: z.number(),
@@ -67,19 +70,20 @@ export function UserForm({ user, onClose, onSuccess }: UserFormProps) {
 
   const form = useForm<CreateUserFormValues | UpdateUserFormValues>({
     resolver: zodResolver(isEditMode ? updateUserSchema : createUserSchema),
-    defaultValues: isEditMode && user
-      ? {
-          email: user.email,
-          roleId: user.roleId,
-          isActive: user.isActive,
-        }
-      : {
-          username: '',
-          email: '',
-          password: '',
-          roleId: 2, // Default to 'user' role
-          isActive: true,
-        },
+    defaultValues:
+      isEditMode && user
+        ? {
+            email: user.email,
+            roleId: user.roleId,
+            isActive: user.isActive,
+          }
+        : {
+            username: '',
+            email: '',
+            password: '',
+            roleId: 2, // Default to 'user' role
+            isActive: true,
+          },
   });
 
   useEffect(() => {
@@ -114,9 +118,7 @@ export function UserForm({ user, onClose, onSuccess }: UserFormProps) {
     <Dialog open={true} onOpenChange={(open: boolean) => !open && onClose()}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>
-            {isEditMode ? 'Edit User' : 'Create New User'}
-          </DialogTitle>
+          <DialogTitle>{isEditMode ? 'Edit User' : 'Create New User'}</DialogTitle>
         </DialogHeader>
 
         <DialogBody>
@@ -138,10 +140,7 @@ export function UserForm({ user, onClose, onSuccess }: UserFormProps) {
                     <FormItem>
                       <FormLabel>Username</FormLabel>
                       <FormControl>
-                        <Input
-                          placeholder="Username"
-                          {...field}
-                        />
+                        <Input placeholder="Username" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -154,11 +153,7 @@ export function UserForm({ user, onClose, onSuccess }: UserFormProps) {
                   <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                     Username
                   </label>
-                  <Input
-                    value={user.username}
-                    disabled
-                    className="bg-muted"
-                  />
+                  <Input value={user.username} disabled className="bg-muted" />
                   <p className="text-xs text-muted-foreground mt-1">Username cannot be changed</p>
                 </div>
               ) : null}
@@ -170,11 +165,7 @@ export function UserForm({ user, onClose, onSuccess }: UserFormProps) {
                   <FormItem>
                     <FormLabel>Email</FormLabel>
                     <FormControl>
-                      <Input
-                        type="email"
-                        placeholder="you@example.com"
-                        {...field}
-                      />
+                      <Input type="email" placeholder="you@example.com" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -189,11 +180,7 @@ export function UserForm({ user, onClose, onSuccess }: UserFormProps) {
                     <FormItem>
                       <FormLabel>Password</FormLabel>
                       <FormControl>
-                        <Input
-                          type="password"
-                          placeholder="******************"
-                          {...field}
-                        />
+                        <Input type="password" placeholder="******************" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -236,32 +223,20 @@ export function UserForm({ user, onClose, onSuccess }: UserFormProps) {
                   <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                     <div className="space-y-0.5">
                       <FormLabel>Active</FormLabel>
-                      <FormDescription>
-                        User can sign in and access the application
-                      </FormDescription>
+                      <FormDescription>User can sign in and access the application</FormDescription>
                     </div>
                     <FormControl>
-                      <Switch
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItem>
                 )}
               />
 
               <DialogFooter>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={onClose}
-                >
+                <Button type="button" variant="secondary" onClick={onClose}>
                   Cancel
                 </Button>
-                <Button
-                  type="submit"
-                  disabled={mutation.isPending}
-                >
+                <Button type="submit" disabled={mutation.isPending}>
                   {mutation.isPending ? 'Saving...' : isEditMode ? 'Update' : 'Create'}
                 </Button>
               </DialogFooter>
diff --git a/frontend/src/components/users/UserTable.tsx b/frontend/src/components/users/UserTable.tsx
index b6b7b33..46bc2f8 100644
--- a/frontend/src/components/users/UserTable.tsx
+++ b/frontend/src/components/users/UserTable.tsx
@@ -63,28 +63,19 @@ export function UserTable({ onEdit, onChangePassword }: UserTableProps) {
     {
       accessorKey: 'username',
       header: 'Username',
-      cell: ({ row }) => (
-        <div className="font-medium">{row.getValue('username')}</div>
-      ),
+      cell: ({ row }) => <div className="font-medium">{row.getValue('username')}</div>,
     },
     {
       accessorKey: 'email',
       header: 'Email',
-      cell: ({ row }) => (
-        <div className="text-muted-foreground">{row.getValue('email')}</div>
-      ),
+      cell: ({ row }) => <div className="text-muted-foreground">{row.getValue('email')}</div>,
     },
     {
       accessorKey: 'roleName',
       header: 'Role',
       cell: ({ row }) => {
         const role = row.getValue('roleName') as string;
-        const variant =
-          role === 'admin'
-            ? 'default'
-            : role === 'user'
-            ? 'secondary'
-            : 'outline';
+        const variant = role === 'admin' ? 'default' : role === 'user' ? 'secondary' : 'outline';
         return (
           <Badge variant={variant} className="capitalize">
             {role}
@@ -134,9 +125,7 @@ export function UserTable({ onEdit, onChangePassword }: UserTableProps) {
               <DropdownMenuLabel>Actions</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <RoleGuard permission="users.update">
-                <DropdownMenuItem onClick={() => onEdit(user)}>
-                  Edit User
-                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onEdit(user)}>Edit User</DropdownMenuItem>
               </RoleGuard>
               <RoleGuard permission="users.update">
                 <DropdownMenuItem onClick={() => onChangePassword(user)}>
@@ -162,8 +151,7 @@ export function UserTable({ onEdit, onChangePassword }: UserTableProps) {
   if (isError) {
     return (
       <div className="rounded-lg border border-destructive bg-destructive/10 px-4 py-3 text-destructive">
-        Error loading users:{' '}
-        {getErrorMessage(error) || 'Unknown error'}
+        Error loading users: {getErrorMessage(error) || 'Unknown error'}
       </div>
     );
   }
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
index f352bef..cba7bc2 100644
--- a/frontend/src/contexts/AuthContext.tsx
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -24,7 +24,8 @@ interface AuthProviderProps {
 }
 
 export function AuthProvider({ children }: AuthProviderProps) {
-  const { setAuth, setGuestMode, clearAuth, refreshToken, updateAccessToken, setMaintenanceMode } = useAuthStore();
+  const { setAuth, setGuestMode, clearAuth, refreshToken, updateAccessToken, setMaintenanceMode } =
+    useAuthStore();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -59,40 +60,43 @@ export function AuthProvider({ children }: AuthProviderProps) {
   /**
    * Login function
    */
-  const login = useCallback(async (credentials: LoginCredentials, redirectPath?: string) => {
-    try {
-      const result = await authApi.login(credentials);
+  const login = useCallback(
+    async (credentials: LoginCredentials, redirectPath?: string) => {
+      try {
+        const result = await authApi.login(credentials);
 
-      // Clear all cached queries EXCEPT public settings when user logs in
-      // Public settings are not user-specific and should persist across sessions
-      queryClient.removeQueries({
-        predicate: (query) => {
-          const queryKey = query.queryKey;
-          // Keep public settings in cache
-          return !(queryKey[0] === 'system-settings' && queryKey[1] === 'public');
+        // Clear all cached queries EXCEPT public settings when user logs in
+        // Public settings are not user-specific and should persist across sessions
+        queryClient.removeQueries({
+          predicate: (query) => {
+            const queryKey = query.queryKey;
+            // Keep public settings in cache
+            return !(queryKey[0] === 'system-settings' && queryKey[1] === 'public');
+          },
+        });
+
+        setAuth(result.user, result.tokens);
+
+        // Check maintenance mode after login
+        const isMaintenanceActive = await checkMaintenanceMode();
+
+        // If maintenance mode is active and user is not admin, redirect to maintenance page
+        const isAdmin = result.user.permissions?.includes('settings.update');
+
+        if (isMaintenanceActive && !isAdmin) {
+          navigate('/maintenance', { replace: true });
+          return;
         }
-      });
 
-      setAuth(result.user, result.tokens);
-
-      // Check maintenance mode after login
-      const isMaintenanceActive = await checkMaintenanceMode();
-
-      // If maintenance mode is active and user is not admin, redirect to maintenance page
-      const isAdmin = result.user.permissions?.includes('settings.update');
-
-      if (isMaintenanceActive && !isAdmin) {
-        navigate('/maintenance', { replace: true });
-        return;
+        // Normal login - redirect to requested page or home
+        navigate(redirectPath || '/', { replace: true });
+      } catch (error) {
+        logger.error('Login failed:', error);
+        throw error;
       }
-
-      // Normal login - redirect to requested page or home
-      navigate(redirectPath || '/', { replace: true });
-    } catch (error) {
-      logger.error('Login failed:', error);
-      throw error;
-    }
-  }, [setAuth, queryClient, checkMaintenanceMode, navigate]);
+    },
+    [setAuth, queryClient, checkMaintenanceMode, navigate]
+  );
 
   /**
    * Login as guest function (temporary session)
@@ -105,15 +109,18 @@ export function AuthProvider({ children }: AuthProviderProps) {
   /**
    * Register function
    */
-  const register = useCallback(async (userData: RegisterData) => {
-    try {
-      const result = await authApi.register(userData);
-      setAuth(result.user, result.tokens);
-    } catch (error) {
-      logger.error('Registration failed:', error);
-      throw error;
-    }
-  }, [setAuth]);
+  const register = useCallback(
+    async (userData: RegisterData) => {
+      try {
+        const result = await authApi.register(userData);
+        setAuth(result.user, result.tokens);
+      } catch (error) {
+        logger.error('Registration failed:', error);
+        throw error;
+      }
+    },
+    [setAuth]
+  );
 
   /**
    * Logout function
@@ -134,7 +141,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
           const queryKey = query.queryKey;
           // Keep public settings in cache
           return !(queryKey[0] === 'system-settings' && queryKey[1] === 'public');
-        }
+        },
       });
       clearAuth();
       navigate('/login');
@@ -187,7 +194,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
     register,
     logout,
     refreshAccessToken,
-    checkMaintenanceMode
+    checkMaintenanceMode,
   };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
diff --git a/frontend/src/hooks/factories/createQueryHook.ts b/frontend/src/hooks/factories/createQueryHook.ts
index 2564559..fd9100e 100644
--- a/frontend/src/hooks/factories/createQueryHook.ts
+++ b/frontend/src/hooks/factories/createQueryHook.ts
@@ -120,10 +120,7 @@ export function createQueryHook<TData, TCreate, TUpdate, TId = number | string>(
           queryClient.setQueryData<TData[]>(options.queryKey, (old = []) => {
             return [newItem, ...old];
           });
-          showToast(
-            options.messages?.createSuccess || 'Created successfully',
-            'success'
-          );
+          showToast(options.messages?.createSuccess || 'Created successfully', 'success');
         },
         onError: (error: unknown) => {
           showToast(getErrorMessage(error), 'error');
@@ -134,19 +131,13 @@ export function createQueryHook<TData, TCreate, TUpdate, TId = number | string>(
     // Update mutation with optimistic update
     const useUpdateMutation = () => {
       return useMutation({
-        mutationFn: ({ id, data }: { id: TId; data: TUpdate }) =>
-          options.api.update(id, data),
+        mutationFn: ({ id, data }: { id: TId; data: TUpdate }) => options.api.update(id, data),
         onSuccess: (updated) => {
           // Optimistically update cache by replacing the updated item
           queryClient.setQueryData<TData[]>(options.queryKey, (old = []) => {
-            return old.map((item) =>
-              (item as any).id === (updated as any).id ? updated : item
-            );
+            return old.map((item) => ((item as any).id === (updated as any).id ? updated : item));
           });
-          showToast(
-            options.messages?.updateSuccess || 'Updated successfully',
-            'success'
-          );
+          showToast(options.messages?.updateSuccess || 'Updated successfully', 'success');
         },
         onError: (error: unknown) => {
           showToast(getErrorMessage(error), 'error');
@@ -163,10 +154,7 @@ export function createQueryHook<TData, TCreate, TUpdate, TId = number | string>(
           queryClient.setQueryData<TData[]>(options.queryKey, (old = []) => {
             return old.filter((item) => (item as any).id !== deletedId);
           });
-          showToast(
-            options.messages?.deleteSuccess || 'Deleted successfully',
-            'success'
-          );
+          showToast(options.messages?.deleteSuccess || 'Deleted successfully', 'success');
         },
         onError: (error: unknown) => {
           showToast(getErrorMessage(error), 'error');
diff --git a/frontend/src/hooks/use-toast.ts b/frontend/src/hooks/use-toast.ts
index 31ff69a..e38b26c 100644
--- a/frontend/src/hooks/use-toast.ts
+++ b/frontend/src/hooks/use-toast.ts
@@ -1,103 +1,98 @@
-import * as React from "react"
+import * as React from 'react';
 
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
 
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
 
 const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
 
-let count = 0
+let count = 0;
 
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
 }
 
-type ActionType = typeof actionTypes
+type ActionType = typeof actionTypes;
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
+      type: ActionType['ADD_TOAST'];
+      toast: ToasterToast;
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<ToasterToast>;
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
+      type: ActionType['DISMISS_TOAST'];
+      toastId?: ToasterToast['id'];
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
+      type: ActionType['REMOVE_TOAST'];
+      toastId?: ToasterToast['id'];
+    };
 
 interface State {
-  toasts: ToasterToast[]
+  toasts: ToasterToast[];
 }
 
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
-    return
+    return;
   }
 
   const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
+    toastTimeouts.delete(toastId);
     dispatch({
-      type: "REMOVE_TOAST",
+      type: 'REMOVE_TOAST',
       toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
+    });
+  }, TOAST_REMOVE_DELAY);
 
-  toastTimeouts.set(toastId, timeout)
-}
+  toastTimeouts.set(toastId, timeout);
+};
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
-    case "ADD_TOAST":
+    case 'ADD_TOAST':
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
+      };
 
-    case "UPDATE_TOAST":
+    case 'UPDATE_TOAST':
       return {
         ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
 
-    case "DISMISS_TOAST": {
-      const { toastId } = action
+    case 'DISMISS_TOAST': {
+      const { toastId } = action;
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
       // but I'll keep it here for simplicity
       if (toastId) {
-        addToRemoveQueue(toastId)
+        addToRemoveQueue(toastId);
       } else {
         state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
+          addToRemoveQueue(toast.id);
+        });
       }
 
       return {
@@ -110,82 +105,82 @@ export const reducer = (state: State, action: Action): State => {
               }
             : t
         ),
-      }
+      };
     }
-    case "REMOVE_TOAST":
+    case 'REMOVE_TOAST':
       if (action.toastId === undefined) {
         return {
           ...state,
           toasts: [],
-        }
+        };
       }
       return {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
+      };
   }
-}
+};
 
-const listeners: Array<(state: State) => void> = []
+const listeners: Array<(state: State) => void> = [];
 
-let memoryState: State = { toasts: [] }
+let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
+  memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => {
-    listener(memoryState)
-  })
+    listener(memoryState);
+  });
 }
 
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, 'id'>;
 
 function toast({ ...props }: Toast) {
-  const id = genId()
+  const id = genId();
 
   const update = (props: ToasterToast) =>
     dispatch({
-      type: "UPDATE_TOAST",
+      type: 'UPDATE_TOAST',
       toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+    });
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
 
   dispatch({
-    type: "ADD_TOAST",
+    type: 'ADD_TOAST',
     toast: {
       ...props,
       id,
       open: true,
       onOpenChange: (open: boolean) => {
-        if (!open) dismiss()
+        if (!open) dismiss();
       },
     },
-  })
+  });
 
   return {
     id: id,
     dismiss,
     update,
-  }
+  };
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+  const [state, setState] = React.useState<State>(memoryState);
 
   React.useEffect(() => {
-    listeners.push(setState)
+    listeners.push(setState);
     return () => {
-      const index = listeners.indexOf(setState)
+      const index = listeners.indexOf(setState);
       if (index > -1) {
-        listeners.splice(index, 1)
+        listeners.splice(index, 1);
       }
-    }
-  }, [state])
+    };
+  }, [state]);
 
   return {
     ...state,
     toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  };
 }
 
-export { useToast, toast }
+export { useToast, toast };
diff --git a/frontend/src/hooks/useActivities.ts b/frontend/src/hooks/useActivities.ts
index f0ae1de..c7f1619 100644
--- a/frontend/src/hooks/useActivities.ts
+++ b/frontend/src/hooks/useActivities.ts
@@ -1,6 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 import { activitiesApi } from '../lib/api';
-import { ActivityFilters, TimeRange, ActivitiesResponse, ActivityStatsResponse, ActivityTrendResponse, TopActionsResponse, ActivityBreakdownResponse } from '../types/auth';
+import {
+  ActivityFilters,
+  TimeRange,
+  ActivitiesResponse,
+  ActivityStatsResponse,
+  ActivityTrendResponse,
+  TopActionsResponse,
+  ActivityBreakdownResponse,
+} from '../types/auth';
 
 /**
  * Hook to fetch activity logs with pagination and filters
@@ -12,14 +20,18 @@ export function useActivities(page = 1, limit = 50, filters?: ActivityFilters) {
     staleTime: 5 * 60 * 1000, // 5 minutes
     gcTime: 10 * 60 * 1000, // 10 minutes
     // Keep window focus refetch enabled for fresh table data
-    refetchOnWindowFocus: true
+    refetchOnWindowFocus: true,
   });
 }
 
 /**
  * Hook to fetch activity statistics
  */
-export function useActivityStats(timeRange: TimeRange = '24h', customRange?: { startDate?: string; endDate?: string }, autoRefresh = false) {
+export function useActivityStats(
+  timeRange: TimeRange = '24h',
+  customRange?: { startDate?: string; endDate?: string },
+  autoRefresh = false
+) {
   return useQuery<ActivityStatsResponse>({
     queryKey: ['activity-stats', timeRange, customRange],
     queryFn: () => activitiesApi.getStats(timeRange, customRange),
@@ -27,7 +39,7 @@ export function useActivityStats(timeRange: TimeRange = '24h', customRange?: { s
     gcTime: 10 * 60 * 1000, // 10 minutes
     refetchInterval: autoRefresh ? 30 * 1000 : false, // Auto-refresh every 30s if enabled
     // Disable window focus refetch - dashboard only, rely on auto-refresh instead
-    refetchOnWindowFocus: false
+    refetchOnWindowFocus: false,
   });
 }
 
@@ -42,7 +54,7 @@ export function useActivityTrend(days = 7, autoRefresh = false) {
     gcTime: 10 * 60 * 1000, // 10 minutes
     refetchInterval: autoRefresh ? 30 * 1000 : false,
     // Disable window focus refetch - dashboard only, rely on auto-refresh instead
-    refetchOnWindowFocus: false
+    refetchOnWindowFocus: false,
   });
 }
 
@@ -57,7 +69,7 @@ export function useTopActions(limit = 10, timeRange: TimeRange = '24h', autoRefr
     gcTime: 10 * 60 * 1000, // 10 minutes
     refetchInterval: autoRefresh ? 30 * 1000 : false,
     // Disable window focus refetch - dashboard only, rely on auto-refresh instead
-    refetchOnWindowFocus: false
+    refetchOnWindowFocus: false,
   });
 }
 
@@ -77,6 +89,6 @@ export function useActivityBreakdown(
     gcTime: 10 * 60 * 1000, // 10 minutes
     refetchInterval: autoRefresh ? 30 * 1000 : false,
     // Disable window focus refetch - dashboard only, rely on auto-refresh instead
-    refetchOnWindowFocus: false
+    refetchOnWindowFocus: false,
   });
 }
diff --git a/frontend/src/hooks/useActivityFilters.ts b/frontend/src/hooks/useActivityFilters.ts
index 8c1b75b..c25ac30 100644
--- a/frontend/src/hooks/useActivityFilters.ts
+++ b/frontend/src/hooks/useActivityFilters.ts
@@ -25,12 +25,12 @@ const INITIAL_FILTER_STATE: ActivityFilterState = {
 export function useActivityFilters() {
   const [filters, setFilters] = useState<ActivityFilterState>(INITIAL_FILTER_STATE);
 
-  const updateFilter = useCallback(<K extends keyof ActivityFilterState>(
-    key: K,
-    value: ActivityFilterState[K]
-  ) => {
-    setFilters(prev => ({ ...prev, [key]: value }));
-  }, []);
+  const updateFilter = useCallback(
+    <K extends keyof ActivityFilterState>(key: K, value: ActivityFilterState[K]) => {
+      setFilters((prev) => ({ ...prev, [key]: value }));
+    },
+    []
+  );
 
   const clearFilters = useCallback(() => {
     setFilters(INITIAL_FILTER_STATE);
@@ -40,15 +40,15 @@ export function useActivityFilters() {
   useEffect(() => {
     if (filters.startDate && filters.endDate) {
       if (filters.endDate < filters.startDate) {
-        setFilters(prev => ({
+        setFilters((prev) => ({
           ...prev,
-          dateRangeError: 'End date must be after or equal to start date'
+          dateRangeError: 'End date must be after or equal to start date',
         }));
       } else {
-        setFilters(prev => ({ ...prev, dateRangeError: '' }));
+        setFilters((prev) => ({ ...prev, dateRangeError: '' }));
       }
     } else {
-      setFilters(prev => ({ ...prev, dateRangeError: '' }));
+      setFilters((prev) => ({ ...prev, dateRangeError: '' }));
     }
   }, [filters.startDate, filters.endDate]);
 
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
index 117ced9..4525650 100644
--- a/frontend/src/hooks/useAuth.ts
+++ b/frontend/src/hooks/useAuth.ts
@@ -14,7 +14,7 @@ export function useLogin() {
     mutationFn: (credentials: LoginCredentials) => login(credentials),
     onError: (error) => {
       logger.error('Login error:', error);
-    }
+    },
   });
 }
 
@@ -33,7 +33,7 @@ export function useRegister() {
     },
     onError: (error) => {
       logger.error('Registration error:', error);
-    }
+    },
   });
 }
 
@@ -52,7 +52,7 @@ export function useLogout() {
     },
     onError: (error) => {
       logger.error('Logout error:', error);
-    }
+    },
   });
 }
 
@@ -65,6 +65,6 @@ export function useCurrentUser() {
     queryFn: () => authApi.getMe(),
     retry: false,
     staleTime: 5 * 60 * 1000, // 5 minutes
-    gcTime: 10 * 60 * 1000 // 10 minutes (formerly cacheTime)
+    gcTime: 10 * 60 * 1000, // 10 minutes (formerly cacheTime)
   });
 }
diff --git a/frontend/src/hooks/useCommunityPlaylists.ts b/frontend/src/hooks/useCommunityPlaylists.ts
index a47295c..aaaa296 100644
--- a/frontend/src/hooks/useCommunityPlaylists.ts
+++ b/frontend/src/hooks/useCommunityPlaylists.ts
@@ -39,12 +39,11 @@ export function useDownloadCommunityPlaylist() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (downloadUrl: string) =>
-      communityPlaylistsApi.download(downloadUrl),
+    mutationFn: (downloadUrl: string) => communityPlaylistsApi.download(downloadUrl),
     onSuccess: () => {
       // Invalidate playlists cache so the new playlist appears immediately
       queryClient.invalidateQueries({ queryKey: ['playlists'] });
       queryClient.invalidateQueries({ queryKey: ['statistics'] });
-    }
+    },
   });
 }
diff --git a/frontend/src/hooks/useDomains.ts b/frontend/src/hooks/useDomains.ts
index 937282e..bcacb5f 100644
--- a/frontend/src/hooks/useDomains.ts
+++ b/frontend/src/hooks/useDomains.ts
@@ -27,10 +27,7 @@ export function useAddDomain() {
   return useMutation({
     mutationFn: (hostname: string) => domainsApi.add(hostname),
     onSuccess: (newDomain) => {
-      queryClient.setQueryData<Domain[]>(DOMAINS_QUERY_KEY, (old = []) => [
-        ...old,
-        newDomain,
-      ]);
+      queryClient.setQueryData<Domain[]>(DOMAINS_QUERY_KEY, (old = []) => [...old, newDomain]);
       // Invalidate public settings so default domain updates
       queryClient.invalidateQueries({ queryKey: ['system-settings', 'public'] });
       showToast('Domain added', 'success');
diff --git a/frontend/src/hooks/useDownload.ts b/frontend/src/hooks/useDownload.ts
index afbfdb6..15d1547 100644
--- a/frontend/src/hooks/useDownload.ts
+++ b/frontend/src/hooks/useDownload.ts
@@ -21,61 +21,64 @@ export function useDownload(gameId: string) {
   /**
    * Start downloading a game.
    */
-  const startDownload = useCallback(async (gameDataId?: number) => {
-    try {
-      setIsDownloading(true);
-      setProgress({
-        percent: 0,
-        status: 'waiting',
-        details: 'Starting download...'
-      });
+  const startDownload = useCallback(
+    async (gameDataId?: number) => {
+      try {
+        setIsDownloading(true);
+        setProgress({
+          percent: 0,
+          status: 'waiting',
+          details: 'Starting download...',
+        });
 
-      // Start download on backend
-      const result = await gamesApi.downloadGame(gameId, gameDataId);
+        // Start download on backend
+        const result = await gamesApi.downloadGame(gameId, gameDataId);
 
-      // Connect to SSE endpoint for progress updates
-      const eventSource = new EventSource(`/api/games/${gameId}/download/progress`);
-      eventSourceRef.current = eventSource;
+        // Connect to SSE endpoint for progress updates
+        const eventSource = new EventSource(`/api/games/${gameId}/download/progress`);
+        eventSourceRef.current = eventSource;
 
-      eventSource.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data) as DownloadProgress;
-          setProgress(data);
+        eventSource.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data) as DownloadProgress;
+            setProgress(data);
 
-          // If complete or error, close connection
-          if (data.status === 'complete' || data.status === 'error') {
-            eventSource.close();
-            setIsDownloading(false);
+            // If complete or error, close connection
+            if (data.status === 'complete' || data.status === 'error') {
+              eventSource.close();
+              setIsDownloading(false);
+            }
+          } catch (error) {
+            logger.error('Error parsing SSE data:', error);
           }
-        } catch (error) {
-          logger.error('Error parsing SSE data:', error);
-        }
-      };
+        };
 
-      eventSource.onerror = (error) => {
-        logger.error('SSE connection error:', error);
+        eventSource.onerror = (error) => {
+          logger.error('SSE connection error:', error);
+          setProgress({
+            percent: 0,
+            status: 'error',
+            details: 'Connection to server lost',
+            error: 'Connection error',
+          });
+          eventSource.close();
+          setIsDownloading(false);
+        };
+
+        return result;
+      } catch (error) {
+        setIsDownloading(false);
         setProgress({
           percent: 0,
           status: 'error',
-          details: 'Connection to server lost',
-          error: 'Connection error'
+          details: 'Failed to start download',
+          error: error instanceof Error ? error.message : 'Unknown error',
         });
-        eventSource.close();
-        setIsDownloading(false);
-      };
-
-      return result;
-    } catch (error) {
-      setIsDownloading(false);
-      setProgress({
-        percent: 0,
-        status: 'error',
-        details: 'Failed to start download',
-        error: error instanceof Error ? error.message : 'Unknown error'
-      });
-      throw error;
-    }
-  }, [gameId]);
+        throw error;
+      }
+    },
+    [gameId]
+  );
 
   /**
    * Cancel an active download.
@@ -96,7 +99,7 @@ export function useDownload(gameId: string) {
         percent: 0,
         status: 'error',
         details: 'Download cancelled',
-        error: 'Cancelled by user'
+        error: 'Cancelled by user',
       });
     } catch (error) {
       logger.error('Error cancelling download:', error);
@@ -126,6 +129,6 @@ export function useDownload(gameId: string) {
     isDownloading,
     startDownload,
     cancelDownload,
-    resetProgress
+    resetProgress,
   };
 }
diff --git a/frontend/src/hooks/useFavorites.ts b/frontend/src/hooks/useFavorites.ts
index a08df88..2ed0979 100644
--- a/frontend/src/hooks/useFavorites.ts
+++ b/frontend/src/hooks/useFavorites.ts
@@ -14,7 +14,7 @@ export function useFavorites(limit?: number, offset?: number) {
   return useQuery({
     queryKey: ['favorites', { limit, offset }],
     queryFn: () => favoritesApi.getAll(limit, offset),
-    enabled: enableFavorites
+    enabled: enableFavorites,
   });
 }
 
@@ -50,7 +50,7 @@ export function useFavoriteGames(
   return useQuery({
     queryKey: ['favorites', 'games', { limit, offset, sortBy, sortOrder }],
     queryFn: () => favoritesApi.getGames(limit, offset, sortBy, sortOrder),
-    enabled: enableFavorites
+    enabled: enableFavorites,
   });
 }
 
@@ -63,7 +63,7 @@ export function useFavoritesStats() {
   return useQuery({
     queryKey: ['favorites', 'stats'],
     queryFn: () => favoritesApi.getStats(),
-    enabled: enableFavorites
+    enabled: enableFavorites,
   });
 }
 
@@ -90,8 +90,8 @@ export function useToggleFavorite() {
       queryClient.setQueryData<string[]>(['favorites', 'game-ids'], (old = []) => {
         const isFavorited = old.includes(gameId);
         return isFavorited
-          ? old.filter(id => id !== gameId)  // Remove
-          : [...old, gameId];                // Add
+          ? old.filter((id) => id !== gameId) // Remove
+          : [...old, gameId]; // Add
       });
 
       // Update stats optimistically
@@ -101,7 +101,9 @@ export function useToggleFavorite() {
         const wasAdded = !previousIds.includes(gameId);
         return {
           ...old,
-          totalFavorites: wasAdded ? (old.totalFavorites || 0) + 1 : Math.max(0, (old.totalFavorites || 0) - 1)
+          totalFavorites: wasAdded
+            ? (old.totalFavorites || 0) + 1
+            : Math.max(0, (old.totalFavorites || 0) - 1),
         };
       });
 
@@ -127,9 +129,9 @@ export function useToggleFavorite() {
           query.queryKey[0] === 'favorites' &&
           query.queryKey.length > 1 &&
           query.queryKey[1] !== 'game-ids' &&
-          query.queryKey[1] !== 'stats'
+          query.queryKey[1] !== 'stats',
       });
-    }
+    },
   });
 }
 
@@ -178,9 +180,9 @@ export function useAddFavorite() {
           query.queryKey[0] === 'favorites' &&
           query.queryKey.length > 1 &&
           query.queryKey[1] !== 'game-ids' &&
-          query.queryKey[1] !== 'stats'
+          query.queryKey[1] !== 'stats',
       });
-    }
+    },
   });
 }
 
@@ -201,7 +203,7 @@ export function useRemoveFavorite() {
 
       // Remove from cache
       queryClient.setQueryData<string[]>(['favorites', 'game-ids'], (old = []) => {
-        return old.filter(id => id !== gameId);
+        return old.filter((id) => id !== gameId);
       });
 
       // Update stats
@@ -228,9 +230,9 @@ export function useRemoveFavorite() {
           query.queryKey[0] === 'favorites' &&
           query.queryKey.length > 1 &&
           query.queryKey[1] !== 'game-ids' &&
-          query.queryKey[1] !== 'stats'
+          query.queryKey[1] !== 'stats',
       });
-    }
+    },
   });
 }
 
@@ -251,7 +253,7 @@ export function useBatchAddFavorites() {
 
       // Add all to cache
       queryClient.setQueryData<string[]>(['favorites', 'game-ids'], (old = []) => {
-        const newIds = gameIds.filter(id => !old.includes(id));
+        const newIds = gameIds.filter((id) => !old.includes(id));
         return [...old, ...newIds];
       });
 
@@ -259,7 +261,7 @@ export function useBatchAddFavorites() {
       queryClient.setQueryData<FavoritesStats>(['favorites', 'stats'], (old) => {
         if (!old) return old;
         const previousIds = queryClient.getQueryData<string[]>(['favorites', 'game-ids']) || [];
-        const newIds = gameIds.filter(id => !previousIds.includes(id));
+        const newIds = gameIds.filter((id) => !previousIds.includes(id));
         return { ...old, totalFavorites: (old.totalFavorites || 0) + newIds.length };
       });
 
@@ -281,9 +283,9 @@ export function useBatchAddFavorites() {
           query.queryKey[0] === 'favorites' &&
           query.queryKey.length > 1 &&
           query.queryKey[1] !== 'game-ids' &&
-          query.queryKey[1] !== 'stats'
+          query.queryKey[1] !== 'stats',
       });
-    }
+    },
   });
 }
 
@@ -304,7 +306,7 @@ export function useBatchRemoveFavorites() {
 
       // Remove all from cache
       queryClient.setQueryData<string[]>(['favorites', 'game-ids'], (old = []) => {
-        return old.filter(id => !gameIds.includes(id));
+        return old.filter((id) => !gameIds.includes(id));
       });
 
       // Update stats
@@ -332,9 +334,9 @@ export function useBatchRemoveFavorites() {
           query.queryKey[0] === 'favorites' &&
           query.queryKey.length > 1 &&
           query.queryKey[1] !== 'game-ids' &&
-          query.queryKey[1] !== 'stats'
+          query.queryKey[1] !== 'stats',
       });
-    }
+    },
   });
 }
 
@@ -376,6 +378,6 @@ export function useClearAllFavorites() {
     onSuccess: () => {
       // Invalidate all favorites queries
       queryClient.invalidateQueries({ queryKey: ['favorites'] });
-    }
+    },
   });
 }
diff --git a/frontend/src/hooks/useFilterDropdowns.ts b/frontend/src/hooks/useFilterDropdowns.ts
index 6c882ff..cb8f1c4 100644
--- a/frontend/src/hooks/useFilterDropdowns.ts
+++ b/frontend/src/hooks/useFilterDropdowns.ts
@@ -7,12 +7,15 @@ import { useState, useCallback } from 'react';
 export function useFilterDropdowns() {
   const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>({});
 
-  const isOpen = useCallback((filterName: string) => {
-    return openDropdowns[filterName] || false;
-  }, [openDropdowns]);
+  const isOpen = useCallback(
+    (filterName: string) => {
+      return openDropdowns[filterName] || false;
+    },
+    [openDropdowns]
+  );
 
   const setOpen = useCallback((filterName: string, open: boolean) => {
-    setOpenDropdowns(prev => ({
+    setOpenDropdowns((prev) => ({
       ...prev,
       [filterName]: open,
     }));
diff --git a/frontend/src/hooks/useGames.test.tsx b/frontend/src/hooks/useGames.test.tsx
index 885965a..b928f70 100644
--- a/frontend/src/hooks/useGames.test.tsx
+++ b/frontend/src/hooks/useGames.test.tsx
@@ -65,10 +65,7 @@ describe('useGames', () => {
       };
 
       // First render
-      const { result: result1, unmount } = renderHook(
-        () => useGames(filters),
-        { wrapper }
-      );
+      const { result: result1, unmount } = renderHook(() => useGames(filters), { wrapper });
 
       await waitFor(() => {
         expect(result1.current.isSuccess).toBe(true);
@@ -78,10 +75,7 @@ describe('useGames', () => {
       unmount();
 
       // Second render with same filters should use cache
-      const { result: result2 } = renderHook(
-        () => useGames(filters),
-        { wrapper }
-      );
+      const { result: result2 } = renderHook(() => useGames(filters), { wrapper });
 
       // Should immediately have data from cache
       await waitFor(() => {
@@ -93,15 +87,9 @@ describe('useGames', () => {
       const filters1 = { search: 'test', page: 1, limit: 20 };
       const filters2 = { search: 'other', page: 1, limit: 20 };
 
-      const { result: result1 } = renderHook(
-        () => useGames(filters1),
-        { wrapper }
-      );
+      const { result: result1 } = renderHook(() => useGames(filters1), { wrapper });
 
-      const { result: result2 } = renderHook(
-        () => useGames(filters2),
-        { wrapper }
-      );
+      const { result: result2 } = renderHook(() => useGames(filters2), { wrapper });
 
       await waitFor(() => {
         expect(result1.current.isSuccess).toBe(true);
@@ -139,20 +127,14 @@ describe('useGames', () => {
     });
 
     it('should respect enabled option', () => {
-      const { result } = renderHook(
-        () => useGame('game-1', { enabled: false }),
-        { wrapper }
-      );
+      const { result } = renderHook(() => useGame('game-1', { enabled: false }), { wrapper });
 
       expect(result.current.isPending).toBe(true);
       expect(result.current.fetchStatus).toBe('idle');
     });
 
     it('should enable fetch when enabled option is true', async () => {
-      const { result } = renderHook(
-        () => useGame('game-1', { enabled: true }),
-        { wrapper }
-      );
+      const { result } = renderHook(() => useGame('game-1', { enabled: true }), { wrapper });
 
       await waitFor(() => {
         expect(result.current.isSuccess).toBe(true);
@@ -166,10 +148,7 @@ describe('useGames', () => {
     it('should fetch related games with default limit', async () => {
       const gameId = 'game-1';
 
-      const { result } = renderHook(
-        () => useRelatedGames(gameId),
-        { wrapper }
-      );
+      const { result } = renderHook(() => useRelatedGames(gameId), { wrapper });
 
       await waitFor(() => {
         expect(result.current.isSuccess).toBe(true);
@@ -182,10 +161,7 @@ describe('useGames', () => {
       const gameId = 'game-1';
       const customLimit = 5;
 
-      const { result } = renderHook(
-        () => useRelatedGames(gameId, customLimit),
-        { wrapper }
-      );
+      const { result } = renderHook(() => useRelatedGames(gameId, customLimit), { wrapper });
 
       await waitFor(() => {
         expect(result.current.isSuccess).toBe(true);
@@ -195,10 +171,7 @@ describe('useGames', () => {
     });
 
     it('should not fetch when ID is empty', () => {
-      const { result } = renderHook(
-        () => useRelatedGames(''),
-        { wrapper }
-      );
+      const { result } = renderHook(() => useRelatedGames(''), { wrapper });
 
       expect(result.current.isPending).toBe(true);
       expect(result.current.fetchStatus).toBe('idle');
diff --git a/frontend/src/hooks/useGames.ts b/frontend/src/hooks/useGames.ts
index 3abaf21..b844cf7 100644
--- a/frontend/src/hooks/useGames.ts
+++ b/frontend/src/hooks/useGames.ts
@@ -18,7 +18,7 @@ export function useGame(id: string, options?: { enabled?: boolean }) {
   return useQuery({
     queryKey: ['game', id],
     queryFn: () => gamesApi.getById(id),
-    enabled: !!id && (options?.enabled !== false)
+    enabled: !!id && options?.enabled !== false,
   });
 }
 
@@ -26,14 +26,14 @@ export function useRelatedGames(id: string, limit = 10) {
   return useQuery({
     queryKey: ['games', id, 'related', limit],
     queryFn: () => gamesApi.getRelated(id, limit),
-    enabled: !!id
+    enabled: !!id,
   });
 }
 
 export function useRandomGame(library?: string) {
   return useQuery({
     queryKey: ['games', 'random', library],
-    queryFn: () => gamesApi.getRandom(library)
+    queryFn: () => gamesApi.getRandom(library),
   });
 }
 
@@ -41,6 +41,6 @@ export function useGameLaunchData(id: string) {
   return useQuery({
     queryKey: ['game', id, 'launch'],
     queryFn: () => gamesApi.getLaunchData(id),
-    enabled: !!id
+    enabled: !!id,
   });
 }
diff --git a/frontend/src/hooks/useLazyLoad.tsx b/frontend/src/hooks/useLazyLoad.tsx
index 558f85c..8b83e9f 100644
--- a/frontend/src/hooks/useLazyLoad.tsx
+++ b/frontend/src/hooks/useLazyLoad.tsx
@@ -48,7 +48,7 @@ export function useLazyLoad<T extends HTMLElement = HTMLDivElement>(
       },
       {
         rootMargin,
-        threshold
+        threshold,
       }
     );
 
diff --git a/frontend/src/hooks/usePlayTracking.ts b/frontend/src/hooks/usePlayTracking.ts
index 0bccc5e..9dd53a5 100644
--- a/frontend/src/hooks/usePlayTracking.ts
+++ b/frontend/src/hooks/usePlayTracking.ts
@@ -25,7 +25,7 @@ export function usePlaySession(gameId: string | null, gameTitle: string | null)
     onError: (error) => {
       logger.error('[PlaySession] Failed to start play session:', error);
       hasStartedSessionRef.current = false;
-    }
+    },
   });
 
   const endMutation = useMutation({
@@ -36,7 +36,7 @@ export function usePlaySession(gameId: string | null, gameTitle: string | null)
     },
     onError: (error) => {
       logger.error('[PlaySession] Failed to end play session:', error);
-    }
+    },
   });
 
   // Handle session lifecycle (start on mount, end on game change)
@@ -49,7 +49,7 @@ export function usePlaySession(gameId: string | null, gameTitle: string | null)
       gameTitle,
       hasStartedSession: hasStartedSessionRef.current,
       previousGameId: previousGameIdRef.current,
-      isPending: startMutation.isPending
+      isPending: startMutation.isPending,
     });
 
     // Skip if feature disabled, not authenticated, is guest, or no game data
@@ -72,17 +72,20 @@ export function usePlaySession(gameId: string | null, gameTitle: string | null)
         logger.debug('[PlaySession] Ending previous session before starting new one');
         sessionIdRef.current = null;
 
-        playTrackingApi.endSession(previousSessionId).then(() => {
-          previousGameIdRef.current = gameId;
-          hasStartedSessionRef.current = true;
-          startMutation.mutate({ gameId, gameTitle });
-        }).catch(error => {
-          logger.error('[PlaySession] Failed to end previous session:', error);
-          // Start new session anyway
-          previousGameIdRef.current = gameId;
-          hasStartedSessionRef.current = true;
-          startMutation.mutate({ gameId, gameTitle });
-        });
+        playTrackingApi
+          .endSession(previousSessionId)
+          .then(() => {
+            previousGameIdRef.current = gameId;
+            hasStartedSessionRef.current = true;
+            startMutation.mutate({ gameId, gameTitle });
+          })
+          .catch((error) => {
+            logger.error('[PlaySession] Failed to end previous session:', error);
+            // Start new session anyway
+            previousGameIdRef.current = gameId;
+            hasStartedSessionRef.current = true;
+            startMutation.mutate({ gameId, gameTitle });
+          });
       } else {
         // No previous session or same game, just start
         logger.debug('[PlaySession] Starting new session');
@@ -98,7 +101,7 @@ export function usePlaySession(gameId: string | null, gameTitle: string | null)
     return () => {
       if (sessionIdRef.current) {
         logger.debug('[PlaySession] Component unmounting, ending session:', sessionIdRef.current);
-        playTrackingApi.endSession(sessionIdRef.current).catch(error => {
+        playTrackingApi.endSession(sessionIdRef.current).catch((error) => {
           logger.error('[PlaySession] Failed to end play session on cleanup:', error);
         });
         // Reset refs on unmount
@@ -115,7 +118,7 @@ export function usePlaySession(gameId: string | null, gameTitle: string | null)
       if (sessionIdRef.current) {
         endMutation.mutate(sessionIdRef.current);
       }
-    }
+    },
   };
 }
 
diff --git a/frontend/src/hooks/usePlaylists.ts b/frontend/src/hooks/usePlaylists.ts
index 730fda2..73a7cd1 100644
--- a/frontend/src/hooks/usePlaylists.ts
+++ b/frontend/src/hooks/usePlaylists.ts
@@ -4,7 +4,7 @@ import { playlistsApi } from '@/lib/api';
 export function usePlaylists() {
   return useQuery({
     queryKey: ['playlists'],
-    queryFn: () => playlistsApi.getAll()
+    queryFn: () => playlistsApi.getAll(),
   });
 }
 
@@ -12,7 +12,7 @@ export function usePlaylist(id: string) {
   return useQuery({
     queryKey: ['playlist', id],
     queryFn: () => playlistsApi.getById(id),
-    enabled: !!id
+    enabled: !!id,
   });
 }
 
@@ -20,12 +20,16 @@ export function useCreatePlaylist() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (data: { title: string; description?: string; author?: string; library?: string }) =>
-      playlistsApi.create(data),
+    mutationFn: (data: {
+      title: string;
+      description?: string;
+      author?: string;
+      library?: string;
+    }) => playlistsApi.create(data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['playlists'] });
       queryClient.invalidateQueries({ queryKey: ['statistics'] });
-    }
+    },
   });
 }
 
@@ -39,7 +43,7 @@ export function useAddGamesToPlaylist() {
       queryClient.invalidateQueries({ queryKey: ['playlists'] });
       queryClient.invalidateQueries({ queryKey: ['playlist', variables.playlistId] });
       queryClient.invalidateQueries({ queryKey: ['statistics'] });
-    }
+    },
   });
 }
 
@@ -53,7 +57,7 @@ export function useRemoveGamesFromPlaylist() {
       queryClient.invalidateQueries({ queryKey: ['playlists'] });
       queryClient.invalidateQueries({ queryKey: ['playlist', variables.playlistId] });
       queryClient.invalidateQueries({ queryKey: ['statistics'] });
-    }
+    },
   });
 }
 
@@ -65,7 +69,7 @@ export function useDeletePlaylist() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['playlists'] });
       queryClient.invalidateQueries({ queryKey: ['statistics'] });
-    }
+    },
   });
 }
 
@@ -80,13 +84,12 @@ export function useAddToFavorites() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (gameId: string) =>
-      playlistsApi.addGames(FAVORITES_PLAYLIST_ID, [gameId]),
+    mutationFn: (gameId: string) => playlistsApi.addGames(FAVORITES_PLAYLIST_ID, [gameId]),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['playlists'] });
       queryClient.invalidateQueries({ queryKey: ['playlist', FAVORITES_PLAYLIST_ID] });
       queryClient.invalidateQueries({ queryKey: ['statistics'] });
-    }
+    },
   });
 }
 
@@ -94,12 +97,11 @@ export function useRemoveFromFavorites() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (gameId: string) =>
-      playlistsApi.removeGames(FAVORITES_PLAYLIST_ID, [gameId]),
+    mutationFn: (gameId: string) => playlistsApi.removeGames(FAVORITES_PLAYLIST_ID, [gameId]),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['playlists'] });
       queryClient.invalidateQueries({ queryKey: ['playlist', FAVORITES_PLAYLIST_ID] });
       queryClient.invalidateQueries({ queryKey: ['statistics'] });
-    }
+    },
   });
 }
diff --git a/frontend/src/hooks/useRecentGames.ts b/frontend/src/hooks/useRecentGames.ts
index a10cefd..991e945 100644
--- a/frontend/src/hooks/useRecentGames.ts
+++ b/frontend/src/hooks/useRecentGames.ts
@@ -11,11 +11,7 @@ import { GameFilters } from '@/types/game';
  * @param hours - Time window in hours for "recent" games (default: 24)
  * @returns TanStack Query result with recent games
  */
-export function useRecentGames(
-  type: 'added' | 'modified',
-  limit: number = 20,
-  hours: number = 24
-) {
+export function useRecentGames(type: 'added' | 'modified', limit: number = 20, hours: number = 24) {
   return useQuery({
     queryKey: ['games', 'recent', type, limit, hours],
     queryFn: async () => {
diff --git a/frontend/src/hooks/useRoles.ts b/frontend/src/hooks/useRoles.ts
index b2f66bf..5bce361 100644
--- a/frontend/src/hooks/useRoles.ts
+++ b/frontend/src/hooks/useRoles.ts
@@ -46,8 +46,7 @@ export function useUpdateRole() {
   const { showToast } = useDialog();
 
   return useMutation({
-    mutationFn: ({ id, data }: { id: number; data: UpdateRoleData }) =>
-      rolesApi.update(id, data),
+    mutationFn: ({ id, data }: { id: number; data: UpdateRoleData }) => rolesApi.update(id, data),
     onSuccess: (updated) => {
       queryClient.setQueryData<Role[]>(['roles'], (old = []) => {
         return old.map((role) => (role.id === updated.id ? updated : role));
diff --git a/frontend/src/hooks/useSharedAccessToken.ts b/frontend/src/hooks/useSharedAccessToken.ts
index 351f277..44697ef 100644
--- a/frontend/src/hooks/useSharedAccessToken.ts
+++ b/frontend/src/hooks/useSharedAccessToken.ts
@@ -18,40 +18,33 @@ interface UseSharedAccessTokenResult {
 }
 
 export function useSharedAccessToken(): UseSharedAccessTokenResult {
-  const {
-    shareToken: currentShareToken,
-    isValid,
-    setToken,
-    clearToken
-  } = useSharedAccessStore();
+  const { shareToken: currentShareToken, isValid, setToken, clearToken } = useSharedAccessStore();
 
   const [isGenerating, setIsGenerating] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
-  const generateToken = useCallback(async (shareToken: string) => {
-    // Don't regenerate if we already have a valid token for this shareToken
-    if (isValid() && currentShareToken === shareToken) {
-      return;
-    }
+  const generateToken = useCallback(
+    async (shareToken: string) => {
+      // Don't regenerate if we already have a valid token for this shareToken
+      if (isValid() && currentShareToken === shareToken) {
+        return;
+      }
 
-    setIsGenerating(true);
-    setError(null);
+      setIsGenerating(true);
+      setError(null);
 
-    try {
-      const response = await sharedPlaylistsApi.generateAccessToken(shareToken);
-      setToken(
-        response.accessToken,
-        shareToken,
-        response.playlistId,
-        response.expiresIn
-      );
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error('Failed to generate access token'));
-      throw err;
-    } finally {
-      setIsGenerating(false);
-    }
-  }, [currentShareToken, isValid, setToken]);
+      try {
+        const response = await sharedPlaylistsApi.generateAccessToken(shareToken);
+        setToken(response.accessToken, shareToken, response.playlistId, response.expiresIn);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to generate access token'));
+        throw err;
+      } finally {
+        setIsGenerating(false);
+      }
+    },
+    [currentShareToken, isValid, setToken]
+  );
 
   return {
     hasValidToken: isValid(),
@@ -59,6 +52,6 @@ export function useSharedAccessToken(): UseSharedAccessTokenResult {
     clearToken,
     currentShareToken,
     isGenerating,
-    error
+    error,
   };
 }
diff --git a/frontend/src/hooks/useStatistics.ts b/frontend/src/hooks/useStatistics.ts
index 441c6ed..2420088 100644
--- a/frontend/src/hooks/useStatistics.ts
+++ b/frontend/src/hooks/useStatistics.ts
@@ -15,6 +15,6 @@ export function useStatistics() {
     queryKey: ['statistics'],
     queryFn: statisticsApi.getStatistics,
     staleTime: 5 * 60 * 1000, // Cache for 5 minutes
-    retry: 1
+    retry: 1,
   });
 }
diff --git a/frontend/src/hooks/useSwipeGesture.ts b/frontend/src/hooks/useSwipeGesture.ts
index b85ad92..a7ff1e3 100644
--- a/frontend/src/hooks/useSwipeGesture.ts
+++ b/frontend/src/hooks/useSwipeGesture.ts
@@ -12,15 +12,8 @@ interface SwipeGestureOptions {
  * @param options Configuration options for swipe detection
  * @returns Ref to attach to the element that should detect swipes
  */
-export function useSwipeGesture<T extends HTMLElement>(
-  options: SwipeGestureOptions
-): RefObject<T> {
-  const {
-    onSwipeLeft,
-    onSwipeRight,
-    minSwipeDistance = 50,
-    maxSwipeTime = 300
-  } = options;
+export function useSwipeGesture<T extends HTMLElement>(options: SwipeGestureOptions): RefObject<T> {
+  const { onSwipeLeft, onSwipeRight, minSwipeDistance = 50, maxSwipeTime = 300 } = options;
 
   const elementRef = useRef<T>(null);
   const touchStartX = useRef<number>(0);
@@ -51,10 +44,7 @@ export function useSwipeGesture<T extends HTMLElement>(
       // Check if this is a horizontal swipe (more horizontal than vertical)
       if (Math.abs(deltaX) > Math.abs(deltaY)) {
         // Check if swipe was fast enough and long enough
-        if (
-          Math.abs(deltaX) >= minSwipeDistance &&
-          deltaTime <= maxSwipeTime
-        ) {
+        if (Math.abs(deltaX) >= minSwipeDistance && deltaTime <= maxSwipeTime) {
           if (deltaX > 0 && onSwipeRight) {
             onSwipeRight();
           } else if (deltaX < 0 && onSwipeLeft) {
diff --git a/frontend/src/hooks/useUserPlaylists.ts b/frontend/src/hooks/useUserPlaylists.ts
index 4e97c28..6414439 100644
--- a/frontend/src/hooks/useUserPlaylists.ts
+++ b/frontend/src/hooks/useUserPlaylists.ts
@@ -189,9 +189,7 @@ export function useAddGamesToUserPlaylist() {
       // Update playlists list cache
       queryClient.setQueryData<UserPlaylist[]>(['user-playlists'], (old = []) => {
         return old.map((playlist) =>
-          playlist.id === variables.id
-            ? { ...playlist, gameCount: response.gameCount }
-            : playlist
+          playlist.id === variables.id ? { ...playlist, gameCount: response.gameCount } : playlist
         );
       });
 
@@ -275,9 +273,7 @@ export function useRemoveGamesFromUserPlaylist() {
       // Update playlists list cache
       queryClient.setQueryData<UserPlaylist[]>(['user-playlists'], (old = []) => {
         return old.map((playlist) =>
-          playlist.id === variables.id
-            ? { ...playlist, gameCount: response.gameCount }
-            : playlist
+          playlist.id === variables.id ? { ...playlist, gameCount: response.gameCount } : playlist
         );
       });
 
@@ -316,11 +312,7 @@ export function useReorderUserPlaylistGames() {
 
     onMutate: async ({ id, gameIdOrder }) => {
       await queryClient.cancelQueries({ queryKey: ['user-playlist', id, 'games'] });
-      const previousGames = queryClient.getQueryData<Game[]>([
-        'user-playlist',
-        id,
-        'games',
-      ]);
+      const previousGames = queryClient.getQueryData<Game[]>(['user-playlist', id, 'games']);
 
       // Optimistically reorder
       if (previousGames) {
@@ -335,10 +327,7 @@ export function useReorderUserPlaylistGames() {
 
     onError: (err: unknown, variables, context) => {
       if (context?.previousGames) {
-        queryClient.setQueryData(
-          ['user-playlist', variables.id, 'games'],
-          context.previousGames
-        );
+        queryClient.setQueryData(['user-playlist', variables.id, 'games'], context.previousGames);
       }
       const message = getErrorMessage(err) || 'Failed to reorder games';
       showToast(message, 'error');
@@ -404,11 +393,7 @@ export function useEnableSharing() {
   const queryClient = useQueryClient();
   const { showToast } = useDialog();
 
-  return useMutation<
-    ShareLinkData,
-    unknown,
-    { id: number; options?: EnableSharingOptions }
-  >({
+  return useMutation<ShareLinkData, unknown, { id: number; options?: EnableSharingOptions }>({
     mutationFn: ({ id, options }) => userPlaylistsApi.enableSharing(id, options),
 
     onSuccess: (_, variables) => {
@@ -483,11 +468,7 @@ export function useCloneSharedPlaylist() {
   const queryClient = useQueryClient();
   const { showToast } = useDialog();
 
-  return useMutation<
-    UserPlaylist,
-    unknown,
-    { shareToken: string; newTitle?: string }
-  >({
+  return useMutation<UserPlaylist, unknown, { shareToken: string; newTitle?: string }>({
     mutationFn: ({ shareToken, newTitle }) =>
       sharedPlaylistsApi.clonePlaylist(shareToken, newTitle),
 
diff --git a/frontend/src/hooks/useUsers.ts b/frontend/src/hooks/useUsers.ts
index 3767497..4936b0d 100644
--- a/frontend/src/hooks/useUsers.ts
+++ b/frontend/src/hooks/useUsers.ts
@@ -12,7 +12,7 @@ export function useUsers(page = 1, limit = 50) {
     queryKey: ['users', page, limit],
     queryFn: () => usersApi.getAll(page, limit),
     staleTime: 2 * 60 * 1000, // 2 minutes
-    gcTime: 5 * 60 * 1000 // 5 minutes
+    gcTime: 5 * 60 * 1000, // 5 minutes
   });
 }
 
@@ -25,7 +25,7 @@ export function useUser(id: number) {
     queryFn: () => usersApi.getById(id),
     enabled: !!id,
     staleTime: 2 * 60 * 1000,
-    gcTime: 5 * 60 * 1000
+    gcTime: 5 * 60 * 1000,
   });
 }
 
@@ -51,7 +51,7 @@ export function useCreateUser() {
     onError: (err: unknown) => {
       const message = getErrorMessage(err) || 'Failed to create user';
       showToast(message, 'error');
-    }
+    },
   });
 }
 
@@ -78,7 +78,7 @@ export function useUpdateUser() {
     onError: (err: unknown) => {
       const message = getErrorMessage(err) || 'Failed to update user';
       showToast(message, 'error');
-    }
+    },
   });
 }
 
@@ -121,7 +121,7 @@ export function useDeleteUser() {
       queryClient.invalidateQueries({ queryKey: ['users'], exact: false });
 
       showToast('User deleted successfully', 'success');
-    }
+    },
   });
 }
 
@@ -141,6 +141,6 @@ export function useChangePassword() {
     onError: (err: unknown) => {
       const message = getErrorMessage(err) || 'Failed to change password';
       showToast(message, 'error');
-    }
+    },
   });
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 01836e1..54071df 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -210,7 +210,7 @@ body {
 
 /* CSS Variables for opacity control */
 :root {
-  --prismatic-opacity-1: 0.10;
+  --prismatic-opacity-1: 0.1;
   --prismatic-opacity-2: 0.08;
   --prismatic-opacity-3: 0.06;
   --prismatic-glow-opacity: 0.15;
@@ -218,9 +218,9 @@ body {
 
 .dark {
   --prismatic-opacity-1: 0.12;
-  --prismatic-opacity-2: 0.10;
+  --prismatic-opacity-2: 0.1;
   --prismatic-opacity-3: 0.08;
-  --prismatic-glow-opacity: 0.20;
+  --prismatic-glow-opacity: 0.2;
 }
 
 /* Keyframe Animations */
@@ -279,7 +279,8 @@ body {
 }
 
 @keyframes prismatic-glow {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.6;
   }
   50% {
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 4e24adf..5127689 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,5 +1,12 @@
 import { apiClient as api } from './api/client';
-import { Game, PaginatedResult, GameFilters, FilterOptions, Playlist, GameLaunchData } from '@/types/game';
+import {
+  Game,
+  PaginatedResult,
+  GameFilters,
+  FilterOptions,
+  Playlist,
+  GameLaunchData,
+} from '@/types/game';
 import {
   LoginCredentials,
   RegisterData,
@@ -24,7 +31,7 @@ import {
   ActivityTrendResponse,
   TopActionsResponse,
   ActivityBreakdownResponse,
-  TimeRange
+  TimeRange,
 } from '@/types/auth';
 import {
   StartSessionResponse,
@@ -33,13 +40,13 @@ import {
   GameStats,
   PlaySession,
   PlayActivityData,
-  GameDistribution
+  GameDistribution,
 } from '@/types/play-tracking';
 import {
   UserPlaylist,
   CreatePlaylistData,
   UpdatePlaylistData,
-  PlaylistStats
+  PlaylistStats,
 } from '@/types/playlist';
 import {
   Favorite,
@@ -50,7 +57,7 @@ import {
   AddFavoriteResponse,
   BatchAddFavoritesResponse,
   BatchRemoveFavoritesResponse,
-  ClearAllFavoritesResponse
+  ClearAllFavoritesResponse,
 } from '@/types/favorite';
 import { SystemSettings, PublicSettings } from '@/types/settings';
 import { JobStatusEnriched, JobLogsResponse } from '@/types/jobs';
@@ -81,14 +88,14 @@ export const gamesApi = {
 
   getRelated: async (id: string, limit = 10): Promise<Game[]> => {
     const { data } = await api.get<Game[]>(`/games/${id}/related`, {
-      params: { limit }
+      params: { limit },
     });
     return data;
   },
 
   getRandom: async (library?: string): Promise<Game> => {
     const { data } = await api.get<Game>('/games/random', {
-      params: { library }
+      params: { library },
     });
     return data;
   },
@@ -98,28 +105,36 @@ export const gamesApi = {
     return data;
   },
 
-  downloadGame: async (id: string, gameDataId?: number): Promise<{ success: boolean; message: string; gameDataId: number; sha256: string }> => {
+  downloadGame: async (
+    id: string,
+    gameDataId?: number
+  ): Promise<{ success: boolean; message: string; gameDataId: number; sha256: string }> => {
     const { data } = await api.post(`/games/${id}/download`, { gameDataId });
     return data;
   },
 
-  cancelDownload: async (id: string): Promise<{ success: boolean; cancelled: boolean; message: string }> => {
+  cancelDownload: async (
+    id: string
+  ): Promise<{ success: boolean; cancelled: boolean; message: string }> => {
     const { data } = await api.delete(`/games/${id}/download`);
     return data;
   },
 
   getMostPlayed: async (limit = 20): Promise<PaginatedResult<Game>> => {
-    const { data } = await api.get<{ success: boolean; data: Game[]; total: number }>('/games/most-played', {
-      params: { limit }
-    });
+    const { data } = await api.get<{ success: boolean; data: Game[]; total: number }>(
+      '/games/most-played',
+      {
+        params: { limit },
+      }
+    );
     return {
       data: data.data,
       total: data.total,
       page: 1,
       limit,
-      totalPages: 1
+      totalPages: 1,
     };
-  }
+  },
 };
 
 export const playlistsApi = {
@@ -129,11 +144,16 @@ export const playlistsApi = {
   },
 
   getById: async (id: string): Promise<Playlist> => {
-    const { data} = await api.get<Playlist>(`/playlists/${id}`);
+    const { data } = await api.get<Playlist>(`/playlists/${id}`);
     return data;
   },
 
-  create: async (playlist: { title: string; description?: string; author?: string; library?: string }): Promise<Playlist> => {
+  create: async (playlist: {
+    title: string;
+    description?: string;
+    author?: string;
+    library?: string;
+  }): Promise<Playlist> => {
     const { data } = await api.post<Playlist>('/playlists', playlist);
     return data;
   },
@@ -144,28 +164,30 @@ export const playlistsApi = {
   },
 
   removeGames: async (playlistId: string, gameIds: string[]): Promise<Playlist> => {
-    const { data } = await api.delete<Playlist>(`/playlists/${playlistId}/games`, { data: { gameIds } });
+    const { data } = await api.delete<Playlist>(`/playlists/${playlistId}/games`, {
+      data: { gameIds },
+    });
     return data;
   },
 
   delete: async (playlistId: string): Promise<{ success: boolean; message: string }> => {
     const { data } = await api.delete(`/playlists/${playlistId}`);
     return data;
-  }
+  },
 };
 
 export const platformsApi = {
   getAll: async (): Promise<Array<{ platform: string; count: number }>> => {
     const { data } = await api.get('/platforms');
     return data;
-  }
+  },
 };
 
 export const tagsApi = {
   getAll: async (): Promise<Array<{ name: string; count: number }>> => {
     const { data } = await api.get('/tags');
     return data;
-  }
+  },
 };
 
 export interface CommunityPlaylistsResponse {
@@ -191,10 +213,10 @@ export const communityPlaylistsApi = {
 
   download: async (downloadUrl: string): Promise<Playlist> => {
     const { data } = await api.post<Playlist>('/community-playlists/download', {
-      downloadUrl
+      downloadUrl,
     });
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -230,7 +252,7 @@ export const authApi = {
   getSetupStatus: async (): Promise<{ needsSetup: boolean; message: string }> => {
     const { data } = await api.get<{ needsSetup: boolean; message: string }>('/auth/setup-status');
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -240,7 +262,7 @@ export const authApi = {
 export const usersApi = {
   getAll: async (page = 1, limit = 50): Promise<UsersResponse> => {
     const { data } = await api.get<UsersResponse>('/users', {
-      params: { page, limit }
+      params: { page, limit },
     });
     return data;
   },
@@ -265,7 +287,10 @@ export const usersApi = {
     return data;
   },
 
-  changePassword: async (id: number, passwordData: ChangePasswordData): Promise<{ success: boolean; message: string }> => {
+  changePassword: async (
+    id: number,
+    passwordData: ChangePasswordData
+  ): Promise<{ success: boolean; message: string }> => {
     const { data } = await api.post(`/users/${id}/change-password`, passwordData);
     return data;
   },
@@ -276,7 +301,10 @@ export const usersApi = {
     return data;
   },
 
-  updateTheme: async (themeColor: string, surfaceColor: string): Promise<{ success: boolean; themeColor: string; surfaceColor: string }> => {
+  updateTheme: async (
+    themeColor: string,
+    surfaceColor: string
+  ): Promise<{ success: boolean; themeColor: string; surfaceColor: string }> => {
     const { data } = await api.patch('/users/me/theme', { themeColor, surfaceColor });
     return data;
   },
@@ -286,14 +314,17 @@ export const usersApi = {
     const settings = await usersApi.getAllSettings();
     return {
       mode: settings.theme_mode || 'dark',
-      primaryColor: settings.primary_color || 'blue'
+      primaryColor: settings.primary_color || 'blue',
     };
   },
 
-  updateThemeSettings: async (mode: string, primaryColor: string): Promise<{ mode: string; primaryColor: string }> => {
+  updateThemeSettings: async (
+    mode: string,
+    primaryColor: string
+  ): Promise<{ mode: string; primaryColor: string }> => {
     await usersApi.updateSettings({
       theme_mode: mode,
-      primary_color: primaryColor
+      primary_color: primaryColor,
     });
     return { mode, primaryColor };
   },
@@ -307,7 +338,7 @@ export const usersApi = {
   updateSettings: async (settings: Record<string, string>): Promise<Record<string, string>> => {
     const { data } = await api.patch('/users/me/settings', settings);
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -348,7 +379,7 @@ export const rolesApi = {
   delete: async (id: number): Promise<{ success: boolean; message: string }> => {
     const { data } = await api.delete(`/roles/${id}`);
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -358,38 +389,45 @@ export const rolesApi = {
 export const activitiesApi = {
   getAll: async (page = 1, limit = 50, filters?: ActivityFilters): Promise<ActivitiesResponse> => {
     const { data } = await api.get<ActivitiesResponse>('/activities', {
-      params: { page, limit, ...filters }
+      params: { page, limit, ...filters },
     });
     return data;
   },
 
-  getStats: async (timeRange: TimeRange = '24h', customRange?: { startDate?: string; endDate?: string }): Promise<ActivityStatsResponse> => {
+  getStats: async (
+    timeRange: TimeRange = '24h',
+    customRange?: { startDate?: string; endDate?: string }
+  ): Promise<ActivityStatsResponse> => {
     const { data } = await api.get<ActivityStatsResponse>('/activities/stats', {
-      params: { timeRange, ...customRange }
+      params: { timeRange, ...customRange },
     });
     return data;
   },
 
   getTrend: async (days = 7): Promise<ActivityTrendResponse> => {
     const { data } = await api.get<ActivityTrendResponse>('/activities/trend', {
-      params: { days }
+      params: { days },
     });
     return data;
   },
 
   getTopActions: async (limit = 10, timeRange: TimeRange = '24h'): Promise<TopActionsResponse> => {
     const { data } = await api.get<TopActionsResponse>('/activities/top-actions', {
-      params: { limit, timeRange }
+      params: { limit, timeRange },
     });
     return data;
   },
 
-  getBreakdown: async (groupBy: 'resource' | 'user' | 'ip', limit = 10, timeRange: TimeRange = '24h'): Promise<ActivityBreakdownResponse> => {
+  getBreakdown: async (
+    groupBy: 'resource' | 'user' | 'ip',
+    limit = 10,
+    timeRange: TimeRange = '24h'
+  ): Promise<ActivityBreakdownResponse> => {
     const { data } = await api.get<ActivityBreakdownResponse>('/activities/breakdown', {
-      params: { groupBy, limit, timeRange }
+      params: { groupBy, limit, timeRange },
     });
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -405,7 +443,7 @@ export const authSettingsApi = {
   update: async (settings: UpdateAuthSettingsData): Promise<AuthSettings> => {
     const { data } = await api.patch<AuthSettings>('/settings/auth', settings);
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -428,7 +466,10 @@ export const systemSettingsApi = {
     return data;
   },
 
-  updateCategory: async (category: string, settings: Record<string, unknown>): Promise<Record<string, unknown>> => {
+  updateCategory: async (
+    category: string,
+    settings: Record<string, unknown>
+  ): Promise<Record<string, unknown>> => {
     const { data } = await api.patch<Record<string, unknown>>(`/settings/${category}`, settings);
     return data;
   },
@@ -438,12 +479,21 @@ export const systemSettingsApi = {
     return data;
   },
 
-  updateSetting: async (category: string, key: string, value: unknown): Promise<{ value: unknown }> => {
+  updateSetting: async (
+    category: string,
+    key: string,
+    value: unknown
+  ): Promise<{ value: unknown }> => {
     const { data } = await api.patch<{ value: unknown }>(`/settings/${category}/${key}`, { value });
     return data;
   },
 
-  getCacheStats: async (): Promise<{ keyCount: number; categoryCount: number; hitRate: number; size: number }> => {
+  getCacheStats: async (): Promise<{
+    keyCount: number;
+    categoryCount: number;
+    hitRate: number;
+    size: number;
+  }> => {
     const { data } = await api.get('/settings/_cache/stats');
     return data;
   },
@@ -451,7 +501,7 @@ export const systemSettingsApi = {
   clearCache: async (category?: string): Promise<{ message: string }> => {
     const { data } = await api.post('/settings/_cache/clear', { category });
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -462,21 +512,21 @@ export const statisticsApi = {
   getStatistics: async () => {
     const { data } = await api.get('/statistics');
     return data;
-  }
+  },
 };
 
 export const playTrackingApi = {
   startSession: async (gameId: string, gameTitle: string): Promise<StartSessionResponse> => {
     const { data } = await api.post<StartSessionResponse>('/play/start', {
       gameId,
-      gameTitle
+      gameTitle,
     });
     return data;
   },
 
   endSession: async (sessionId: string): Promise<EndSessionResponse> => {
     const { data } = await api.post<EndSessionResponse>('/play/end', {
-      sessionId
+      sessionId,
     });
     return data;
   },
@@ -486,40 +536,46 @@ export const playTrackingApi = {
     return data;
   },
 
-  getGameStats: async (limit = 50, offset = 0): Promise<{ data: GameStats[]; limit: number; offset: number }> => {
+  getGameStats: async (
+    limit = 50,
+    offset = 0
+  ): Promise<{ data: GameStats[]; limit: number; offset: number }> => {
     const { data } = await api.get('/play/game-stats', {
-      params: { limit, offset }
+      params: { limit, offset },
     });
     return data;
   },
 
-  getHistory: async (limit = 50, offset = 0): Promise<{ data: PlaySession[]; limit: number; offset: number }> => {
+  getHistory: async (
+    limit = 50,
+    offset = 0
+  ): Promise<{ data: PlaySession[]; limit: number; offset: number }> => {
     const { data } = await api.get('/play/history', {
-      params: { limit, offset }
+      params: { limit, offset },
     });
     return data;
   },
 
   getTopGames: async (limit = 10): Promise<GameStats[]> => {
     const { data } = await api.get<GameStats[]>('/play/top-games', {
-      params: { limit }
+      params: { limit },
     });
     return data;
   },
 
   getActivityOverTime: async (days = 30): Promise<PlayActivityData[]> => {
     const { data } = await api.get<PlayActivityData[]>('/play/activity-over-time', {
-      params: { days }
+      params: { days },
     });
     return data;
   },
 
   getGamesDistribution: async (limit = 10): Promise<GameDistribution[]> => {
     const { data } = await api.get<GameDistribution[]>('/play/games-distribution', {
-      params: { limit }
+      params: { limit },
     });
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -567,7 +623,9 @@ export const userPlaylistsApi = {
   },
 
   removeGames: async (id: number, gameIds: string[]): Promise<PlaylistWithGames> => {
-    const { data } = await api.delete<PlaylistWithGames>(`/user-playlists/${id}/games`, { data: { gameIds } });
+    const { data } = await api.delete<PlaylistWithGames>(`/user-playlists/${id}/games`, {
+      data: { gameIds },
+    });
     return data;
   },
 
@@ -575,13 +633,16 @@ export const userPlaylistsApi = {
     await api.put(`/user-playlists/${id}/games/reorder`, { gameIdOrder });
   },
 
-  copyFlashpointPlaylist: async (flashpointPlaylistId: string, newTitle?: string): Promise<UserPlaylist> => {
+  copyFlashpointPlaylist: async (
+    flashpointPlaylistId: string,
+    newTitle?: string
+  ): Promise<UserPlaylist> => {
     const { data } = await api.post<UserPlaylist>('/user-playlists/copy-flashpoint', {
       flashpointPlaylistId,
-      newTitle
+      newTitle,
     });
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -591,7 +652,7 @@ export const userPlaylistsApi = {
 export const favoritesApi = {
   getAll: async (limit?: number, offset?: number): Promise<Favorite[]> => {
     const { data } = await api.get<Favorite[]>('/favorites', {
-      params: { limit, offset }
+      params: { limit, offset },
     });
     return data;
   },
@@ -601,9 +662,14 @@ export const favoritesApi = {
     return data.gameIds;
   },
 
-  getGames: async (limit?: number, offset?: number, sortBy?: 'title' | 'dateAdded', sortOrder?: 'asc' | 'desc'): Promise<FavoriteGame[]> => {
+  getGames: async (
+    limit?: number,
+    offset?: number,
+    sortBy?: 'title' | 'dateAdded',
+    sortOrder?: 'asc' | 'desc'
+  ): Promise<FavoriteGame[]> => {
     const { data } = await api.get<FavoriteGame[]>('/favorites/games', {
-      params: { limit, offset, sortBy, sortOrder }
+      params: { limit, offset, sortBy, sortOrder },
     });
     return data;
   },
@@ -634,7 +700,7 @@ export const favoritesApi = {
 
   batchRemove: async (gameIds: string[]): Promise<number> => {
     const { data } = await api.delete<BatchRemoveFavoritesResponse>('/favorites/batch', {
-      data: { gameIds }
+      data: { gameIds },
     });
     return data.removed;
   },
@@ -642,7 +708,7 @@ export const favoritesApi = {
   clearAll: async (): Promise<number> => {
     const { data } = await api.delete<ClearAllFavoritesResponse>('/favorites');
     return data.removed;
-  }
+  },
 };
 
 // ===================================
@@ -682,17 +748,17 @@ export const jobsApi = {
 
   getLogs: async (jobId: string, limit = 50, offset = 0): Promise<JobLogsResponse> => {
     const { data } = await api.get<JobLogsResponse>(`/jobs/${jobId}/logs`, {
-      params: { limit, offset }
+      params: { limit, offset },
     });
     return data;
   },
 
   getAllLogs: async (limit = 100, offset = 0): Promise<JobLogsResponse> => {
     const { data } = await api.get<JobLogsResponse>('/jobs/logs/all', {
-      params: { limit, offset }
+      params: { limit, offset },
     });
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -723,7 +789,7 @@ export const ruffleApi = {
   }> => {
     const { data } = await api.post('/ruffle/update');
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -733,7 +799,7 @@ export const githubApi = {
   getStarCount: async (): Promise<{ stars: number }> => {
     const { data } = await api.get<{ success: boolean; data: { stars: number } }>('/github/stars');
     return data.data;
-  }
+  },
 };
 
 // ===================================
@@ -759,7 +825,11 @@ export const updatesApi = {
    * Start metadata sync in background
    * Returns immediately with sync started status
    */
-  startMetadataSync: async (): Promise<{ success: boolean; message: string; status: MetadataSyncStatus }> => {
+  startMetadataSync: async (): Promise<{
+    success: boolean;
+    message: string;
+    status: MetadataSyncStatus;
+  }> => {
     const { data } = await api.post('/updates/metadata/sync');
     return data;
   },
@@ -771,7 +841,7 @@ export const updatesApi = {
   getMetadataSyncStatus: async (): Promise<MetadataSyncStatus> => {
     const { data } = await api.get<MetadataSyncStatus>('/updates/metadata/sync/status');
     return data;
-  }
+  },
 };
 
 // ===================================
@@ -787,7 +857,7 @@ function subscribeTokenRefresh(cb: (token: string) => void) {
 }
 
 function onTokenRefreshed(token: string) {
-  refreshSubscribers.forEach(cb => cb(token));
+  refreshSubscribers.forEach((cb) => cb(token));
   refreshSubscribers = [];
 }
 
diff --git a/frontend/src/lib/api/activities.ts b/frontend/src/lib/api/activities.ts
index 5f0911a..ceab13e 100644
--- a/frontend/src/lib/api/activities.ts
+++ b/frontend/src/lib/api/activities.ts
@@ -18,11 +18,7 @@ export const activitiesApi = {
   /**
    * Get all activities with pagination and filtering
    */
-  getAll: async (
-    page = 1,
-    limit = 50,
-    filters?: ActivityFilters
-  ): Promise<ActivitiesResponse> => {
+  getAll: async (page = 1, limit = 50, filters?: ActivityFilters): Promise<ActivitiesResponse> => {
     const { data } = await apiClient.get<ActivitiesResponse>('/activities', {
       params: { page, limit, ...filters },
     });
@@ -55,10 +51,7 @@ export const activitiesApi = {
   /**
    * Get top actions by frequency
    */
-  getTopActions: async (
-    limit = 10,
-    timeRange: TimeRange = '24h'
-  ): Promise<TopActionsResponse> => {
+  getTopActions: async (limit = 10, timeRange: TimeRange = '24h'): Promise<TopActionsResponse> => {
     const { data } = await apiClient.get<TopActionsResponse>('/activities/top-actions', {
       params: { limit, timeRange },
     });
diff --git a/frontend/src/lib/api/client.ts b/frontend/src/lib/api/client.ts
index 1bc13dd..a71d184 100644
--- a/frontend/src/lib/api/client.ts
+++ b/frontend/src/lib/api/client.ts
@@ -96,7 +96,10 @@ apiClient.interceptors.response.use(
       const errorCode = error.response.data?.code;
 
       // Handle shared access token errors differently
-      if (errorCode === 'SHARED_ACCESS_INVALID' || originalRequest.headers?.Authorization?.startsWith('SharedAccess ')) {
+      if (
+        errorCode === 'SHARED_ACCESS_INVALID' ||
+        originalRequest.headers?.Authorization?.startsWith('SharedAccess ')
+      ) {
         useSharedAccessStore.getState().clearToken();
         const { toast } = await import('sonner');
         toast.error('Your shared access has expired. Return to the playlist to continue browsing.');
diff --git a/frontend/src/lib/api/jobs.ts b/frontend/src/lib/api/jobs.ts
index 738ae8d..def1865 100644
--- a/frontend/src/lib/api/jobs.ts
+++ b/frontend/src/lib/api/jobs.ts
@@ -26,10 +26,7 @@ export const jobsApi = {
   /**
    * Update job configuration
    */
-  update: async (
-    jobId: string,
-    updates: { enabled: boolean }
-  ): Promise<JobStatusEnriched> => {
+  update: async (jobId: string, updates: { enabled: boolean }): Promise<JobStatusEnriched> => {
     const { data } = await apiClient.patch<JobStatusEnriched>(`/jobs/${jobId}`, updates);
     return data;
   },
diff --git a/frontend/src/lib/api/settings.ts b/frontend/src/lib/api/settings.ts
index 2fcbcfb..99af041 100644
--- a/frontend/src/lib/api/settings.ts
+++ b/frontend/src/lib/api/settings.ts
@@ -85,10 +85,9 @@ export const systemSettingsApi = {
     key: string,
     value: unknown
   ): Promise<{ value: unknown }> => {
-    const { data } = await apiClient.patch<{ value: unknown }>(
-      `/settings/${category}/${key}`,
-      { value }
-    );
+    const { data } = await apiClient.patch<{ value: unknown }>(`/settings/${category}/${key}`, {
+      value,
+    });
     return data;
   },
 
diff --git a/frontend/src/lib/api/sharedPlaylists.ts b/frontend/src/lib/api/sharedPlaylists.ts
index 2a4853b..483e738 100644
--- a/frontend/src/lib/api/sharedPlaylists.ts
+++ b/frontend/src/lib/api/sharedPlaylists.ts
@@ -14,9 +14,7 @@ export const sharedPlaylistsApi = {
    * @param shareToken UUID v4 share token
    */
   getByToken: async (shareToken: string): Promise<SharedPlaylist> => {
-    const { data } = await apiClient.get<SharedPlaylist>(
-      `/playlists/shared/${shareToken}`
-    );
+    const { data } = await apiClient.get<SharedPlaylist>(`/playlists/shared/${shareToken}`);
     return data;
   },
 
@@ -25,9 +23,7 @@ export const sharedPlaylistsApi = {
    * @param shareToken UUID v4 share token
    */
   getGames: async (shareToken: string): Promise<Game[]> => {
-    const { data } = await apiClient.get<Game[]>(
-      `/playlists/shared/${shareToken}/games`
-    );
+    const { data } = await apiClient.get<Game[]>(`/playlists/shared/${shareToken}/games`);
     return data;
   },
 
@@ -36,14 +32,10 @@ export const sharedPlaylistsApi = {
    * @param shareToken UUID v4 share token
    * @param newTitle Optional custom title for the cloned playlist
    */
-  clonePlaylist: async (
-    shareToken: string,
-    newTitle?: string
-  ): Promise<UserPlaylist> => {
-    const { data } = await apiClient.post<UserPlaylist>(
-      `/playlists/shared/${shareToken}/clone`,
-      { newTitle }
-    );
+  clonePlaylist: async (shareToken: string, newTitle?: string): Promise<UserPlaylist> => {
+    const { data } = await apiClient.post<UserPlaylist>(`/playlists/shared/${shareToken}/clone`, {
+      newTitle,
+    });
     return data;
   },
 
@@ -70,14 +62,14 @@ export const sharedPlaylistsApi = {
    * @param shareToken UUID v4 share token
    * @returns Access token, expiry time, and playlist ID
    */
-  generateAccessToken: async (shareToken: string): Promise<{
+  generateAccessToken: async (
+    shareToken: string
+  ): Promise<{
     accessToken: string;
     expiresIn: number;
     playlistId: number;
   }> => {
-    const { data } = await apiClient.post(
-      `/playlists/shared/${shareToken}/generate-access-token`
-    );
+    const { data } = await apiClient.post(`/playlists/shared/${shareToken}/generate-access-token`);
     return data;
   },
 };
diff --git a/frontend/src/lib/api/userPlaylists.ts b/frontend/src/lib/api/userPlaylists.ts
index bb8f65b..4065fd7 100644
--- a/frontend/src/lib/api/userPlaylists.ts
+++ b/frontend/src/lib/api/userPlaylists.ts
@@ -50,7 +50,7 @@ export const userPlaylistsApi = {
    * Get games in a playlist
    */
   getGames: async (id: number): Promise<Game[]> => {
-    const { data} = await apiClient.get<Game[]>(`/user-playlists/${id}/games`);
+    const { data } = await apiClient.get<Game[]>(`/user-playlists/${id}/games`);
     return data;
   },
 
@@ -81,10 +81,9 @@ export const userPlaylistsApi = {
    * Add games to a playlist
    */
   addGames: async (id: number, gameIds: string[]): Promise<PlaylistWithGames> => {
-    const { data } = await apiClient.post<PlaylistWithGames>(
-      `/user-playlists/${id}/games`,
-      { gameIds }
-    );
+    const { data } = await apiClient.post<PlaylistWithGames>(`/user-playlists/${id}/games`, {
+      gameIds,
+    });
     return data;
   },
 
@@ -92,10 +91,9 @@ export const userPlaylistsApi = {
    * Remove games from a playlist
    */
   removeGames: async (id: number, gameIds: string[]): Promise<PlaylistWithGames> => {
-    const { data } = await apiClient.delete<PlaylistWithGames>(
-      `/user-playlists/${id}/games`,
-      { data: { gameIds } }
-    );
+    const { data } = await apiClient.delete<PlaylistWithGames>(`/user-playlists/${id}/games`, {
+      data: { gameIds },
+    });
     return data;
   },
 
@@ -123,10 +121,7 @@ export const userPlaylistsApi = {
   /**
    * Enable sharing for a playlist
    */
-  enableSharing: async (
-    id: number,
-    options?: EnableSharingOptions
-  ): Promise<ShareLinkData> => {
+  enableSharing: async (id: number, options?: EnableSharingOptions): Promise<ShareLinkData> => {
     const { data } = await apiClient.post<ShareLinkData>(
       `/user-playlists/${id}/share/enable`,
       options
@@ -148,9 +143,7 @@ export const userPlaylistsApi = {
    * Regenerate share token (invalidates old links)
    */
   regenerateShareToken: async (id: number): Promise<ShareLinkData> => {
-    const { data } = await apiClient.post<ShareLinkData>(
-      `/user-playlists/${id}/share/regenerate`
-    );
+    const { data } = await apiClient.post<ShareLinkData>(`/user-playlists/${id}/share/regenerate`);
     return data;
   },
 
diff --git a/frontend/src/lib/cron-utils.ts b/frontend/src/lib/cron-utils.ts
index e9062e2..a792eb9 100644
--- a/frontend/src/lib/cron-utils.ts
+++ b/frontend/src/lib/cron-utils.ts
@@ -15,19 +15,37 @@ export function cronToReadable(cronExpression: string): string {
   if (cronExpression === '0 0 1 * *') return 'Monthly on the 1st at midnight';
 
   // Every N minutes
-  if (minute.startsWith('*/') && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+  if (
+    minute.startsWith('*/') &&
+    hour === '*' &&
+    dayOfMonth === '*' &&
+    month === '*' &&
+    dayOfWeek === '*'
+  ) {
     const mins = minute.substring(2);
     return `Every ${mins} minute${mins !== '1' ? 's' : ''}`;
   }
 
   // Every N hours
-  if (minute === '0' && hour.startsWith('*/') && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+  if (
+    minute === '0' &&
+    hour.startsWith('*/') &&
+    dayOfMonth === '*' &&
+    month === '*' &&
+    dayOfWeek === '*'
+  ) {
     const hrs = hour.substring(2);
     return `Every ${hrs} hour${hrs !== '1' ? 's' : ''}`;
   }
 
   // At specific time daily
-  if (!minute.includes('*') && !hour.includes('*') && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+  if (
+    !minute.includes('*') &&
+    !hour.includes('*') &&
+    dayOfMonth === '*' &&
+    month === '*' &&
+    dayOfWeek === '*'
+  ) {
     return `Daily at ${hour.padStart(2, '0')}:${minute.padStart(2, '0')}`;
   }
 
@@ -57,14 +75,14 @@ export function isValidCron(cronExpression: string): boolean {
 
     // Handle ranges (N-M)
     if (part.includes('-')) {
-      const [start, end] = part.split('-').map(v => parseInt(v));
+      const [start, end] = part.split('-').map((v) => parseInt(v));
       return !isNaN(start) && !isNaN(end) && start >= min && end <= max && start <= end;
     }
 
     // Handle lists (N,M,O)
     if (part.includes(',')) {
-      const values = part.split(',').map(v => parseInt(v));
-      return values.every(v => !isNaN(v) && v >= min && v <= max);
+      const values = part.split(',').map((v) => parseInt(v));
+      return values.every((v) => !isNaN(v) && v >= min && v <= max);
     }
 
     // Handle single value
diff --git a/frontend/src/lib/date-utils.ts b/frontend/src/lib/date-utils.ts
index dd9c8f9..1a58fbe 100644
--- a/frontend/src/lib/date-utils.ts
+++ b/frontend/src/lib/date-utils.ts
@@ -19,7 +19,7 @@ export function formatDate(dateString?: string | null): string {
     return date.toLocaleDateString('en-US', {
       month: 'short',
       day: 'numeric',
-      year: 'numeric'
+      year: 'numeric',
     });
   } catch (error) {
     return 'Unknown';
@@ -48,7 +48,7 @@ export function formatReleaseDate(dateString?: string | null): string {
       const date = new Date(parseInt(year), parseInt(month) - 1);
       return date.toLocaleDateString('en-US', {
         month: 'short',
-        year: 'numeric'
+        year: 'numeric',
       });
     } catch (error) {
       return dateString;
diff --git a/frontend/src/lib/playlistIcons.ts b/frontend/src/lib/playlistIcons.ts
index 1d73e02..00d3d32 100644
--- a/frontend/src/lib/playlistIcons.ts
+++ b/frontend/src/lib/playlistIcons.ts
@@ -644,7 +644,6 @@ import {
   DoorClosed,
   Blinds,
   Fan,
-
   type LucideIcon,
 } from 'lucide-react';
 
@@ -2089,10 +2088,7 @@ export const ICON_CATEGORIES = {
       'fan',
     ] as const,
   },
-} as const satisfies Record<
-  string,
-  { label: string; icons: readonly PlaylistIconName[] }
->;
+} as const satisfies Record<string, { label: string; icons: readonly PlaylistIconName[] }>;
 
 /**
  * Get icon component by name with fallback
@@ -2105,9 +2101,7 @@ export const ICON_CATEGORIES = {
  * const Icon = getPlaylistIcon('music');
  * const FallbackIcon = getPlaylistIcon(null); // Returns ListVideo
  */
-export function getPlaylistIcon(
-  iconName: PlaylistIconName | null | undefined
-): LucideIcon {
+export function getPlaylistIcon(iconName: PlaylistIconName | null | undefined): LucideIcon {
   if (!iconName || !(iconName in PLAYLIST_ICONS)) {
     return ListVideo; // Default fallback
   }
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index d084cca..9ad0df4 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/frontend/src/lib/validateIcons.ts b/frontend/src/lib/validateIcons.ts
index 1c99245..cc974f5 100644
--- a/frontend/src/lib/validateIcons.ts
+++ b/frontend/src/lib/validateIcons.ts
@@ -49,9 +49,7 @@ export function validateIconsNoDuplicates(): {
   const expectedIconCount = 600;
 
   if (totalIcons !== expectedIconCount) {
-    warnings.push(
-      `Icon count mismatch: Expected ${expectedIconCount}, got ${totalIcons}`
-    );
+    warnings.push(`Icon count mismatch: Expected ${expectedIconCount}, got ${totalIcons}`);
   }
 
   // Check for invalid icons (components that are null or undefined)
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 4038a89..23244f7 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -22,9 +22,9 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: 5 * 60 * 1000, // 5 minutes
-      retry: 1
-    }
-  }
+      retry: 1,
+    },
+  },
 });
 
 // Initialize error reporter
diff --git a/frontend/src/store/auth.ts b/frontend/src/store/auth.ts
index 007aafb..e41c469 100644
--- a/frontend/src/store/auth.ts
+++ b/frontend/src/store/auth.ts
@@ -42,7 +42,7 @@ export const useAuthStore = create<AuthState>()(
           accessToken: tokens.accessToken,
           refreshToken: tokens.refreshToken,
           isAuthenticated: true,
-          isGuest: false
+          isGuest: false,
         });
 
         // Load theme settings from server after successful login (not guest)
@@ -61,14 +61,14 @@ export const useAuthStore = create<AuthState>()(
           username: 'Guest',
           email: 'guest@flashpoint.local',
           role: 'guest',
-          permissions: ['games.read', 'playlists.read', 'games.play']
+          permissions: ['games.read', 'playlists.read', 'games.play'],
         };
         set({
           user: guestUser,
           accessToken: null,
           refreshToken: null,
           isAuthenticated: false,
-          isGuest: true
+          isGuest: true,
         });
       },
 
@@ -78,7 +78,7 @@ export const useAuthStore = create<AuthState>()(
           accessToken: null,
           refreshToken: null,
           isAuthenticated: false,
-          isGuest: false
+          isGuest: false,
         });
       },
 
@@ -109,14 +109,14 @@ export const useAuthStore = create<AuthState>()(
       hasAnyPermission: (permissions: string[]) => {
         const { user } = get();
         if (!user) return false;
-        return permissions.some(permission => user.permissions.includes(permission));
+        return permissions.some((permission) => user.permissions.includes(permission));
       },
 
       hasAllPermissions: (permissions: string[]) => {
         const { user } = get();
         if (!user) return false;
-        return permissions.every(permission => user.permissions.includes(permission));
-      }
+        return permissions.every((permission) => user.permissions.includes(permission));
+      },
     }),
     {
       name: 'flashpoint-auth',
@@ -155,8 +155,8 @@ export const useAuthStore = create<AuthState>()(
         removeItem: (name) => {
           localStorage.removeItem(name);
           sessionStorage.removeItem(name);
-        }
-      }))
+        },
+      })),
     }
   )
 );
diff --git a/frontend/src/store/sharedAccess.ts b/frontend/src/store/sharedAccess.ts
index bf799c4..5cafb56 100644
--- a/frontend/src/store/sharedAccess.ts
+++ b/frontend/src/store/sharedAccess.ts
@@ -64,5 +64,5 @@ export const useSharedAccessStore = create<SharedAccessState>((set, get) => ({
       return token;
     }
     return null;
-  }
+  },
 }));
diff --git a/frontend/src/store/theme.ts b/frontend/src/store/theme.ts
index 18eebd6..1012ffa 100644
--- a/frontend/src/store/theme.ts
+++ b/frontend/src/store/theme.ts
@@ -7,7 +7,7 @@ import { useAuthStore } from './auth';
 export type ThemeMode = 'light' | 'dark' | 'system';
 
 export type PrimaryColor =
-  | 'blue'      // Default
+  | 'blue' // Default
   | 'slate'
   | 'gray'
   | 'zinc'
@@ -74,11 +74,12 @@ const applyTheme = (mode: ThemeMode) => {
   root.classList.remove('light', 'dark');
 
   // Determine actual theme to apply
-  const actualTheme: 'light' | 'dark' = mode === 'system'
-    ? window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light'
-    : mode;
+  const actualTheme: 'light' | 'dark' =
+    mode === 'system'
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+      : mode;
 
   // Apply theme class
   root.classList.add(actualTheme);
@@ -87,11 +88,12 @@ const applyTheme = (mode: ThemeMode) => {
 // Apply primary color to document
 const applyPrimaryColor = (color: PrimaryColor, currentMode: ThemeMode) => {
   const root = document.documentElement;
-  const actualTheme: 'light' | 'dark' = currentMode === 'system'
-    ? window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light'
-    : currentMode;
+  const actualTheme: 'light' | 'dark' =
+    currentMode === 'system'
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+      : currentMode;
 
   const colorValue = colorPalette[color][actualTheme];
 
@@ -100,13 +102,14 @@ const applyPrimaryColor = (color: PrimaryColor, currentMode: ThemeMode) => {
   root.style.setProperty('--ring', colorValue);
 
   // Parse HSL values to create toned-down versions for scrollbar
-  const [hue, saturation, lightness] = colorValue.split(' ').map(v => parseFloat(v));
+  const [hue, saturation, lightness] = colorValue.split(' ').map((v) => parseFloat(v));
 
   // Scrollbar thumb: Use primary color with adjusted lightness for better visibility
   // Light mode: Slightly darker, Dark mode: Slightly lighter
-  const scrollbarLightness = actualTheme === 'light'
-    ? Math.max(lightness - 15, 30)  // Darker in light mode (min 30%)
-    : Math.min(lightness + 10, 70);  // Lighter in dark mode (max 70%)
+  const scrollbarLightness =
+    actualTheme === 'light'
+      ? Math.max(lightness - 15, 30) // Darker in light mode (min 30%)
+      : Math.min(lightness + 10, 70); // Lighter in dark mode (max 70%)
 
   const scrollbarThumb = `${hue} ${saturation}% ${scrollbarLightness}%`;
 
@@ -134,9 +137,11 @@ export const useThemeStore = create<ThemeState>()(
         // Sync to server if authenticated (not guest)
         const authState = useAuthStore.getState();
         if (authState.isAuthenticated && !authState.isGuest) {
-          get().syncThemeToServer().catch((error) => {
-            logger.debug('Theme sync to server failed:', error);
-          });
+          get()
+            .syncThemeToServer()
+            .catch((error) => {
+              logger.debug('Theme sync to server failed:', error);
+            });
         }
       },
 
@@ -147,9 +152,11 @@ export const useThemeStore = create<ThemeState>()(
         // Sync to server if authenticated (not guest)
         const authState = useAuthStore.getState();
         if (authState.isAuthenticated && !authState.isGuest) {
-          get().syncThemeToServer().catch((error) => {
-            logger.debug('Theme sync to server failed:', error);
-          });
+          get()
+            .syncThemeToServer()
+            .catch((error) => {
+              logger.debug('Theme sync to server failed:', error);
+            });
         }
       },
 
@@ -181,13 +188,13 @@ export const useThemeStore = create<ThemeState>()(
           // Silent fail - user might not be authenticated
           logger.debug('Theme sync to server failed:', error);
         }
-      }
+      },
     }),
     {
       name: 'flashpoint-theme-settings',
       partialize: (state) => ({
         mode: state.mode,
-        primaryColor: state.primaryColor
+        primaryColor: state.primaryColor,
       }),
       onRehydrateStorage: () => (state) => {
         // Apply theme after rehydration
@@ -203,7 +210,7 @@ export const useThemeStore = create<ThemeState>()(
             });
           }
         }
-      }
+      },
     }
   )
 );
diff --git a/frontend/src/store/ui.ts b/frontend/src/store/ui.ts
index b5290d5..283e290 100644
--- a/frontend/src/store/ui.ts
+++ b/frontend/src/store/ui.ts
@@ -41,7 +41,7 @@ export const useUIStore = create<UIState>()(
       setViewMode: (mode) => set({ viewMode: mode }),
       setSelectedGame: (id) => set({ selectedGameId: id }),
       setCardSize: (size) => set({ cardSize: size }),
-      setListColumns: (columns) => set({ listColumns: columns })
+      setListColumns: (columns) => set({ listColumns: columns }),
     }),
     {
       name: 'flashpoint-ui-settings',
@@ -50,8 +50,8 @@ export const useUIStore = create<UIState>()(
         sidebarCollapsed: state.sidebarCollapsed,
         cardSize: state.cardSize,
         viewMode: state.viewMode,
-        listColumns: state.listColumns
-      })
+        listColumns: state.listColumns,
+      }),
     }
   )
 );
diff --git a/frontend/src/test/mocks/handlers.ts b/frontend/src/test/mocks/handlers.ts
index 7551932..5e08606 100644
--- a/frontend/src/test/mocks/handlers.ts
+++ b/frontend/src/test/mocks/handlers.ts
@@ -45,7 +45,7 @@ export const mockPlaylist = {
 export const handlers = [
   // Auth endpoints
   http.post(`/api/auth/login`, async ({ request }) => {
-    const body = await request.json() as any;
+    const body = (await request.json()) as any;
 
     if (body.username === 'testuser' && body.password === 'password123') {
       return HttpResponse.json({
@@ -55,10 +55,7 @@ export const handlers = [
       });
     }
 
-    return HttpResponse.json(
-      { error: 'Invalid credentials' },
-      { status: 401 }
-    );
+    return HttpResponse.json({ error: 'Invalid credentials' }, { status: 401 });
   }),
 
   http.post(`/api/auth/logout`, () => {
@@ -111,7 +108,7 @@ export const handlers = [
   }),
 
   http.post(`/api/user-playlists`, async ({ request }) => {
-    const body = await request.json() as any;
+    const body = (await request.json()) as any;
     return HttpResponse.json({
       id: 'new-playlist-id',
       title: body.title,
diff --git a/frontend/src/test/test-utils.tsx b/frontend/src/test/test-utils.tsx
index 44d8fbb..1860372 100644
--- a/frontend/src/test/test-utils.tsx
+++ b/frontend/src/test/test-utils.tsx
@@ -7,10 +7,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  * Custom render function that wraps components with necessary providers
  * Use this instead of @testing-library/react's render for components that need routing, query, or theme context
  */
-export function renderWithProviders(
-  ui: ReactElement,
-  options?: Omit<RenderOptions, 'wrapper'>
-) {
+export function renderWithProviders(ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -27,9 +24,7 @@ export function renderWithProviders(
   function Wrapper({ children }: { children: ReactNode }) {
     return (
       <BrowserRouter>
-        <QueryClientProvider client={queryClient}>
-          {children}
-        </QueryClientProvider>
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
       </BrowserRouter>
     );
   }
@@ -43,10 +38,7 @@ export function renderWithProviders(
 /**
  * Custom render for components that only need routing (no query client)
  */
-export function renderWithRouter(
-  ui: ReactElement,
-  options?: Omit<RenderOptions, 'wrapper'>
-) {
+export function renderWithRouter(ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) {
   function Wrapper({ children }: { children: ReactNode }) {
     return <BrowserRouter>{children}</BrowserRouter>;
   }
@@ -57,10 +49,7 @@ export function renderWithRouter(
 /**
  * Custom render for components that only need query client (no routing)
  */
-export function renderWithQueryClient(
-  ui: ReactElement,
-  options?: Omit<RenderOptions, 'wrapper'>
-) {
+export function renderWithQueryClient(ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -75,11 +64,7 @@ export function renderWithQueryClient(
   });
 
   function Wrapper({ children }: { children: ReactNode }) {
-    return (
-      <QueryClientProvider client={queryClient}>
-        {children}
-      </QueryClientProvider>
-    );
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
   }
 
   return {
diff --git a/frontend/src/types/game.ts b/frontend/src/types/game.ts
index 382fb3e..99f5076 100644
--- a/frontend/src/types/game.ts
+++ b/frontend/src/types/game.ts
@@ -44,17 +44,17 @@ export interface PaginatedResult<T> {
 export interface GameFilters {
   search?: string;
   platform?: string;
-  series?: string;        // Comma-separated series
-  developers?: string;    // Comma-separated developers
-  publishers?: string;    // Comma-separated publishers
-  playModes?: string;     // Comma-separated play modes
-  languages?: string;     // Comma-separated languages
+  series?: string; // Comma-separated series
+  developers?: string; // Comma-separated developers
+  publishers?: string; // Comma-separated publishers
+  playModes?: string; // Comma-separated play modes
+  languages?: string; // Comma-separated languages
   library?: string;
   tags?: string;
   yearFrom?: number;
   yearTo?: number;
-  dateAddedSince?: string;      // ISO 8601 timestamp - filter games added after this date
-  dateModifiedSince?: string;   // ISO 8601 timestamp - filter games modified after this date
+  dateAddedSince?: string; // ISO 8601 timestamp - filter games added after this date
+  dateModifiedSince?: string; // ISO 8601 timestamp - filter games modified after this date
   sortBy?: string;
   sortOrder?: 'asc' | 'desc';
   page?: number;
diff --git a/frontend/src/utils/activityUtils.ts b/frontend/src/utils/activityUtils.ts
index 1b97137..86a9b47 100644
--- a/frontend/src/utils/activityUtils.ts
+++ b/frontend/src/utils/activityUtils.ts
@@ -17,11 +17,7 @@ export function categorizeAction(action: string): ActionCategory {
   ) {
     return 'auth';
   }
-  if (
-    action.includes('schedule') ||
-    action.includes('cleanup') ||
-    action.includes('maintenance')
-  ) {
+  if (action.includes('schedule') || action.includes('cleanup') || action.includes('maintenance')) {
     return 'system';
   }
   return 'crud';
diff --git a/frontend/src/utils/errorUtils.ts b/frontend/src/utils/errorUtils.ts
index fa7a354..4038aec 100644
--- a/frontend/src/utils/errorUtils.ts
+++ b/frontend/src/utils/errorUtils.ts
@@ -17,10 +17,7 @@ interface ApiErrorResponse {
  * @param defaultMessage - Default message if error message cannot be extracted
  * @returns The error message string
  */
-export function getApiErrorMessage(
-  error: unknown,
-  defaultMessage = 'An error occurred'
-): string {
+export function getApiErrorMessage(error: unknown, defaultMessage = 'An error occurred'): string {
   if (error && typeof error === 'object' && 'response' in error) {
     const apiError = error as ApiErrorResponse;
     return apiError.response?.data?.error?.message || defaultMessage;
diff --git a/frontend/src/views/ActivitiesView.tsx b/frontend/src/views/ActivitiesView.tsx
index 07a94c7..bce66d0 100644
--- a/frontend/src/views/ActivitiesView.tsx
+++ b/frontend/src/views/ActivitiesView.tsx
@@ -12,9 +12,7 @@ const ActivityHeader = memo(() => (
       <Activity size={32} className="text-primary" />
       <h1 className="text-3xl font-bold">Activity Logs</h1>
     </div>
-    <p className="text-muted-foreground">
-      View all user activity and system events
-    </p>
+    <p className="text-muted-foreground">View all user activity and system events</p>
   </div>
 ));
 
diff --git a/frontend/src/views/DashboardView.tsx b/frontend/src/views/DashboardView.tsx
index 466ecc4..8832ca0 100644
--- a/frontend/src/views/DashboardView.tsx
+++ b/frontend/src/views/DashboardView.tsx
@@ -9,118 +9,122 @@ export function DashboardView() {
   return (
     <ErrorBoundary>
       <div className="max-w-7xl mx-auto space-y-6">
-      {/* Header */}
-      <div className="flex items-center gap-3">
-        <BarChart3 size={32} className="text-primary" />
-        <h1 className="text-3xl font-bold">Dashboard</h1>
-      </div>
+        {/* Header */}
+        <div className="flex items-center gap-3">
+          <BarChart3 size={32} className="text-primary" />
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+        </div>
 
-      {/* Archive Statistics */}
-      <div className="bg-card rounded-lg p-6 border border-border shadow-md">
-        <h2 className="text-xl font-semibold mb-4">Archive Statistics</h2>
-        {statsLoading ? (
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-            {/* Skeleton loaders - 6 cards */}
-            {[...Array(6)].map((_, index) => (
-              <div key={index} className="bg-muted rounded-lg p-4 animate-pulse">
+        {/* Archive Statistics */}
+        <div className="bg-card rounded-lg p-6 border border-border shadow-md">
+          <h2 className="text-xl font-semibold mb-4">Archive Statistics</h2>
+          {statsLoading ? (
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+              {/* Skeleton loaders - 6 cards */}
+              {[...Array(6)].map((_, index) => (
+                <div key={index} className="bg-muted rounded-lg p-4 animate-pulse">
+                  <div className="flex items-center gap-3 mb-2">
+                    <div className="w-9 h-9 bg-muted/50 rounded-lg"></div>
+                    <div className="flex-1">
+                      <div className="h-7 bg-muted/50 rounded w-20 mb-2"></div>
+                      <div className="h-4 bg-muted/50 rounded w-24"></div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : statistics ? (
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+              {/* Games */}
+              <div className="bg-accent rounded-lg p-4 border border-border">
                 <div className="flex items-center gap-3 mb-2">
-                  <div className="w-9 h-9 bg-muted/50 rounded-lg"></div>
-                  <div className="flex-1">
-                    <div className="h-7 bg-muted/50 rounded w-20 mb-2"></div>
-                    <div className="h-4 bg-muted/50 rounded w-24"></div>
+                  <div className="p-2 bg-primary rounded-lg text-primary-foreground">
+                    <Gamepad2 size={20} />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold">{statistics.totalGames.toLocaleString()}</p>
+                    <p className="text-sm text-muted-foreground">Games</p>
                   </div>
                 </div>
               </div>
-            ))}
-          </div>
-        ) : statistics ? (
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-            {/* Games */}
-            <div className="bg-accent rounded-lg p-4 border border-border">
-              <div className="flex items-center gap-3 mb-2">
-                <div className="p-2 bg-primary rounded-lg text-primary-foreground">
-                  <Gamepad2 size={20} />
-                </div>
-                <div>
-                  <p className="text-2xl font-bold">{statistics.totalGames.toLocaleString()}</p>
-                  <p className="text-sm text-muted-foreground">Games</p>
-                </div>
-              </div>
-            </div>
 
-            {/* Animations */}
-            <div className="bg-accent rounded-lg p-4 border border-border">
-              <div className="flex items-center gap-3 mb-2">
-                <div className="p-2 bg-purple-600 rounded-lg text-white">
-                  <Film size={20} />
-                </div>
-                <div>
-                  <p className="text-2xl font-bold">{statistics.totalAnimations.toLocaleString()}</p>
-                  <p className="text-sm text-muted-foreground">Animations</p>
+              {/* Animations */}
+              <div className="bg-accent rounded-lg p-4 border border-border">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-purple-600 rounded-lg text-white">
+                    <Film size={20} />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold">
+                      {statistics.totalAnimations.toLocaleString()}
+                    </p>
+                    <p className="text-sm text-muted-foreground">Animations</p>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            {/* Platforms */}
-            <div className="bg-accent rounded-lg p-4 border border-border">
-              <div className="flex items-center gap-3 mb-2">
-                <div className="p-2 bg-blue-600 rounded-lg text-white">
-                  <Layers size={20} />
-                </div>
-                <div>
-                  <p className="text-2xl font-bold">{statistics.totalPlatforms}</p>
-                  <p className="text-sm text-muted-foreground">Platforms</p>
+              {/* Platforms */}
+              <div className="bg-accent rounded-lg p-4 border border-border">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-blue-600 rounded-lg text-white">
+                    <Layers size={20} />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold">{statistics.totalPlatforms}</p>
+                    <p className="text-sm text-muted-foreground">Platforms</p>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            {/* Web Playable Games */}
-            <div className="bg-accent rounded-lg p-4 border border-border">
-              <div className="flex items-center gap-3 mb-2">
-                <div className="p-2 bg-green-600 rounded-lg text-white">
-                  <div className="w-5 h-5 rounded-full bg-white"></div>
-                </div>
-                <div>
-                  <p className="text-2xl font-bold">{statistics.webPlayableGames.toLocaleString()}</p>
-                  <p className="text-sm text-muted-foreground">Web Playable Games</p>
+              {/* Web Playable Games */}
+              <div className="bg-accent rounded-lg p-4 border border-border">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-green-600 rounded-lg text-white">
+                    <div className="w-5 h-5 rounded-full bg-white"></div>
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold">
+                      {statistics.webPlayableGames.toLocaleString()}
+                    </p>
+                    <p className="text-sm text-muted-foreground">Web Playable Games</p>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            {/* Flashpoint Playlists */}
-            <div className="bg-accent rounded-lg p-4 border border-border">
-              <div className="flex items-center gap-3 mb-2">
-                <div className="p-2 bg-yellow-600 rounded-lg text-white">
-                  <FolderOpen size={20} />
-                </div>
-                <div>
-                  <p className="text-2xl font-bold">{statistics.totalPlaylists}</p>
-                  <p className="text-sm text-muted-foreground">Flashpoint Playlists</p>
+              {/* Flashpoint Playlists */}
+              <div className="bg-accent rounded-lg p-4 border border-border">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-yellow-600 rounded-lg text-white">
+                    <FolderOpen size={20} />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold">{statistics.totalPlaylists}</p>
+                    <p className="text-sm text-muted-foreground">Flashpoint Playlists</p>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            {/* Tags */}
-            <div className="bg-accent rounded-lg p-4 border border-border">
-              <div className="flex items-center gap-3 mb-2">
-                <div className="p-2 bg-orange-600 rounded-lg text-white">
-                  <Tags size={20} />
-                </div>
-                <div>
-                  <p className="text-2xl font-bold">{statistics.totalTags.toLocaleString()}</p>
-                  <p className="text-sm text-muted-foreground">Tags</p>
+              {/* Tags */}
+              <div className="bg-accent rounded-lg p-4 border border-border">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 bg-orange-600 rounded-lg text-white">
+                    <Tags size={20} />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold">{statistics.totalTags.toLocaleString()}</p>
+                    <p className="text-sm text-muted-foreground">Tags</p>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        ) : (
-          <div className="text-muted-foreground">Failed to load statistics</div>
-        )}
+          ) : (
+            <div className="text-muted-foreground">Failed to load statistics</div>
+          )}
+        </div>
+
+        {/* User Play Statistics */}
+        <UserStatsPanel />
       </div>
-
-      {/* User Play Statistics */}
-      <UserStatsPanel />
-    </div>
     </ErrorBoundary>
   );
 }
diff --git a/frontend/src/views/FavoritesView.tsx b/frontend/src/views/FavoritesView.tsx
index d76ce57..f86ec2e 100644
--- a/frontend/src/views/FavoritesView.tsx
+++ b/frontend/src/views/FavoritesView.tsx
@@ -1,25 +1,29 @@
-import { useMemo, useState } from "react";
-import { GameGrid } from "@/components/library/GameGrid";
-import { GameList } from "@/components/library/GameList";
-import { CardSizeControl } from "@/components/common/CardSizeControl";
-import { useUIStore } from "@/store/ui";
-import { useFavoriteGames } from "@/hooks/useFavorites";
-import { Heart, ArrowDownAZ, Calendar } from "lucide-react";
+import { useMemo, useState } from 'react';
+import { GameGrid } from '@/components/library/GameGrid';
+import { GameList } from '@/components/library/GameList';
+import { CardSizeControl } from '@/components/common/CardSizeControl';
+import { useUIStore } from '@/store/ui';
+import { useFavoriteGames } from '@/hooks/useFavorites';
+import { Heart, ArrowDownAZ, Calendar } from 'lucide-react';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Label } from "@/components/ui/label";
+} from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
 
 export function FavoritesView() {
   const viewMode = useUIStore((state) => state.viewMode);
   const [sortBy, setSortBy] = useState<'title' | 'dateAdded'>('dateAdded');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
 
-  const { data: games = [], isLoading, error } = useFavoriteGames(undefined, undefined, sortBy, sortOrder);
+  const {
+    data: games = [],
+    isLoading,
+    error,
+  } = useFavoriteGames(undefined, undefined, sortBy, sortOrder);
 
   // Handle sort change - combined value like "title-asc" or "dateAdded-desc"
   const handleSortChange = (value: string) => {
@@ -31,10 +35,7 @@ export function FavoritesView() {
   const currentSortValue = `${sortBy}-${sortOrder}`;
 
   // All games in this view are favorites by definition
-  const favoriteGameIds = useMemo(
-    () => new Set(games.map((game) => game.id)),
-    [games],
-  );
+  const favoriteGameIds = useMemo(() => new Set(games.map((game) => game.id)), [games]);
 
   if (isLoading) {
     return (
@@ -64,8 +65,7 @@ export function FavoritesView() {
           <div>
             <h1 className="text-3xl font-bold">Favorites</h1>
             <p className="text-muted-foreground mt-1">
-              {games.length} {games.length === 1 ? "game" : "games"} in your
-              favorites
+              {games.length} {games.length === 1 ? 'game' : 'games'} in your favorites
             </p>
           </div>
         </div>
@@ -125,13 +125,12 @@ export function FavoritesView() {
           </div>
           <h2 className="text-2xl font-semibold mb-2">No Favorites Yet</h2>
           <p className="text-muted-foreground mb-6">
-            Start adding games to your favorites by clicking the heart icon on
-            any game
+            Start adding games to your favorites by clicking the heart icon on any game
           </p>
         </div>
       ) : (
         <>
-          {viewMode === "grid" ? (
+          {viewMode === 'grid' ? (
             <GameGrid
               games={games}
               favoriteGameIds={favoriteGameIds}
diff --git a/frontend/src/views/GameDetailView.tsx b/frontend/src/views/GameDetailView.tsx
index 1cb0cbd..d0f3ac4 100644
--- a/frontend/src/views/GameDetailView.tsx
+++ b/frontend/src/views/GameDetailView.tsx
@@ -51,7 +51,12 @@ export function GameDetailView() {
   // Wait for token generation before fetching game data
   const canFetchGame = !shareToken || isAuthenticated || hasValidToken;
 
-  const { data: game, isLoading: isLoadingGame, error, refetch } = useGame(id!, { enabled: canFetchGame });
+  const {
+    data: game,
+    isLoading: isLoadingGame,
+    error,
+    refetch,
+  } = useGame(id!, { enabled: canFetchGame });
 
   // Fetch shared playlist metadata if accessed via shareToken
   const { data: sharedPlaylist } = useQuery({
@@ -93,7 +98,7 @@ export function GameDetailView() {
   // Find this game's play stats
   const currentGameStats = useMemo(() => {
     if (!gameStatsData?.data || !id) return null;
-    return gameStatsData.data.find(stats => stats.gameId === id);
+    return gameStatsData.data.find((stats) => stats.gameId === id);
   }, [gameStatsData, id]);
 
   // Reset loading states when game changes
@@ -169,200 +174,218 @@ export function GameDetailView() {
   const needsDataDownload = game.presentOnDisk === 0;
 
   // Build breadcrumb items
-  const breadcrumbItems = shareToken && sharedPlaylist
-    ? [
-        { label: sharedPlaylist.title, href: `/playlists/shared/${shareToken}` },
-        { label: game.title, active: true }
-      ]
-    : shareToken
-    ? [{ label: game.title, active: true }]
-    : breadcrumbContext
-    ? [
-        { label: breadcrumbContext.label, href: breadcrumbContext.href },
-        { label: game.title, active: true }
-      ]
-    : [
-        { label: 'Browse', href: '/browse' },
-        { label: game.title, active: true }
-      ];
+  const breadcrumbItems =
+    shareToken && sharedPlaylist
+      ? [
+          { label: sharedPlaylist.title, href: `/playlists/shared/${shareToken}` },
+          { label: game.title, active: true },
+        ]
+      : shareToken
+        ? [{ label: game.title, active: true }]
+        : breadcrumbContext
+          ? [
+              { label: breadcrumbContext.label, href: breadcrumbContext.href },
+              { label: game.title, active: true },
+            ]
+          : [
+              { label: 'Browse', href: '/browse' },
+              { label: game.title, active: true },
+            ];
 
   return (
     <ErrorBoundary>
       <div className="max-w-6xl mx-auto space-y-6">
-      {/* Breadcrumbs Navigation */}
-      <Breadcrumbs
-        items={breadcrumbItems}
-        homeLabel={shareToken ? "Shared" : "Home"}
-        homeHref={shareToken ? "#" : "/"}
-      />
+        {/* Breadcrumbs Navigation */}
+        <Breadcrumbs
+          items={breadcrumbItems}
+          homeLabel={shareToken ? 'Shared' : 'Home'}
+          homeHref={shareToken ? '#' : '/'}
+        />
 
-      <button
-        onClick={() => navigate(-1)}
-        className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
-        aria-label="Go back to previous page"
-      >
-        <ArrowLeft size={20} />
-        Back
-      </button>
+        <button
+          onClick={() => navigate(-1)}
+          className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
+          aria-label="Go back to previous page"
+        >
+          <ArrowLeft size={20} />
+          Back
+        </button>
 
-      <div className="bg-card rounded-lg p-6 space-y-6 border border-border shadow-md">
-        {/* Logo and Title Section - At the top */}
-        <div className="flex items-start justify-between gap-4">
-          <div className="flex items-start gap-4 flex-1">
-            {/* Game Logo */}
-            {logoUrl && !logoError ? (
-              <div className="flex-shrink-0 w-20 h-20 bg-muted rounded-lg overflow-hidden flex items-center justify-center p-2 relative">
-                {logoLoading ? (
-                  <div className="absolute inset-0 flex items-center justify-center bg-muted/50 backdrop-blur-sm">
-                    <Loader2 size={20} className="text-muted-foreground animate-spin" />
+        <div className="bg-card rounded-lg p-6 space-y-6 border border-border shadow-md">
+          {/* Logo and Title Section - At the top */}
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex items-start gap-4 flex-1">
+              {/* Game Logo */}
+              {logoUrl && !logoError ? (
+                <div className="flex-shrink-0 w-20 h-20 bg-muted rounded-lg overflow-hidden flex items-center justify-center p-2 relative">
+                  {logoLoading ? (
+                    <div className="absolute inset-0 flex items-center justify-center bg-muted/50 backdrop-blur-sm">
+                      <Loader2 size={20} className="text-muted-foreground animate-spin" />
+                    </div>
+                  ) : null}
+                  <img
+                    src={logoUrl}
+                    alt={`${game.title} logo`}
+                    width="80"
+                    height="80"
+                    className="w-full h-full object-contain relative z-10"
+                    onLoad={() => setLogoLoading(false)}
+                    onError={() => {
+                      setLogoError(true);
+                      setLogoLoading(false);
+                    }}
+                  />
+                </div>
+              ) : null}
+
+              <div className="flex-1 min-w-0">
+                <h1 className="text-xl sm:text-2xl md:text-3xl font-bold mb-2 break-words">
+                  {game.title}
+                </h1>
+                {game.alternateTitles ? (
+                  <p className="text-muted-foreground text-sm break-words">
+                    Also known as: {game.alternateTitles}
+                  </p>
+                ) : null}
+
+                {/* Play Statistics - Under title */}
+                {currentGameStats?.lastPlayedAt || currentGameStats?.totalPlaytimeSeconds ? (
+                  <div className="flex items-center gap-4 mt-2 text-sm text-muted-foreground">
+                    {currentGameStats?.lastPlayedAt ? (
+                      <div className="flex items-center gap-1.5">
+                        <Clock size={14} />
+                        <span>Last played {formatRelativeTime(currentGameStats.lastPlayedAt)}</span>
+                      </div>
+                    ) : null}
+                    {currentGameStats?.totalPlaytimeSeconds ? (
+                      <div className="flex items-center gap-1.5">
+                        <span>•</span>
+                        <span>{formatDuration(currentGameStats.totalPlaytimeSeconds)} played</span>
+                      </div>
+                    ) : null}
                   </div>
                 ) : null}
+              </div>
+            </div>
+
+            {/* Play Button Logic */}
+            <div className="text-center space-y-2 flex-shrink-0">
+              {game.platformName === 'Flash' || game.platformName === 'HTML5' ? (
+                <>
+                  {isDownloading ? (
+                    <button
+                      disabled
+                      className="inline-flex items-center justify-center p-4 sm:p-5 md:p-6 bg-primary text-white rounded-xl shadow-lg cursor-wait opacity-75 transition-all w-full sm:w-auto"
+                      title="Preparing game..."
+                    >
+                      <Loader2 size={28} className="sm:w-8 sm:h-8 animate-spin" />
+                    </button>
+                  ) : needsDataDownload ? (
+                    <button
+                      onClick={handleStartDownload}
+                      className="group inline-flex items-center justify-center p-4 sm:p-5 md:p-6 bg-primary hover:bg-primary/90 text-white rounded-xl shadow-lg hover:shadow-xl hover:shadow-primary/20 transition-all hover:scale-105 active:scale-95 ring-2 ring-primary/20 hover:ring-primary/40 w-full sm:w-auto"
+                      title="Play Game"
+                    >
+                      <Play
+                        size={28}
+                        className="sm:w-8 sm:h-8 transition-transform group-hover:scale-110"
+                        fill="currentColor"
+                      />
+                    </button>
+                  ) : (
+                    <Link
+                      to={buildSharedGameUrl(`/games/${game.id}/play`, shareToken)}
+                      className="group inline-flex items-center justify-center p-4 sm:p-5 md:p-6 bg-primary hover:bg-primary/90 text-white rounded-xl shadow-lg hover:shadow-xl hover:shadow-primary/20 transition-all hover:scale-105 active:scale-95 ring-2 ring-primary/20 hover:ring-primary/40 w-full sm:w-auto"
+                      title="Play Game"
+                    >
+                      <Play
+                        size={28}
+                        className="sm:w-8 sm:h-8 transition-transform group-hover:scale-110"
+                        fill="currentColor"
+                      />
+                    </Link>
+                  )}
+
+                  {/* Error Display */}
+                  {downloadError ? (
+                    <p className="text-sm text-red-500 font-medium">{downloadError}</p>
+                  ) : null}
+                </>
+              ) : (
+                <Badge
+                  variant="secondary"
+                  className="px-4 py-2 text-sm sm:text-base font-medium flex items-center gap-2"
+                >
+                  <Play size={16} className="sm:w-5 sm:h-5" />
+                  Play on Flashpoint Launcher
+                </Badge>
+              )}
+            </div>
+          </div>
+
+          {/* Game Screenshot */}
+          {screenshotUrl ? (
+            <div className="aspect-video bg-muted rounded-lg overflow-hidden flex items-center justify-center relative">
+              {imageLoading && !imageError ? (
+                <div className="absolute inset-0 flex items-center justify-center bg-muted/50 backdrop-blur-sm">
+                  <div className="flex flex-col items-center gap-3">
+                    <Loader2 size={48} className="text-muted-foreground animate-spin" />
+                    <span className="text-sm text-muted-foreground">Loading screenshot...</span>
+                  </div>
+                </div>
+              ) : null}
+              {!imageError ? (
                 <img
-                  src={logoUrl}
-                  alt={`${game.title} logo`}
-                  width="80"
-                  height="80"
+                  src={screenshotUrl}
+                  alt={`${game.title} screenshot`}
+                  width="1280"
+                  height="720"
                   className="w-full h-full object-contain relative z-10"
-                  onLoad={() => setLogoLoading(false)}
+                  onLoad={() => setImageLoading(false)}
                   onError={() => {
-                    setLogoError(true);
-                    setLogoLoading(false);
+                    setImageError(true);
+                    setImageLoading(false);
                   }}
                 />
-              </div>
-            ) : null}
-
-            <div className="flex-1 min-w-0">
-              <h1 className="text-xl sm:text-2xl md:text-3xl font-bold mb-2 break-words">{game.title}</h1>
-              {game.alternateTitles ? (
-                <p className="text-muted-foreground text-sm break-words">Also known as: {game.alternateTitles}</p>
-              ) : null}
-
-              {/* Play Statistics - Under title */}
-              {(currentGameStats?.lastPlayedAt || currentGameStats?.totalPlaytimeSeconds) ? (
-                <div className="flex items-center gap-4 mt-2 text-sm text-muted-foreground">
-                  {currentGameStats?.lastPlayedAt ? (
-                    <div className="flex items-center gap-1.5">
-                      <Clock size={14} />
-                      <span>Last played {formatRelativeTime(currentGameStats.lastPlayedAt)}</span>
-                    </div>
-                  ) : null}
-                  {currentGameStats?.totalPlaytimeSeconds ? (
-                    <div className="flex items-center gap-1.5">
-                      <span>•</span>
-                      <span>{formatDuration(currentGameStats.totalPlaytimeSeconds)} played</span>
-                    </div>
-                  ) : null}
+              ) : (
+                <div className="flex flex-col items-center text-muted-foreground">
+                  <ImageIcon size={64} className="mb-2 opacity-50" />
+                  <span className="text-sm">Screenshot not available</span>
                 </div>
-              ) : null}
+              )}
             </div>
-          </div>
+          ) : null}
 
-          {/* Play Button Logic */}
-          <div className="text-center space-y-2 flex-shrink-0">
-            {(game.platformName === 'Flash' || game.platformName === 'HTML5') ? (
-              <>
-                {isDownloading ? (
-                  <button
-                    disabled
-                    className="inline-flex items-center justify-center p-4 sm:p-5 md:p-6 bg-primary text-white rounded-xl shadow-lg cursor-wait opacity-75 transition-all w-full sm:w-auto"
-                    title="Preparing game..."
-                  >
-                    <Loader2 size={28} className="sm:w-8 sm:h-8 animate-spin" />
-                  </button>
-                ) : needsDataDownload ? (
-                  <button
-                    onClick={handleStartDownload}
-                    className="group inline-flex items-center justify-center p-4 sm:p-5 md:p-6 bg-primary hover:bg-primary/90 text-white rounded-xl shadow-lg hover:shadow-xl hover:shadow-primary/20 transition-all hover:scale-105 active:scale-95 ring-2 ring-primary/20 hover:ring-primary/40 w-full sm:w-auto"
-                    title="Play Game"
-                  >
-                    <Play size={28} className="sm:w-8 sm:h-8 transition-transform group-hover:scale-110" fill="currentColor" />
-                  </button>
-                ) : (
-                  <Link
-                    to={buildSharedGameUrl(`/games/${game.id}/play`, shareToken)}
-                    className="group inline-flex items-center justify-center p-4 sm:p-5 md:p-6 bg-primary hover:bg-primary/90 text-white rounded-xl shadow-lg hover:shadow-xl hover:shadow-primary/20 transition-all hover:scale-105 active:scale-95 ring-2 ring-primary/20 hover:ring-primary/40 w-full sm:w-auto"
-                    title="Play Game"
-                  >
-                    <Play size={28} className="sm:w-8 sm:h-8 transition-transform group-hover:scale-110" fill="currentColor" />
-                  </Link>
-                )}
+          <GameInfoGrid game={game} />
 
-                {/* Error Display */}
-                {downloadError ? (
-                  <p className="text-sm text-red-500 font-medium">{downloadError}</p>
-                ) : null}
-              </>
-            ) : (
-              <Badge variant="secondary" className="px-4 py-2 text-sm sm:text-base font-medium flex items-center gap-2">
-                <Play size={16} className="sm:w-5 sm:h-5" />
-                Play on Flashpoint Launcher
-              </Badge>
-            )}
-          </div>
+          {game.originalDescription ? (
+            <div>
+              <h2 className="text-lg font-semibold mb-2">Description</h2>
+              <p className="leading-relaxed">{game.originalDescription}</p>
+            </div>
+          ) : null}
+
+          {game.tagsStr ? (
+            <div>
+              <h2 className="text-lg font-semibold mb-2">Tags</h2>
+              <div className="flex flex-wrap gap-2">
+                {game.tagsStr.split(';').map((tag, i) => (
+                  <Badge key={i} variant="tag">
+                    {tag.trim()}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          {game.notes ? (
+            <div className="bg-muted/50 rounded p-4">
+              <h3 className="text-sm font-semibold text-muted-foreground mb-1">Notes</h3>
+              <p className="text-sm">{game.notes}</p>
+            </div>
+          ) : null}
         </div>
-
-        {/* Game Screenshot */}
-        {screenshotUrl ? (
-          <div className="aspect-video bg-muted rounded-lg overflow-hidden flex items-center justify-center relative">
-            {imageLoading && !imageError ? (
-              <div className="absolute inset-0 flex items-center justify-center bg-muted/50 backdrop-blur-sm">
-                <div className="flex flex-col items-center gap-3">
-                  <Loader2 size={48} className="text-muted-foreground animate-spin" />
-                  <span className="text-sm text-muted-foreground">Loading screenshot...</span>
-                </div>
-              </div>
-            ) : null}
-            {!imageError ? (
-              <img
-                src={screenshotUrl}
-                alt={`${game.title} screenshot`}
-                width="1280"
-                height="720"
-                className="w-full h-full object-contain relative z-10"
-                onLoad={() => setImageLoading(false)}
-                onError={() => {
-                  setImageError(true);
-                  setImageLoading(false);
-                }}
-              />
-            ) : (
-              <div className="flex flex-col items-center text-muted-foreground">
-                <ImageIcon size={64} className="mb-2 opacity-50" />
-                <span className="text-sm">Screenshot not available</span>
-              </div>
-            )}
-          </div>
-        ) : null}
-
-        <GameInfoGrid game={game} />
-
-        {game.originalDescription ? (
-          <div>
-            <h2 className="text-lg font-semibold mb-2">Description</h2>
-            <p className="leading-relaxed">{game.originalDescription}</p>
-          </div>
-        ) : null}
-
-        {game.tagsStr ? (
-          <div>
-            <h2 className="text-lg font-semibold mb-2">Tags</h2>
-            <div className="flex flex-wrap gap-2">
-              {game.tagsStr.split(';').map((tag, i) => (
-                <Badge key={i} variant="tag">{tag.trim()}</Badge>
-              ))}
-            </div>
-          </div>
-        ) : null}
-
-        {game.notes ? (
-          <div className="bg-muted/50 rounded p-4">
-            <h3 className="text-sm font-semibold text-muted-foreground mb-1">Notes</h3>
-            <p className="text-sm">{game.notes}</p>
-          </div>
-        ) : null}
       </div>
-    </div>
     </ErrorBoundary>
   );
 }
diff --git a/frontend/src/views/GamePlayerView.tsx b/frontend/src/views/GamePlayerView.tsx
index b2d8ba2..cafcb40 100644
--- a/frontend/src/views/GamePlayerView.tsx
+++ b/frontend/src/views/GamePlayerView.tsx
@@ -19,10 +19,7 @@ export function GamePlayerView() {
   const { data: launchData, isLoading: launchLoading, error: launchError } = useGameLaunchData(id!);
 
   // Track play session for authenticated users
-  usePlaySession(
-    game?.id || null,
-    game?.title || null
-  );
+  usePlaySession(game?.id || null, game?.title || null);
 
   // Auto-enter fullscreen for HTML5 games
   useEffect(() => {
@@ -38,19 +35,22 @@ export function GamePlayerView() {
   }, [id]);
 
   // Memoize player props to prevent unnecessary re-renders
-  const playerProps = useMemo(() => ({
-    title: game?.title || '',
-    platform: launchData?.platform || '',
-    contentUrl: launchData?.contentUrl,
-    launchCommand: launchData?.launchCommand,
-    canPlayInBrowser: launchData?.canPlayInBrowser || false,
-  }), [
-    game?.title,
-    launchData?.platform,
-    launchData?.contentUrl,
-    launchData?.launchCommand,
-    launchData?.canPlayInBrowser,
-  ]);
+  const playerProps = useMemo(
+    () => ({
+      title: game?.title || '',
+      platform: launchData?.platform || '',
+      contentUrl: launchData?.contentUrl,
+      launchCommand: launchData?.launchCommand,
+      canPlayInBrowser: launchData?.canPlayInBrowser || false,
+    }),
+    [
+      game?.title,
+      launchData?.platform,
+      launchData?.contentUrl,
+      launchData?.launchCommand,
+      launchData?.canPlayInBrowser,
+    ]
+  );
 
   if (gameLoading || launchLoading) {
     return (
@@ -99,7 +99,13 @@ export function GamePlayerView() {
       ) : null}
 
       {/* Game Player Card - adjusts styling based on fullscreen */}
-      <div className={isFullscreen ? 'w-full h-full' : 'bg-card rounded-lg overflow-hidden shadow-xl border border-border'}>
+      <div
+        className={
+          isFullscreen
+            ? 'w-full h-full'
+            : 'bg-card rounded-lg overflow-hidden shadow-xl border border-border'
+        }
+      >
         {/* Game Header - only shown in normal mode */}
         {!isFullscreen ? (
           <div className="px-6 py-4 border-b border-border">
@@ -169,7 +175,9 @@ export function GamePlayerView() {
                 <h2 className="text-lg font-semibold mb-2">Tags</h2>
                 <div className="flex flex-wrap gap-2">
                   {game.tagsStr.split(';').map((tag, i) => (
-                    <Badge key={i} variant="tag">{tag.trim()}</Badge>
+                    <Badge key={i} variant="tag">
+                      {tag.trim()}
+                    </Badge>
                   ))}
                 </div>
               </div>
diff --git a/frontend/src/views/HTML5GamesView.tsx b/frontend/src/views/HTML5GamesView.tsx
index 2dfd3d4..84ccc4e 100644
--- a/frontend/src/views/HTML5GamesView.tsx
+++ b/frontend/src/views/HTML5GamesView.tsx
@@ -5,11 +5,5 @@ import { GameBrowseLayout } from '@/components/library/GameBrowseLayout';
  * Uses the reusable GameBrowseLayout with HTML5 platform filter
  */
 export function HTML5GamesView() {
-  return (
-    <GameBrowseLayout
-      title="HTML5 Games"
-      library="arcade"
-      platform="HTML5"
-    />
-  );
+  return <GameBrowseLayout title="HTML5 Games" library="arcade" platform="HTML5" />;
 }
diff --git a/frontend/src/views/JobsView.tsx b/frontend/src/views/JobsView.tsx
index f019c14..bee73ea 100644
--- a/frontend/src/views/JobsView.tsx
+++ b/frontend/src/views/JobsView.tsx
@@ -5,7 +5,13 @@ import { Clock } from 'lucide-react';
 import { JobCard } from '@/components/jobs/JobCard';
 import { JobExecutionLogTable } from '@/components/jobs/JobExecutionLogTable';
 import { JobEditDialog } from '@/components/jobs/JobEditDialog';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+} from '@/components/ui/dialog';
 import { useDialog } from '@/contexts/DialogContext';
 import { Skeleton } from '@/components/ui/skeleton';
 import { getErrorMessage } from '@/types/api-error';
@@ -18,18 +24,22 @@ export function JobsView() {
   const queryClient = useQueryClient();
 
   // Fetch jobs with auto-refresh every 5 seconds
-  const { data: jobs = [], isLoading, error } = useQuery({
+  const {
+    data: jobs = [],
+    isLoading,
+    error,
+  } = useQuery({
     queryKey: ['jobs'],
     queryFn: () => jobsApi.getAll(),
     refetchInterval: 5000, // Real-time updates
-    refetchIntervalInBackground: true
+    refetchIntervalInBackground: true,
   });
 
   // Fetch logs for selected job
   const { data: logsData, isLoading: logsLoading } = useQuery({
     queryKey: ['jobLogs', selectedJobId],
     queryFn: () => jobsApi.getLogs(selectedJobId!, 50, 0),
-    enabled: !!selectedJobId && showLogsDialog
+    enabled: !!selectedJobId && showLogsDialog,
   });
 
   // Stop mutation
@@ -41,7 +51,7 @@ export function JobsView() {
     },
     onError: (error: unknown) => {
       showToast(getErrorMessage(error) || 'Failed to stop job', 'error');
-    }
+    },
   });
 
   // Trigger mutation
@@ -53,7 +63,7 @@ export function JobsView() {
     },
     onError: (error: unknown) => {
       showToast(getErrorMessage(error) || 'Failed to trigger job', 'error');
-    }
+    },
   });
 
   // Update mutation (for enabling/disabling jobs)
@@ -67,7 +77,7 @@ export function JobsView() {
     },
     onError: (error: unknown) => {
       showToast(getErrorMessage(error) || 'Failed to update job', 'error');
-    }
+    },
   });
 
   const handleStop = (jobId: string) => {
@@ -92,7 +102,8 @@ export function JobsView() {
     updateMutation.mutate({ jobId, enabled });
   };
 
-  const isAnyMutating = stopMutation.isPending || triggerMutation.isPending || updateMutation.isPending;
+  const isAnyMutating =
+    stopMutation.isPending || triggerMutation.isPending || updateMutation.isPending;
 
   return (
     <div className="max-w-7xl mx-auto space-y-6">
@@ -149,20 +160,19 @@ export function JobsView() {
       <Dialog open={showLogsDialog} onOpenChange={setShowLogsDialog}>
         <DialogContent className="max-w-5xl">
           <DialogHeader>
-            <DialogTitle>Execution Logs - {jobs.find(j => j.id === selectedJobId)?.name}</DialogTitle>
+            <DialogTitle>
+              Execution Logs - {jobs.find((j) => j.id === selectedJobId)?.name}
+            </DialogTitle>
           </DialogHeader>
           <DialogBody>
-            <JobExecutionLogTable
-              logs={logsData?.data || []}
-              loading={logsLoading}
-            />
+            <JobExecutionLogTable logs={logsData?.data || []} loading={logsLoading} />
           </DialogBody>
         </DialogContent>
       </Dialog>
 
       {/* Edit Dialog */}
       <JobEditDialog
-        job={jobs.find(j => j.id === selectedJobId) || null}
+        job={jobs.find((j) => j.id === selectedJobId) || null}
         open={showEditDialog}
         onOpenChange={setShowEditDialog}
       />
diff --git a/frontend/src/views/MaintenancePage.tsx b/frontend/src/views/MaintenancePage.tsx
index 1fe4873..cdd5cf8 100644
--- a/frontend/src/views/MaintenancePage.tsx
+++ b/frontend/src/views/MaintenancePage.tsx
@@ -58,9 +58,7 @@ export function MaintenancePage() {
 
         {/* Title */}
         <div className="space-y-2">
-          <h1 className="text-3xl font-bold tracking-tight">
-            Under Maintenance
-          </h1>
+          <h1 className="text-3xl font-bold tracking-tight">Under Maintenance</h1>
           <p className="text-muted-foreground text-lg">
             We're currently performing system maintenance to improve your experience.
           </p>
@@ -69,12 +67,10 @@ export function MaintenancePage() {
         {/* Message */}
         <div className="bg-muted/50 rounded-lg p-6 space-y-3">
           <p className="text-sm text-muted-foreground">
-            The application is temporarily unavailable while we make important updates.
-            We apologize for any inconvenience.
-          </p>
-          <p className="text-sm font-medium">
-            Please check back shortly.
+            The application is temporarily unavailable while we make important updates. We apologize
+            for any inconvenience.
           </p>
+          <p className="text-sm font-medium">Please check back shortly.</p>
         </div>
 
         {/* User info */}
@@ -86,29 +82,18 @@ export function MaintenancePage() {
 
         {/* Actions */}
         <div className="space-y-3">
-          <Button
-            variant="outline"
-            className="w-full"
-            onClick={() => window.location.reload()}
-          >
+          <Button variant="outline" className="w-full" onClick={() => window.location.reload()}>
             Refresh Page
           </Button>
 
           {!user ? (
-            <Button
-              className="w-full"
-              onClick={() => navigate('/login')}
-            >
+            <Button className="w-full" onClick={() => navigate('/login')}>
               Login
             </Button>
           ) : null}
 
           {user ? (
-            <Button
-              variant="ghost"
-              className="w-full"
-              onClick={handleLogout}
-            >
+            <Button variant="ghost" className="w-full" onClick={handleLogout}>
               Logout
             </Button>
           ) : null}
diff --git a/frontend/src/views/PlaylistDetailView.tsx b/frontend/src/views/PlaylistDetailView.tsx
index 47242ca..d811000 100644
--- a/frontend/src/views/PlaylistDetailView.tsx
+++ b/frontend/src/views/PlaylistDetailView.tsx
@@ -32,7 +32,10 @@ export function PlaylistDetailView() {
     return (
       <div className="text-center py-12">
         <p className="text-red-400">Error loading playlist</p>
-        <Link to="/flashpoint-playlists" className="text-primary-500 hover:underline mt-4 inline-block">
+        <Link
+          to="/flashpoint-playlists"
+          className="text-primary-500 hover:underline mt-4 inline-block"
+        >
           Back to playlists
         </Link>
       </div>
@@ -74,9 +77,7 @@ export function PlaylistDetailView() {
           />
         </>
       ) : (
-        <div className="text-center py-12 text-gray-400">
-          No games in this playlist
-        </div>
+        <div className="text-center py-12 text-gray-400">No games in this playlist</div>
       )}
     </div>
   );
diff --git a/frontend/src/views/PlaylistsView.tsx b/frontend/src/views/PlaylistsView.tsx
index 8890d2f..94358ac 100644
--- a/frontend/src/views/PlaylistsView.tsx
+++ b/frontend/src/views/PlaylistsView.tsx
@@ -34,7 +34,7 @@ export function PlaylistsView() {
   // Filter out the Favorites playlist
   const playlists = useMemo(() => {
     if (!allPlaylists) return [];
-    return allPlaylists.filter(playlist => playlist.id !== FAVORITES_PLAYLIST_ID);
+    return allPlaylists.filter((playlist) => playlist.id !== FAVORITES_PLAYLIST_ID);
   }, [allPlaylists]);
 
   const handleDeleteClick = (e: React.MouseEvent, playlist: Playlist) => {
@@ -65,123 +65,120 @@ export function PlaylistsView() {
   }
 
   if (error) {
-    return (
-      <div className="text-center py-12 text-red-400">
-        Error loading playlists
-      </div>
-    );
+    return <div className="text-center py-12 text-red-400">Error loading playlists</div>;
   }
 
   return (
     <ErrorBoundary>
       <div className="max-w-7xl mx-auto space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-3xl font-bold">Flashpoint Playlists</h1>
-        <Button
-          onClick={() => setIsBrowseModalOpen(true)}
-          variant="secondary"
-          className="gap-2"
-        >
-          <Globe size={20} />
-          Browse Community Playlists
-        </Button>
-      </div>
-
-      {playlists.length === 0 ? (
-        <div className="text-center py-16">
-          <div className="inline-flex items-center justify-center w-24 h-24 bg-muted rounded-full mb-4">
-            <List size={48} className="text-muted-foreground" />
-          </div>
-          <h2 className="text-2xl font-semibold mb-2">No Flashpoint Playlists</h2>
-          <p className="text-muted-foreground mb-6">
-            No official Flashpoint playlists found. Check your Flashpoint installation or browse community playlists.
-          </p>
-          <Button
-            onClick={() => setIsBrowseModalOpen(true)}
-            variant="secondary"
-            className="gap-2 mx-auto"
-          >
+        <div className="flex items-center justify-between">
+          <h1 className="text-3xl font-bold">Flashpoint Playlists</h1>
+          <Button onClick={() => setIsBrowseModalOpen(true)} variant="secondary" className="gap-2">
             <Globe size={20} />
             Browse Community Playlists
           </Button>
         </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {playlists.map((playlist) => (
-            <Card key={playlist.id} className="p-4 hover:ring-2 hover:ring-primary/40 hover:shadow-lg transition-all group">
-              <div className="flex items-start gap-3">
-                <Link to={`/flashpoint-playlists/${playlist.id}`} className="flex-shrink-0">
-                  <div className="bg-accent p-2 rounded">
-                    <List size={24} />
-                  </div>
-                </Link>
-                <Link to={`/flashpoint-playlists/${playlist.id}`} className="flex-1 min-w-0">
-                  <h3 className="font-semibold mb-1">{playlist.title}</h3>
-                  {playlist.description ? (
-                    <p className="text-sm text-muted-foreground line-clamp-2">
-                      {playlist.description}
-                    </p>
-                  ) : null}
-                  {playlist.gameIds ? (
-                    <p className="text-xs text-muted-foreground mt-2">
-                      {playlist.gameIds.length} games
-                    </p>
-                  ) : null}
-                </Link>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                      aria-label="More options"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <MoreVertical size={16} />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      onClick={(e) => handleDeleteClick(e, playlist)}
-                      className="text-destructive focus:text-destructive"
-                    >
-                      <Trash2 size={16} className="mr-2" />
-                      Delete
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            </Card>
-          ))}
-        </div>
-      )}
 
-      <BrowseCommunityPlaylistsModal
-        isOpen={isBrowseModalOpen}
-        onClose={() => setIsBrowseModalOpen(false)}
-      />
-
-      {/* Delete Confirmation Dialog */}
-      <AlertDialog open={!!playlistToDelete} onOpenChange={() => setPlaylistToDelete(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete Playlist</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to delete "{playlistToDelete?.title}"? This action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmDelete}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+        {playlists.length === 0 ? (
+          <div className="text-center py-16">
+            <div className="inline-flex items-center justify-center w-24 h-24 bg-muted rounded-full mb-4">
+              <List size={48} className="text-muted-foreground" />
+            </div>
+            <h2 className="text-2xl font-semibold mb-2">No Flashpoint Playlists</h2>
+            <p className="text-muted-foreground mb-6">
+              No official Flashpoint playlists found. Check your Flashpoint installation or browse
+              community playlists.
+            </p>
+            <Button
+              onClick={() => setIsBrowseModalOpen(true)}
+              variant="secondary"
+              className="gap-2 mx-auto"
             >
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
+              <Globe size={20} />
+              Browse Community Playlists
+            </Button>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {playlists.map((playlist) => (
+              <Card
+                key={playlist.id}
+                className="p-4 hover:ring-2 hover:ring-primary/40 hover:shadow-lg transition-all group"
+              >
+                <div className="flex items-start gap-3">
+                  <Link to={`/flashpoint-playlists/${playlist.id}`} className="flex-shrink-0">
+                    <div className="bg-accent p-2 rounded">
+                      <List size={24} />
+                    </div>
+                  </Link>
+                  <Link to={`/flashpoint-playlists/${playlist.id}`} className="flex-1 min-w-0">
+                    <h3 className="font-semibold mb-1">{playlist.title}</h3>
+                    {playlist.description ? (
+                      <p className="text-sm text-muted-foreground line-clamp-2">
+                        {playlist.description}
+                      </p>
+                    ) : null}
+                    {playlist.gameIds ? (
+                      <p className="text-xs text-muted-foreground mt-2">
+                        {playlist.gameIds.length} games
+                      </p>
+                    ) : null}
+                  </Link>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                        aria-label="More options"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <MoreVertical size={16} />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={(e) => handleDeleteClick(e, playlist)}
+                        className="text-destructive focus:text-destructive"
+                      >
+                        <Trash2 size={16} className="mr-2" />
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        <BrowseCommunityPlaylistsModal
+          isOpen={isBrowseModalOpen}
+          onClose={() => setIsBrowseModalOpen(false)}
+        />
+
+        {/* Delete Confirmation Dialog */}
+        <AlertDialog open={!!playlistToDelete} onOpenChange={() => setPlaylistToDelete(null)}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete Playlist</AlertDialogTitle>
+              <AlertDialogDescription>
+                Are you sure you want to delete "{playlistToDelete?.title}"? This action cannot be
+                undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={handleConfirmDelete}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
     </ErrorBoundary>
   );
 }
diff --git a/frontend/src/views/RolesView.tsx b/frontend/src/views/RolesView.tsx
index 04b92fd..e34bcd0 100644
--- a/frontend/src/views/RolesView.tsx
+++ b/frontend/src/views/RolesView.tsx
@@ -38,20 +38,14 @@ export function RolesView() {
           <h1 className="text-3xl font-bold">Role & Permission Management</h1>
         </div>
         <RoleGuard permission="roles.create">
-          <Button onClick={() => setShowRoleForm(true)}>
-            Create Role
-          </Button>
+          <Button onClick={() => setShowRoleForm(true)}>Create Role</Button>
         </RoleGuard>
       </div>
 
       <RoleTable onEdit={handleEdit} onManagePermissions={handleManagePermissions} />
 
       {showRoleForm ? (
-        <RoleForm
-          role={editingRole}
-          onClose={handleCloseForm}
-          onSuccess={handleSuccess}
-        />
+        <RoleForm role={editingRole} onClose={handleCloseForm} onSuccess={handleSuccess} />
       ) : null}
 
       {managingPermissionsRole ? (
diff --git a/frontend/src/views/SettingsView.tsx b/frontend/src/views/SettingsView.tsx
index 237f900..9d6b114 100644
--- a/frontend/src/views/SettingsView.tsx
+++ b/frontend/src/views/SettingsView.tsx
@@ -1,17 +1,17 @@
-import { useState } from "react";
-import { Settings } from "lucide-react";
-import { AnimatePresence } from "framer-motion";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useAuthStore } from "@/store/auth";
-import { useQuery } from "@tanstack/react-query";
-import { ruffleApi } from "@/lib/api";
-import { usePublicSettings } from "@/hooks/usePublicSettings";
+import { useState } from 'react';
+import { Settings } from 'lucide-react';
+import { AnimatePresence } from 'framer-motion';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useAuthStore } from '@/store/auth';
+import { useQuery } from '@tanstack/react-query';
+import { ruffleApi } from '@/lib/api';
+import { usePublicSettings } from '@/hooks/usePublicSettings';
 
 // Tab components
-import { GeneralSettingsTab } from "@/components/settings/GeneralSettingsTab";
-import { AppSettingsTab } from "@/components/settings/AppSettingsTab";
-import { UpdateSettingsTab } from "@/components/settings/UpdateSettingsTab";
-import { FeaturesSettingsTab } from "@/components/settings/FeaturesSettingsTab";
+import { GeneralSettingsTab } from '@/components/settings/GeneralSettingsTab';
+import { AppSettingsTab } from '@/components/settings/AppSettingsTab';
+import { UpdateSettingsTab } from '@/components/settings/UpdateSettingsTab';
+import { FeaturesSettingsTab } from '@/components/settings/FeaturesSettingsTab';
 
 // Animation variants for tab transitions - smooth cross-fade
 const tabContentVariants = {
@@ -24,7 +24,7 @@ const tabContentVariants = {
     y: 0,
     transition: {
       duration: 0.25,
-      ease: "easeOut" as const,
+      ease: 'easeOut' as const,
     },
   },
   exit: {
@@ -32,19 +32,19 @@ const tabContentVariants = {
     y: -10,
     transition: {
       duration: 0.2,
-      ease: "easeIn" as const,
+      ease: 'easeIn' as const,
     },
   },
 };
 
 export function SettingsView() {
-  const [activeTab, setActiveTab] = useState("general");
+  const [activeTab, setActiveTab] = useState('general');
   const { user } = useAuthStore();
-  const isAdmin = user?.permissions.includes("settings.update");
+  const isAdmin = user?.permissions.includes('settings.update');
 
   // Fetch Ruffle version for non-admin users
   const { data: ruffleVersion, isLoading: isLoadingRuffleVersion } = useQuery({
-    queryKey: ["ruffleVersion"],
+    queryKey: ['ruffleVersion'],
     queryFn: () => ruffleApi.getVersion(),
     staleTime: 5 * 60 * 1000, // 5 minutes
     enabled: !isAdmin, // Only fetch for non-admin users (admin users get it from GeneralSettingsTab)
@@ -54,87 +54,73 @@ export function SettingsView() {
   const { data: publicSettings } = usePublicSettings();
 
   // Get version strings
-  const flashpointVersion = publicSettings?.metadata?.flashpointVersion || "Unknown";
-  const webAppVersion = import.meta.env.VITE_APP_VERSION || "1.0.0";
+  const flashpointVersion = publicSettings?.metadata?.flashpointVersion || 'Unknown';
+  const webAppVersion = import.meta.env.VITE_APP_VERSION || '1.0.0';
 
   return (
     <div className="max-w-5xl mx-auto space-y-6">
-        {/* Header */}
-        <div className="flex items-center gap-3">
-          <Settings size={32} className="text-primary" />
-          <h1 className="text-3xl font-bold">Settings</h1>
-        </div>
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <Settings size={32} className="text-primary" />
+        <h1 className="text-3xl font-bold">Settings</h1>
+      </div>
 
-        {/* Tabbed Interface - Only show tabs for admin users */}
-        {isAdmin ? (
-          <Tabs
-            value={activeTab}
-            onValueChange={setActiveTab}
-            className="w-full"
-          >
-            <TabsList className="grid w-full grid-cols-4 border-2 border-primary/60 h-full">
-              <TabsTrigger value="general">General</TabsTrigger>
-              <TabsTrigger value="app">App</TabsTrigger>
-              <TabsTrigger value="update">Update</TabsTrigger>
-              <TabsTrigger value="features">Features</TabsTrigger>
-            </TabsList>
+      {/* Tabbed Interface - Only show tabs for admin users */}
+      {isAdmin ? (
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid w-full grid-cols-4 border-2 border-primary/60 h-full">
+            <TabsTrigger value="general">General</TabsTrigger>
+            <TabsTrigger value="app">App</TabsTrigger>
+            <TabsTrigger value="update">Update</TabsTrigger>
+            <TabsTrigger value="features">Features</TabsTrigger>
+          </TabsList>
 
-            <div className="mt-6">
-              <AnimatePresence mode="wait">
-                {activeTab === "general" ? (
-                  <GeneralSettingsTab tabContentVariants={tabContentVariants} />
-                ) : null}
+          <div className="mt-6">
+            <AnimatePresence mode="wait">
+              {activeTab === 'general' ? (
+                <GeneralSettingsTab tabContentVariants={tabContentVariants} />
+              ) : null}
 
-                {activeTab === "app" ? (
-                  <AppSettingsTab tabContentVariants={tabContentVariants} />
-                ) : null}
+              {activeTab === 'app' ? (
+                <AppSettingsTab tabContentVariants={tabContentVariants} />
+              ) : null}
 
-                {activeTab === "update" ? (
-                  <UpdateSettingsTab tabContentVariants={tabContentVariants} />
-                ) : null}
+              {activeTab === 'update' ? (
+                <UpdateSettingsTab tabContentVariants={tabContentVariants} />
+              ) : null}
 
-                {activeTab === "features" ? (
-                  <FeaturesSettingsTab tabContentVariants={tabContentVariants} />
-                ) : null}
-              </AnimatePresence>
-            </div>
-          </Tabs>
-        ) : (
-          // Non-admin users: Show only Version Info without tabs
-          <div className="space-y-6">
-            <div className="bg-card rounded-lg p-6 border border-border shadow-md">
-              <h2 className="text-xl font-semibold mb-4">
-                Version Information
-              </h2>
-              <div className="space-y-2 text-sm">
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground">
-                    Flashpoint Version:
-                  </span>
-                  <span className="font-medium">
-                    {flashpointVersion}
-                  </span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground">
-                    Web App Version:
-                  </span>
-                  <span className="font-medium">{webAppVersion}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground">
-                    Ruffle Emulator:
-                  </span>
-                  <span className="font-medium">
-                    {isLoadingRuffleVersion
-                      ? "Loading..."
-                      : ruffleVersion?.currentVersion || "Not installed"}
-                  </span>
-                </div>
+              {activeTab === 'features' ? (
+                <FeaturesSettingsTab tabContentVariants={tabContentVariants} />
+              ) : null}
+            </AnimatePresence>
+          </div>
+        </Tabs>
+      ) : (
+        // Non-admin users: Show only Version Info without tabs
+        <div className="space-y-6">
+          <div className="bg-card rounded-lg p-6 border border-border shadow-md">
+            <h2 className="text-xl font-semibold mb-4">Version Information</h2>
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Flashpoint Version:</span>
+                <span className="font-medium">{flashpointVersion}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Web App Version:</span>
+                <span className="font-medium">{webAppVersion}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Ruffle Emulator:</span>
+                <span className="font-medium">
+                  {isLoadingRuffleVersion
+                    ? 'Loading...'
+                    : ruffleVersion?.currentVersion || 'Not installed'}
+                </span>
               </div>
             </div>
           </div>
-        )}
-      </div>
+        </div>
+      )}
+    </div>
   );
 }
diff --git a/frontend/src/views/SharedPlaylistView.tsx b/frontend/src/views/SharedPlaylistView.tsx
index 136b218..b262a0b 100644
--- a/frontend/src/views/SharedPlaylistView.tsx
+++ b/frontend/src/views/SharedPlaylistView.tsx
@@ -48,10 +48,7 @@ export function SharedPlaylistView() {
   });
 
   // Fetch shared playlist games
-  const {
-    data: games = [],
-    isLoading: isLoadingGames,
-  } = useQuery({
+  const { data: games = [], isLoading: isLoadingGames } = useQuery({
     queryKey: ['sharedPlaylistGames', shareToken],
     queryFn: () => sharedPlaylistsApi.getGames(shareToken!),
     enabled: !!shareToken && !!playlist,
@@ -140,12 +137,7 @@ export function SharedPlaylistView() {
               </>
             )}
           </span>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleCopyLink}
-            className="flex-shrink-0"
-          >
+          <Button variant="outline" size="sm" onClick={handleCopyLink} className="flex-shrink-0">
             <Copy className="h-4 w-4 mr-2" />
             Copy Link
           </Button>
@@ -206,10 +198,7 @@ export function SharedPlaylistView() {
         <div className="flex items-center gap-2">
           <ViewOptions />
           {isAuthenticated ? (
-            <Button
-              onClick={handleClone}
-              disabled={isCloning || clonePlaylist.isPending}
-            >
+            <Button onClick={handleClone} disabled={isCloning || clonePlaylist.isPending}>
               {isCloning || clonePlaylist.isPending ? 'Cloning...' : 'Clone to My Playlists'}
             </Button>
           ) : null}
diff --git a/frontend/src/views/UnauthorizedView.tsx b/frontend/src/views/UnauthorizedView.tsx
index 931d8ac..5174d90 100644
--- a/frontend/src/views/UnauthorizedView.tsx
+++ b/frontend/src/views/UnauthorizedView.tsx
@@ -26,7 +26,7 @@ export function UnauthorizedView() {
 
   const handleLogin = () => {
     navigate('/login', {
-      state: { from: fromPath || location.pathname }
+      state: { from: fromPath || location.pathname },
     });
   };
 
@@ -48,7 +48,7 @@ export function UnauthorizedView() {
     if (isGuest) {
       return [
         'Log in with an account that has the required permissions',
-        'Create a new account if you don\'t have one',
+        "Create a new account if you don't have one",
         'Return to the home page to browse available content',
       ];
     }
@@ -82,15 +82,19 @@ export function UnauthorizedView() {
                 <div className="space-y-1">
                   <p className="font-medium">Current user:</p>
                   <div className="text-sm">
-                    <p><span className="font-semibold">Username:</span> {user.username}</p>
-                    <p><span className="font-semibold">Role:</span> {user.role}</p>
+                    <p>
+                      <span className="font-semibold">Username:</span> {user.username}
+                    </p>
+                    <p>
+                      <span className="font-semibold">Role:</span> {user.role}
+                    </p>
                   </div>
                 </div>
               </AlertDescription>
             </Alert>
           ) : null}
 
-          {(requiredPermission || requiredFeature) ? (
+          {requiredPermission || requiredFeature ? (
             <Alert>
               <AlertDescription>
                 <div className="space-y-1">
@@ -111,9 +115,7 @@ export function UnauthorizedView() {
                     </p>
                   ) : null}
                   {fromPath ? (
-                    <p className="text-sm text-muted-foreground">
-                      Attempted to access: {fromPath}
-                    </p>
+                    <p className="text-sm text-muted-foreground">Attempted to access: {fromPath}</p>
                   ) : null}
                 </div>
               </AlertDescription>
diff --git a/frontend/src/views/UserPlaylistDetailView.tsx b/frontend/src/views/UserPlaylistDetailView.tsx
index 1300575..ddde861 100644
--- a/frontend/src/views/UserPlaylistDetailView.tsx
+++ b/frontend/src/views/UserPlaylistDetailView.tsx
@@ -43,7 +43,11 @@ export function UserPlaylistDetailView() {
 
   const playlistId = id ? parseInt(id, 10) : null;
 
-  const { data: playlist, isLoading: isLoadingPlaylist, error: playlistError } = useUserPlaylist(playlistId);
+  const {
+    data: playlist,
+    isLoading: isLoadingPlaylist,
+    error: playlistError,
+  } = useUserPlaylist(playlistId);
   const { data: playlistGames = [], isLoading: isLoadingGames } = useUserPlaylistGames(playlistId);
 
   // Fetch favorite game IDs for performance optimization
@@ -69,9 +73,7 @@ export function UserPlaylistDetailView() {
       toast.success('Playlist deleted successfully');
       navigate('/playlists');
     } catch (error: any) {
-      toast.error(
-        error?.response?.data?.error?.message || 'Failed to delete playlist'
-      );
+      toast.error(error?.response?.data?.error?.message || 'Failed to delete playlist');
     }
   };
 
@@ -88,10 +90,7 @@ export function UserPlaylistDetailView() {
     return (
       <div className="text-center py-12">
         <p className="text-destructive">Error loading playlist</p>
-        <Link
-          to="/playlists"
-          className="text-primary hover:underline mt-4 inline-block"
-        >
+        <Link to="/playlists" className="text-primary hover:underline mt-4 inline-block">
           Back to playlists
         </Link>
       </div>
@@ -133,9 +132,7 @@ export function UserPlaylistDetailView() {
           <div className="flex-1">
             <div className="flex items-center gap-3 mb-2">
               <h1 className="text-3xl font-bold">{playlist.title}</h1>
-              {playlist.isPublic ? (
-                <Badge variant="secondary">Shared</Badge>
-              ) : null}
+              {playlist.isPublic ? <Badge variant="secondary">Shared</Badge> : null}
             </div>
             {playlist.description ? (
               <p className="text-muted-foreground">{playlist.description}</p>
@@ -223,14 +220,12 @@ export function UserPlaylistDetailView() {
           <AlertDialogHeader>
             <AlertDialogTitle>Delete Playlist</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to delete "{playlist.title}"? This action cannot be
-              undone. All games in this playlist will remain in your library.
+              Are you sure you want to delete "{playlist.title}"? This action cannot be undone. All
+              games in this playlist will remain in your library.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={deletePlaylist.isPending}>
-              Cancel
-            </AlertDialogCancel>
+            <AlertDialogCancel disabled={deletePlaylist.isPending}>Cancel</AlertDialogCancel>
             <AlertDialogAction
               onClick={handleDelete}
               disabled={deletePlaylist.isPending}
diff --git a/frontend/src/views/UsersView.tsx b/frontend/src/views/UsersView.tsx
index 9bf11c6..982f03b 100644
--- a/frontend/src/views/UsersView.tsx
+++ b/frontend/src/views/UsersView.tsx
@@ -38,20 +38,14 @@ export function UsersView() {
           <h1 className="text-3xl font-bold">User Management</h1>
         </div>
         <RoleGuard permission="users.create">
-          <Button onClick={() => setShowUserForm(true)}>
-            Create User
-          </Button>
+          <Button onClick={() => setShowUserForm(true)}>Create User</Button>
         </RoleGuard>
       </div>
 
       <UserTable onEdit={handleEdit} onChangePassword={handleChangePassword} />
 
       {showUserForm ? (
-        <UserForm
-          user={editingUser}
-          onClose={handleCloseForm}
-          onSuccess={handleSuccess}
-        />
+        <UserForm user={editingUser} onClose={handleCloseForm} onSuccess={handleSuccess} />
       ) : null}
 
       {changingPasswordUser ? (
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 3247210..4d868b6 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,191 +1,191 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: ["class"],
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: ['class'],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
-        "toast-success": {
-          DEFAULT: "hsl(var(--toast-success))",
-          foreground: "hsl(var(--toast-success-foreground))",
-          icon: "hsl(var(--toast-success-icon))",
-          border: "hsl(var(--toast-success-border))",
+        'toast-success': {
+          DEFAULT: 'hsl(var(--toast-success))',
+          foreground: 'hsl(var(--toast-success-foreground))',
+          icon: 'hsl(var(--toast-success-icon))',
+          border: 'hsl(var(--toast-success-border))',
         },
-        "toast-error": {
-          DEFAULT: "hsl(var(--toast-error))",
-          foreground: "hsl(var(--toast-error-foreground))",
-          icon: "hsl(var(--toast-error-icon))",
-          border: "hsl(var(--toast-error-border))",
+        'toast-error': {
+          DEFAULT: 'hsl(var(--toast-error))',
+          foreground: 'hsl(var(--toast-error-foreground))',
+          icon: 'hsl(var(--toast-error-icon))',
+          border: 'hsl(var(--toast-error-border))',
         },
-        "toast-warning": {
-          DEFAULT: "hsl(var(--toast-warning))",
-          foreground: "hsl(var(--toast-warning-foreground))",
-          icon: "hsl(var(--toast-warning-icon))",
-          border: "hsl(var(--toast-warning-border))",
+        'toast-warning': {
+          DEFAULT: 'hsl(var(--toast-warning))',
+          foreground: 'hsl(var(--toast-warning-foreground))',
+          icon: 'hsl(var(--toast-warning-icon))',
+          border: 'hsl(var(--toast-warning-border))',
         },
-        "toast-info": {
-          DEFAULT: "hsl(var(--toast-info))",
-          foreground: "hsl(var(--toast-info-foreground))",
-          icon: "hsl(var(--toast-info-icon))",
-          border: "hsl(var(--toast-info-border))",
+        'toast-info': {
+          DEFAULT: 'hsl(var(--toast-info))',
+          foreground: 'hsl(var(--toast-info-foreground))',
+          icon: 'hsl(var(--toast-info-icon))',
+          border: 'hsl(var(--toast-info-border))',
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
         },
         shimmer: {
-          "0%": { backgroundPosition: "-200% 0" },
-          "100%": { backgroundPosition: "200% 0" },
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
         },
         float: {
-          "0%, 100%": {
-            transform: "translateY(0) rotate(0deg)",
+          '0%, 100%': {
+            transform: 'translateY(0) rotate(0deg)',
           },
-          "50%": {
-            transform: "translateY(-8px) rotate(1deg)",
+          '50%': {
+            transform: 'translateY(-8px) rotate(1deg)',
           },
         },
-        "fade-in": {
-          "0%": { opacity: "0" },
-          "100%": { opacity: "1" },
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
         },
-        "fade-in-up": {
-          "0%": {
-            opacity: "0",
-            transform: "translateY(20px)",
+        'fade-in-up': {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(20px)',
           },
-          "100%": {
-            opacity: "1",
-            transform: "translateY(0)",
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0)',
           },
         },
-        "slide-in-down": {
-          "0%": {
-            opacity: "0",
-            transform: "translateY(-10px)",
+        'slide-in-down': {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(-10px)',
           },
-          "100%": {
-            opacity: "1",
-            transform: "translateY(0)",
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0)',
           },
         },
         // Prismatic Light Diffusion - Gradient drift animations
-        "prismatic-drift-1": {
-          "0%": {
-            transform: "translate(0%, 0%) scale(1)",
+        'prismatic-drift-1': {
+          '0%': {
+            transform: 'translate(0%, 0%) scale(1)',
           },
-          "25%": {
-            transform: "translate(12%, -8%) scale(1.08)",
+          '25%': {
+            transform: 'translate(12%, -8%) scale(1.08)',
           },
-          "50%": {
-            transform: "translate(18%, 5%) scale(1.12)",
+          '50%': {
+            transform: 'translate(18%, 5%) scale(1.12)',
           },
-          "75%": {
-            transform: "translate(-8%, 15%) scale(1.05)",
+          '75%': {
+            transform: 'translate(-8%, 15%) scale(1.05)',
           },
-          "100%": {
-            transform: "translate(0%, 0%) scale(1)",
+          '100%': {
+            transform: 'translate(0%, 0%) scale(1)',
           },
         },
-        "prismatic-drift-2": {
-          "0%": {
-            transform: "translate(0%, 0%) scale(1) rotate(0deg)",
+        'prismatic-drift-2': {
+          '0%': {
+            transform: 'translate(0%, 0%) scale(1) rotate(0deg)',
           },
-          "30%": {
-            transform: "translate(-15%, 10%) scale(1.1) rotate(3deg)",
+          '30%': {
+            transform: 'translate(-15%, 10%) scale(1.1) rotate(3deg)',
           },
-          "60%": {
-            transform: "translate(10%, -12%) scale(0.95) rotate(-2deg)",
+          '60%': {
+            transform: 'translate(10%, -12%) scale(0.95) rotate(-2deg)',
           },
-          "100%": {
-            transform: "translate(0%, 0%) scale(1) rotate(0deg)",
+          '100%': {
+            transform: 'translate(0%, 0%) scale(1) rotate(0deg)',
           },
         },
-        "prismatic-drift-3": {
-          "0%": {
-            transform: "translate(0%, 0%) scale(1)",
+        'prismatic-drift-3': {
+          '0%': {
+            transform: 'translate(0%, 0%) scale(1)',
           },
-          "33%": {
-            transform: "translate(-5%, 10%) scale(1.06)",
+          '33%': {
+            transform: 'translate(-5%, 10%) scale(1.06)',
           },
-          "66%": {
-            transform: "translate(8%, -8%) scale(0.98)",
+          '66%': {
+            transform: 'translate(8%, -8%) scale(0.98)',
           },
-          "100%": {
-            transform: "translate(0%, 0%) scale(1)",
+          '100%': {
+            transform: 'translate(0%, 0%) scale(1)',
           },
         },
-        "prismatic-glow": {
-          "0%, 100%": { opacity: "0.6" },
-          "50%": { opacity: "0.85" },
+        'prismatic-glow': {
+          '0%, 100%': { opacity: '0.6' },
+          '50%': { opacity: '0.85' },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        shimmer: "shimmer 2s infinite linear",
-        float: "float 6s ease-in-out infinite",
-        "fade-in": "fade-in 0.5s ease-out",
-        "fade-in-up": "fade-in-up 0.6s ease-out",
-        "slide-in-down": "slide-in-down 0.3s ease-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        shimmer: 'shimmer 2s infinite linear',
+        float: 'float 6s ease-in-out infinite',
+        'fade-in': 'fade-in 0.5s ease-out',
+        'fade-in-up': 'fade-in-up 0.6s ease-out',
+        'slide-in-down': 'slide-in-down 0.3s ease-out',
         // Prismatic Light Diffusion animations
-        "prismatic-drift-1": "prismatic-drift-1 60s ease-in-out infinite",
-        "prismatic-drift-2": "prismatic-drift-2 70s ease-in-out infinite",
-        "prismatic-drift-3": "prismatic-drift-3 80s ease-in-out infinite",
-        "prismatic-glow": "prismatic-glow 8s ease-in-out infinite",
+        'prismatic-drift-1': 'prismatic-drift-1 60s ease-in-out infinite',
+        'prismatic-drift-2': 'prismatic-drift-2 70s ease-in-out infinite',
+        'prismatic-drift-3': 'prismatic-drift-3 80s ease-in-out infinite',
+        'prismatic-glow': 'prismatic-glow 8s ease-in-out infinite',
       },
     },
   },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 };
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 9c0db43..4ef8a3e 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -11,17 +11,17 @@ export default defineConfig({
       open: false,
       filename: 'stats.html',
       gzipSize: true,
-      brotliSize: true
-    })
+      brotliSize: true,
+    }),
   ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src')
-    }
+      '@': path.resolve(__dirname, './src'),
+    },
   },
   assetsInclude: ['**/*.wasm'],
   esbuild: {
-    drop: ['console', 'debugger']
+    drop: ['console', 'debugger'],
   },
   build: {
     // Target modern browsers for smaller bundles
@@ -42,7 +42,11 @@ export default defineConfig({
 
         manualChunks: (id) => {
           // Core React libraries
-          if (id.includes('node_modules/react') || id.includes('node_modules/react-dom') || id.includes('node_modules/react-router-dom')) {
+          if (
+            id.includes('node_modules/react') ||
+            id.includes('node_modules/react-dom') ||
+            id.includes('node_modules/react-router-dom')
+          ) {
             return 'react-vendor';
           }
 
@@ -67,7 +71,11 @@ export default defineConfig({
           }
 
           // Form libraries
-          if (id.includes('react-hook-form') || id.includes('@hookform/resolvers') || id.includes('zod')) {
+          if (
+            id.includes('react-hook-form') ||
+            id.includes('@hookform/resolvers') ||
+            id.includes('zod')
+          ) {
             return 'forms';
           }
 
@@ -77,38 +85,42 @@ export default defineConfig({
           }
 
           // Utilities (date-fns, clsx, etc.)
-          if (id.includes('date-fns') || id.includes('clsx') || id.includes('class-variance-authority')) {
+          if (
+            id.includes('date-fns') ||
+            id.includes('clsx') ||
+            id.includes('class-variance-authority')
+          ) {
             return 'utils';
           }
 
           // Remaining node_modules: let Rollup decide optimal chunking
           // A catch-all 'vendor' bucket causes circular deps with react-vendor
           // because packages like framer-motion/axios import React
-        }
-      }
+        },
+      },
     },
 
     // Source maps for production debugging (can be disabled for smaller builds)
-    sourcemap: false
+    sourcemap: false,
   },
   server: {
     port: 5173,
     headers: {
       'Cross-Origin-Embedder-Policy': 'credentialless',
-      'Cross-Origin-Opener-Policy': 'same-origin'
+      'Cross-Origin-Opener-Policy': 'same-origin',
     },
     proxy: {
       '/api': {
         target: 'http://localhost:3100',
-        changeOrigin: true
+        changeOrigin: true,
       },
       '/proxy': {
         target: 'http://localhost:3100',
-        changeOrigin: true
-      }
-    }
+        changeOrigin: true,
+      },
+    },
   },
   optimizeDeps: {
-    exclude: ['*.wasm']
-  }
+    exclude: ['*.wasm'],
+  },
 });
diff --git a/game-service/.eslintrc.json b/game-service/.eslintrc.json
index 22d5046..9773735 100644
--- a/game-service/.eslintrc.json
+++ b/game-service/.eslintrc.json
@@ -6,15 +6,15 @@
     "project": true
   },
   "plugins": ["@typescript-eslint"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
   "rules": {
-    "@typescript-eslint/no-unused-vars": ["error", {
-      "argsIgnorePattern": "^_",
-      "varsIgnorePattern": "^_"
-    }],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
diff --git a/game-service/README.md b/game-service/README.md
index 686ff1c..06c48fd 100644
--- a/game-service/README.md
+++ b/game-service/README.md
@@ -1,16 +1,22 @@
 # Flashpoint Game Service
 
-Independent service for serving Flashpoint game content and handling proxy requests. This service replaces the original Flashpoint Game Server (written in Go) with a Node.js implementation.
+Independent service for serving Flashpoint game content and handling proxy
+requests. This service replaces the original Flashpoint Game Server (written in
+Go) with a Node.js implementation.
 
 ## Purpose
 
 The Game Service provides:
-- **HTTP Proxy Server** (port 22500): Serves legacy web content from htdocs and ZIP archives
-- **GameZip Server** (port 22501): Serves files from mounted ZIP archives in Data/Games
+
+- **HTTP Proxy Server** (port 22500): Serves legacy web content from htdocs and
+  ZIP archives
+- **GameZip Server** (port 22501): Serves files from mounted ZIP archives in
+  Data/Games
 - **External CDN Fallback**: Downloads missing files from Flashpoint CDN
 - **File Caching**: Caches downloaded files locally for future use
 
-This service is completely independent from the backend API and can be started/stopped separately.
+This service is completely independent from the backend API and can be
+started/stopped separately.
 
 ## Architecture
 
@@ -86,7 +92,8 @@ The backend API proxies game content requests to this service:
 - **Backend** (port 3100): REST API for game metadata, downloads
 - **game-service** (ports 22500, 22501): Proxy and ZIP file server
 
-Backend routes like `/game-files/*` and `/proxy/*` forward requests to this service.
+Backend routes like `/game-files/*` and `/proxy/*` forward requests to this
+service.
 
 ## File Resolution Order
 
@@ -125,6 +132,7 @@ When a file is requested, the proxy server tries:
 ## Logging
 
 The service uses Winston for logging. Log levels:
+
 - `error`: Critical errors
 - `warn`: Warnings and non-critical issues
 - `info`: General information (default)
@@ -135,10 +143,12 @@ Set log level via `LOG_LEVEL` environment variable.
 ## Port Configuration
 
 Default ports:
+
 - **22500**: HTTP Proxy Server (matches original Flashpoint Game Server)
 - **22501**: GameZip Server (matches original ZipServer)
 
-These ports are standard in Flashpoint and should not be changed unless necessary.
+These ports are standard in Flashpoint and should not be changed unless
+necessary.
 
 ## Dependencies
 
@@ -159,11 +169,13 @@ These ports are standard in Flashpoint and should not be changed unless necessar
 ## Testing
 
 Test the proxy server:
+
 ```bash
 curl http://localhost:22500/
 ```
 
 Test the GameZip server:
+
 ```bash
 curl http://localhost:22501/
 ```
@@ -171,16 +183,19 @@ curl http://localhost:22501/
 ## Troubleshooting
 
 **Port already in use:**
+
 - Check if another instance is running
 - On Windows: `netstat -ano | findstr :22500`
 - Kill the process or change the port in `.env`
 
 **Files not found:**
+
 - Verify `FLASHPOINT_PATH` is correct
 - Check that `Legacy/htdocs` and `Data/Games` exist
 - Review logs for file resolution attempts
 
 **ZIP files not loading:**
+
 - Ensure ZIPs are in `Data/Games/`
 - Check logs for mount errors
 - Verify ZIP files are valid
diff --git a/game-service/src/config.ts b/game-service/src/config.ts
index 0291d16..2a3be89 100644
--- a/game-service/src/config.ts
+++ b/game-service/src/config.ts
@@ -100,7 +100,7 @@ export class ConfigManager {
         infinityServerURL: 'https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs/',
         externalFilePaths: [
           'https://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs',
-          'https://infinity.unstable.life/Flashpoint/Legacy/htdocs/'
+          'https://infinity.unstable.life/Flashpoint/Legacy/htdocs/',
         ],
         mad4fpEnabled: false,
         mad4fpPaths: [],
diff --git a/game-service/src/gamezipserver.ts b/game-service/src/gamezipserver.ts
index dd32f51..77a5246 100644
--- a/game-service/src/gamezipserver.ts
+++ b/game-service/src/gamezipserver.ts
@@ -75,11 +75,13 @@ export class GameZipServer {
     // Health check endpoint
     if (method === 'GET' && url === '/health') {
       res.writeHead(200, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({
-        status: 'healthy',
-        service: 'flashpoint-gamezip-server',
-        timestamp: new Date().toISOString()
-      }));
+      res.end(
+        JSON.stringify({
+          status: 'healthy',
+          service: 'flashpoint-gamezip-server',
+          timestamp: new Date().toISOString(),
+        })
+      );
       return;
     }
 
@@ -164,9 +166,11 @@ export class GameZipServer {
     // Validate ZIP path to prevent directory traversal
     // Ensure the ZIP file is within the allowed games directory
     try {
-      const flashpointPath = process.env.FLASHPOINT_PATH ||
+      const flashpointPath =
+        process.env.FLASHPOINT_PATH ||
         (process.env.NODE_ENV === 'production' ? '/data/flashpoint' : 'D:/Flashpoint');
-      const allowedGamesPath = process.env.FLASHPOINT_GAMES_PATH || path.join(flashpointPath, 'Data', 'Games');
+      const allowedGamesPath =
+        process.env.FLASHPOINT_GAMES_PATH || path.join(flashpointPath, 'Data', 'Games');
 
       const normalizedZipPath = path.normalize(zipPath);
       const resolvedZipPath = path.resolve(normalizedZipPath);
@@ -236,7 +240,10 @@ export class GameZipServer {
    * Handle GET /* - Serve file from mounted ZIPs
    * Supports proxy-style requests: GET http://domain.com/path HTTP/1.1
    */
-  private async handleFileRequest(req: http.IncomingMessage, res: http.ServerResponse): Promise<void> {
+  private async handleFileRequest(
+    req: http.IncomingMessage,
+    res: http.ServerResponse
+  ): Promise<void> {
     if (!req.url) {
       this.sendError(res, 400, 'Bad Request: No URL');
       return;
@@ -320,7 +327,9 @@ export class GameZipServer {
     }
 
     // Send file
-    logger.info(`[GameZipServer] ✓ Serving from ZIP ${result.mountId}: ${relPath} (${fileData.length} bytes)`);
+    logger.info(
+      `[GameZipServer] ✓ Serving from ZIP ${result.mountId}: ${relPath} (${fileData.length} bytes)`
+    );
 
     // CORS headers
     setCorsHeaders(res, this.settings);
@@ -341,7 +350,7 @@ export class GameZipServer {
   private readBody(req: http.IncomingMessage, maxSize: number = 1024 * 1024): Promise<string> {
     return new Promise((resolve, reject) => {
       let body = '';
-      req.on('data', chunk => {
+      req.on('data', (chunk) => {
         body += chunk.toString();
 
         // Check size limit (default 1MB)
diff --git a/game-service/src/http-proxy-server.ts b/game-service/src/http-proxy-server.ts
index 5ff0c87..96b9e0c 100644
--- a/game-service/src/http-proxy-server.ts
+++ b/game-service/src/http-proxy-server.ts
@@ -43,11 +43,13 @@ export async function createHTTPProxyServer(options: ProxyServerOptions): Promis
       // Health check endpoint
       if (req.url === '/health') {
         res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({
-          status: 'healthy',
-          service: 'flashpoint-game-service',
-          timestamp: new Date().toISOString()
-        }));
+        res.end(
+          JSON.stringify({
+            status: 'healthy',
+            service: 'flashpoint-game-service',
+            timestamp: new Date().toISOString(),
+          })
+        );
         return;
       }
 
diff --git a/game-service/src/index.ts b/game-service/src/index.ts
index c9d690e..628aa4e 100644
--- a/game-service/src/index.ts
+++ b/game-service/src/index.ts
@@ -15,15 +15,17 @@ async function main() {
     // Get configuration from environment
     // Docker (production): /data/flashpoint (volume mount point)
     // Local dev: D:/Flashpoint or FLASHPOINT_PATH env var
-    const flashpointPath = process.env.FLASHPOINT_PATH ||
+    const flashpointPath =
+      process.env.FLASHPOINT_PATH ||
       (process.env.NODE_ENV === 'production' ? '/data/flashpoint' : 'D:/Flashpoint');
     const flashpointHtdocsPath = path.join(flashpointPath, 'Legacy', 'htdocs');
     const flashpointGamesPath = path.join(flashpointPath, 'Data', 'Games');
     const proxyPort = parseInt(process.env.PROXY_PORT || '22500', 10);
     const gameZipPort = parseInt(process.env.GAMEZIPSERVER_PORT || '22501', 10);
-    const externalFallbackUrls = (process.env.EXTERNAL_FALLBACK_URLS ||
+    const externalFallbackUrls = (
+      process.env.EXTERNAL_FALLBACK_URLS ||
       'http://infinity.flashpointarchive.org/Flashpoint/Legacy/htdocs,' +
-      'http://infinity.unstable.life/Flashpoint/Legacy/htdocs/'
+        'http://infinity.unstable.life/Flashpoint/Legacy/htdocs/'
     ).split(',');
 
     logger.info(`📁 Flashpoint path: ${flashpointPath}`);
@@ -41,7 +43,7 @@ async function main() {
         gameDataPath: flashpointGamesPath,
         externalFilePaths: externalFallbackUrls,
         allowCrossDomain: true,
-        chunkSize: parseInt(process.env.PROXY_CHUNK_SIZE || '8192', 10)
+        chunkSize: parseInt(process.env.PROXY_CHUNK_SIZE || '8192', 10),
       });
       logger.info(`✓ HTTP Proxy Server started on port ${proxyPort}`);
       logger.info('  Replicating FlashpointGameServer functionality');
diff --git a/game-service/src/legacy-server.ts b/game-service/src/legacy-server.ts
index ed82331..0c8be4b 100644
--- a/game-service/src/legacy-server.ts
+++ b/game-service/src/legacy-server.ts
@@ -80,7 +80,10 @@ export class LegacyServer {
    * Build all path candidates in priority order
    * Replicates the path resolution algorithm from Go's ServeLegacy()
    */
-  private buildPathCandidates(relPath: string, urlPath: string): Array<{ path: string; type: string }> {
+  private buildPathCandidates(
+    relPath: string,
+    urlPath: string
+  ): Array<{ path: string; type: string }> {
     const candidates: Array<{ path: string; type: string }> = [];
     const seenPaths = new Set<string>();
 
@@ -142,10 +145,7 @@ export class LegacyServer {
 
     // 3. CGI-BIN paths (for script files)
     if (this.isScriptUrl(urlPath)) {
-      addCandidate(
-        path.join(this.settings.legacyCGIBINPath, relPath),
-        'cgi-bin'
-      );
+      addCandidate(path.join(this.settings.legacyCGIBINPath, relPath), 'cgi-bin');
 
       if (pathWithoutQuery !== relPath) {
         addCandidate(
@@ -237,7 +237,7 @@ export class LegacyServer {
     return {
       data,
       contentType,
-      source: 'local-htdocs'
+      source: 'local-htdocs',
     };
   }
 
@@ -349,7 +349,7 @@ export class LegacyServer {
       'data',
       'files',
       'secure',
-      'download'
+      'download',
     ];
 
     // Add subdomain variations
diff --git a/game-service/src/mimeTypes.ts b/game-service/src/mimeTypes.ts
index 194306c..2193c87 100644
--- a/game-service/src/mimeTypes.ts
+++ b/game-service/src/mimeTypes.ts
@@ -175,7 +175,7 @@ export const CUSTOM_MIME_TYPES: { [key: string]: string } = {
   wrl: 'model/vrml',
   wvr: 'x-world/x-wvr',
   x3db: 'model/x3d+binary',
-  xvr: 'x-world/x-xvr'
+  xvr: 'x-world/x-xvr',
 };
 
 // Standard MIME types for common web files
@@ -230,7 +230,7 @@ const STANDARD_MIME_TYPES: { [key: string]: string } = {
   // Binary
   bin: 'application/octet-stream',
   exe: 'application/octet-stream',
-  dll: 'application/octet-stream'
+  dll: 'application/octet-stream',
 };
 
 /**
diff --git a/game-service/src/proxy-request-handler.ts b/game-service/src/proxy-request-handler.ts
index 5e25368..02aabb9 100644
--- a/game-service/src/proxy-request-handler.ts
+++ b/game-service/src/proxy-request-handler.ts
@@ -82,7 +82,6 @@ export class ProxyRequestHandler {
 
       logger.info(`[ProxyHandler] ✓ Served from ${legacyResult.source}`);
       this.sendResponse(res, legacyResult.data, legacyResult.contentType, legacyResult.source);
-
     } catch (error) {
       logger.error('[ProxyHandler] Error handling request:', error);
 
@@ -129,7 +128,12 @@ export class ProxyRequestHandler {
   /**
    * Send successful response
    */
-  private sendResponse(res: ServerResponse, data: Buffer, contentType: string, source: string): void {
+  private sendResponse(
+    res: ServerResponse,
+    data: Buffer,
+    contentType: string,
+    source: string
+  ): void {
     // Process HTML files to inject polyfills for better game compatibility
     let fileData = data;
     if (contentType.includes('text/html')) {
diff --git a/game-service/src/utils/htmlInjector.ts b/game-service/src/utils/htmlInjector.ts
index 8fb76ce..175e0c9 100644
--- a/game-service/src/utils/htmlInjector.ts
+++ b/game-service/src/utils/htmlInjector.ts
@@ -82,10 +82,10 @@ function needsUnityPolyfills(html: string): boolean {
     /createUnityInstance/i,
     /unityFramework\.js/i,
     /Build\/.*\.loader\.js/i,
-    /UnityEngine/i
+    /UnityEngine/i,
   ];
 
-  return unityIndicators.some(pattern => pattern.test(html));
+  return unityIndicators.some((pattern) => pattern.test(html));
 }
 
 /**
@@ -122,17 +122,28 @@ export function injectPolyfills(html: Buffer | string): Buffer {
   if (headMatch) {
     const headOpenTag = headMatch[0];
     const insertPosition = htmlString.indexOf(headOpenTag) + headOpenTag.length;
-    htmlString = htmlString.slice(0, insertPosition) + polyfillsToInject + htmlString.slice(insertPosition);
+    htmlString =
+      htmlString.slice(0, insertPosition) + polyfillsToInject + htmlString.slice(insertPosition);
   } else {
     // No <head> tag, try to inject after <html>
     const htmlMatch = htmlString.match(/<html[^>]*>/i);
     if (htmlMatch) {
       const htmlOpenTag = htmlMatch[0];
       const insertPosition = htmlString.indexOf(htmlOpenTag) + htmlOpenTag.length;
-      htmlString = htmlString.slice(0, insertPosition) + '<head>' + polyfillsToInject + '</head>' + htmlString.slice(insertPosition);
+      htmlString =
+        htmlString.slice(0, insertPosition) +
+        '<head>' +
+        polyfillsToInject +
+        '</head>' +
+        htmlString.slice(insertPosition);
     } else {
       // No <html> or <head> tag, prepend to entire content
-      htmlString = '<!DOCTYPE html><html><head>' + polyfillsToInject + '</head><body>' + htmlString + '</body></html>';
+      htmlString =
+        '<!DOCTYPE html><html><head>' +
+        polyfillsToInject +
+        '</head><body>' +
+        htmlString +
+        '</body></html>';
     }
   }
 
diff --git a/game-service/src/utils/logger.ts b/game-service/src/utils/logger.ts
index 4c9d0cb..87cf81c 100644
--- a/game-service/src/utils/logger.ts
+++ b/game-service/src/utils/logger.ts
@@ -6,7 +6,9 @@ import fs from 'fs';
 // In Docker (production): defaults to /app/logs/game-service.log
 // In local dev: no file logging unless LOG_FILE is explicitly set
 const logLevel = process.env.LOG_LEVEL || 'info';
-const logFile = process.env.LOG_FILE || (process.env.NODE_ENV === 'production' ? '/app/logs/game-service.log' : undefined);
+const logFile =
+  process.env.LOG_FILE ||
+  (process.env.NODE_ENV === 'production' ? '/app/logs/game-service.log' : undefined);
 
 // Try to import OpenTelemetry API for trace context
 let trace: any = null;
@@ -34,7 +36,7 @@ function getTraceContext(): { trace_id?: string; span_id?: string } {
       const spanContext = activeSpan.spanContext();
       return {
         trace_id: spanContext.traceId,
-        span_id: spanContext.spanId
+        span_id: spanContext.spanId,
       };
     }
   } catch {
@@ -49,13 +51,13 @@ function getTraceContext(): { trace_id?: string; span_id?: string } {
  */
 function getSeverityNumber(level: string): number {
   const severityMap: Record<string, number> = {
-    error: 17,   // ERROR
-    warn: 13,    // WARN
-    info: 9,     // INFO
-    http: 9,     // INFO
-    verbose: 5,  // DEBUG
-    debug: 5,    // DEBUG
-    silly: 1     // TRACE
+    error: 17, // ERROR
+    warn: 13, // WARN
+    info: 9, // INFO
+    http: 9, // INFO
+    verbose: 5, // DEBUG
+    debug: 5, // DEBUG
+    silly: 1, // TRACE
   };
   return severityMap[level] || 9;
 }
@@ -103,8 +105,8 @@ const transports: winston.transport[] = [
         }
         return msg;
       })
-    )
-  })
+    ),
+  }),
 ];
 
 // Track file transport for diagnostics
@@ -133,7 +135,9 @@ if (logFile) {
       fs.unlinkSync(testFile);
       console.log(`[Logger]   Directory is writable`);
     } catch (writeError) {
-      throw new Error(`Log directory is not writable: ${writeError instanceof Error ? writeError.message : writeError}`);
+      throw new Error(
+        `Log directory is not writable: ${writeError instanceof Error ? writeError.message : writeError}`
+      );
     }
 
     // Create file transport with OTEL-compatible JSON format
@@ -147,7 +151,7 @@ if (logFile) {
       ),
       maxsize: 10485760, // 10MB
       maxFiles: 5,
-      tailable: true
+      tailable: true,
     });
 
     // Add error handler to catch write failures
@@ -177,7 +181,7 @@ export const logger = winston.createLogger({
     winston.format.json()
   ),
   defaultMeta: { service: 'flashpoint-game-service' },
-  transports
+  transports,
 });
 
 /**
@@ -197,7 +201,7 @@ export function getLoggingStatus(): {
     filePath: logFile || null,
     fileError: fileLoggingError?.message || null,
     logLevel,
-    otelIntegration: trace !== null
+    otelIntegration: trace !== null,
   };
 }
 
diff --git a/game-service/src/utils/pathSecurity.test.ts b/game-service/src/utils/pathSecurity.test.ts
index f881bb8..d19bbf9 100644
--- a/game-service/src/utils/pathSecurity.test.ts
+++ b/game-service/src/utils/pathSecurity.test.ts
@@ -1,6 +1,10 @@
 import { describe, it, expect } from 'vitest';
 import path from 'path';
-import { sanitizeAndValidatePath, validatePathInAllowedDirectories, sanitizeUrlPath } from './pathSecurity';
+import {
+  sanitizeAndValidatePath,
+  validatePathInAllowedDirectories,
+  sanitizeUrlPath,
+} from './pathSecurity';
 
 describe('pathSecurity', () => {
   describe('sanitizeAndValidatePath', () => {
@@ -53,10 +57,7 @@ describe('pathSecurity', () => {
   });
 
   describe('validatePathInAllowedDirectories', () => {
-    const allowedBases = [
-      path.resolve('/var/www/htdocs'),
-      path.resolve('/var/www/cgi-bin'),
-    ];
+    const allowedBases = [path.resolve('/var/www/htdocs'), path.resolve('/var/www/cgi-bin')];
 
     it('should allow paths in first base directory', () => {
       const result = validatePathInAllowedDirectories(allowedBases, 'files/game.swf');
diff --git a/game-service/src/utils/pathSecurity.ts b/game-service/src/utils/pathSecurity.ts
index 9770c81..c032d6b 100644
--- a/game-service/src/utils/pathSecurity.ts
+++ b/game-service/src/utils/pathSecurity.ts
@@ -100,9 +100,9 @@ export function sanitizeUrlPath(urlPath: string): string {
   // Note: We allow '..' because it will be handled by sanitizeAndValidatePath
   // But we check for obviously malicious patterns
   const dangerousPatterns = [
-    /\.\.\\/g,  // ..\ (Windows path traversal)
-    /\.\.%2[fF]/g,  // URL encoded ../
-    /\.\.%5[cC]/g,  // URL encoded ..\
+    /\.\.\\/g, // ..\ (Windows path traversal)
+    /\.\.%2[fF]/g, // URL encoded ../
+    /\.\.%5[cC]/g, // URL encoded ..\
   ];
 
   for (const pattern of dangerousPatterns) {
diff --git a/game-service/src/validation/schemas.ts b/game-service/src/validation/schemas.ts
index 4264b0d..358ba3d 100644
--- a/game-service/src/validation/schemas.ts
+++ b/game-service/src/validation/schemas.ts
@@ -10,7 +10,8 @@ import { z } from 'zod';
  * POST /mount/:gameId
  */
 export const mountGameSchema = z.object({
-  gameId: z.string()
+  gameId: z
+    .string()
     .min(1, 'Game ID is required')
     .max(255, 'Game ID is too long')
     .regex(/^[a-zA-Z0-9\-_]+$/, 'Game ID contains invalid characters'),
@@ -21,7 +22,8 @@ export const mountGameSchema = z.object({
  * DELETE /mount/:gameId
  */
 export const unmountGameSchema = z.object({
-  gameId: z.string()
+  gameId: z
+    .string()
     .min(1, 'Game ID is required')
     .max(255, 'Game ID is too long')
     .regex(/^[a-zA-Z0-9\-_]+$/, 'Game ID contains invalid characters'),
@@ -32,7 +34,8 @@ export const unmountGameSchema = z.object({
  * GET /{path}
  */
 export const filePathSchema = z.object({
-  path: z.string()
+  path: z
+    .string()
     .min(1, 'Path is required')
     .max(2048, 'Path is too long')
     // Block null bytes and obviously malicious patterns
@@ -54,7 +57,8 @@ export const filePathSchema = z.object({
 /**
  * Schema for hostname validation
  */
-export const hostnameSchema = z.string()
+export const hostnameSchema = z
+  .string()
   .min(1, 'Hostname is required')
   .max(253, 'Hostname is too long')
   .regex(/^[a-zA-Z0-9][a-zA-Z0-9\-_.]*[a-zA-Z0-9]$/, {
diff --git a/game-service/src/zip-manager.ts b/game-service/src/zip-manager.ts
index f965639..1162d69 100644
--- a/game-service/src/zip-manager.ts
+++ b/game-service/src/zip-manager.ts
@@ -32,7 +32,7 @@ export class ZipManager {
       // Update access time on get
       updateAgeOnGet: true,
       // Don't update on has() check
-      updateAgeOnHas: false
+      updateAgeOnHas: false,
     });
   }
 
@@ -134,9 +134,9 @@ export class ZipManager {
   async findFile(relPath: string): Promise<{ data: Buffer; mountId: string } | null> {
     // Try with different prefixes (different ZIP structures)
     const pathsToTry = [
-      `content/${relPath}`,       // Most common: content/domain/path
-      `htdocs/${relPath}`,        // Standard: htdocs/domain/path
-      relPath,                     // No prefix: domain/path
+      `content/${relPath}`, // Most common: content/domain/path
+      `htdocs/${relPath}`, // Standard: htdocs/domain/path
+      relPath, // No prefix: domain/path
       `Legacy/htdocs/${relPath}`, // Full path: Legacy/htdocs/domain/path
     ];
 
@@ -201,7 +201,7 @@ export class ZipManager {
 
       if (pattern) {
         const regex = new RegExp(pattern, 'i');
-        files = files.filter(f => regex.test(f));
+        files = files.filter((f) => regex.test(f));
       }
 
       return files;
@@ -224,7 +224,7 @@ export class ZipManager {
   async unmountAll(): Promise<void> {
     logger.info(`[ZipManager] Unmounting all ZIPs (${this.mountedZips.size})...`);
 
-    const promises = Array.from(this.mountedZips.keys()).map(id => this.unmount(id));
+    const promises = Array.from(this.mountedZips.keys()).map((id) => this.unmount(id));
     await Promise.all(promises);
 
     logger.info(`[ZipManager] ✓ All ZIPs unmounted`);
diff --git a/game-service/vitest.config.ts b/game-service/vitest.config.ts
index 8b54002..99919ab 100644
--- a/game-service/vitest.config.ts
+++ b/game-service/vitest.config.ts
@@ -7,12 +7,7 @@ export default defineConfig({
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html'],
-      exclude: [
-        'node_modules/',
-        'dist/',
-        '**/*.test.ts',
-        '**/*.spec.ts',
-      ],
+      exclude: ['node_modules/', 'dist/', '**/*.test.ts', '**/*.spec.ts'],
     },
   },
 });