### Install Trunk CLI

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Installs the Trunk CLI for linting and formatting. Alternative installation methods are available in the Trunk documentation.

```shell
curl https://get.trunk.io -fsSL | bash
```

--------------------------------

### Application Startup Sequence

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Details the steps involved in starting the application, including database migrations, asynchronous startup tasks like initializing scheduled jobs and loading caches, and finally starting the ASGI server.

```text
1. alembic upgrade head          # Run database migrations
2. startup.main()                # Async startup tasks
   ├── Initialize scheduled jobs (RQ Scheduler)
   │   ├── cleanup_netplay
   │   ├── scan_library (if ENABLE_SCHEDULED_RESCAN)
   │   ├── update_switch_titledb
   │   ├── update_launchbox_metadata
   │   ├── convert_images_to_webp
   │   └── sync_retroachievements_progress
   └── Load fixture caches into Redis
       ├── mame_index.json
       ├── scummvm_index.json
       ├── ps1/ps2/psp serial indexes
       └── known_bios_files.json
3. uvicorn.run("main:app")       # Start ASGI server
   └── FastAPI lifespan
       ├── Create aiohttp.ClientSession
       ├── Create httpx.AsyncClient
       └── Store in app.state + context vars
```

--------------------------------

### Install uv and Python Dependencies

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Installs the uv package manager and then synchronizes all Python dependencies for development.

```shell
curl -LsSf https://astral.sh/uv/install.sh | sh

uv venv
source .venv/bin/activate
uv sync --all-extras --dev
```

--------------------------------

### Install System Dependencies

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Installs necessary system libraries for MariaDB and PostgreSQL. RAHasher build is optional and not supported on macOS.

```shell
# https://mariadb.com/docs/skysql-previous-release/connect/programming-languages/c/install/#Installation_via_Package_Repository_(Linux):
sudo apt install libmariadb3 libmariadb-dev libpq-dev

# Build and configure RAHasher (optional)
# This is only required to calculate RA hashes
# Users on macOS can skip this step as RAHasher is not supported
git clone --recursive https://github.com/RetroAchievements/RALibretro.git
cd ./RALibretro
git checkout 1.8.3
git submodule update --init --recursive
make HAVE_CHD=1 -f ./Makefile.RAHasher
cp ./bin64/RAHasher /usr/bin/RAHasher
```

--------------------------------

### Run Backend Application

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Starts the RomM backend application. Database migrations are handled automatically.

```shell
cd backend
uv run python3 main.py
```

--------------------------------

### Run Frontend Development Server

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Starts the frontend development server for RomM.

```shell
npm run dev
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Installs frontend Node.js dependencies. Requires npm version 9 or higher.

```shell
cd frontend
# npm version >= 9 needed
npm install
```

--------------------------------

### Start Docker Containers

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Starts the RomM application and its dependencies in detached mode.

```shell
docker compose up -d
```

--------------------------------

### Axios Client Setup

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

Configure the base URL and timeout for the Axios API client. This setup is used for all outgoing API requests.

```typescript
const api = axios.create({
  baseURL: "/api",
  timeout: 120000, // 2 minutes
});
```

--------------------------------

### SQLAlchemy Engine and Session Setup

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Configures the synchronous SQLAlchemy engine and session factory for database interactions. Ensure database connection URL is correctly set in configuration.

```python
sync_engine = create_engine(
    ConfigManager.get_db_engine(),
    pool_pre_ping=True,  # Connection health check
    echo=False,          # SQL logging (DEV_SQL_ECHO overrides)
)
sync_session = sessionmaker(bind=sync_engine, expire_on_commit=False)
```

--------------------------------

### RomM Other API Endpoints

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Lists various other API endpoints for system health, setup, statistics, asset management, firmware, export, netplay, and play sessions.

```markdown
| Router        | Path                                   |
| ------------- | -------------------------------------- |
| Heartbeat     | `GET /api/heartbeat`                   |
| Heartbeat     | `GET /api/heartbeat/metadata/{source}` |
| Heartbeat     | `GET /api/setup/library`               |
| Heartbeat     | `POST /api/setup/platforms`            |
| Stats         | `GET /api/stats`                       |
| Raw           | `HEAD /api/raw/assets/{path}`          |
| Raw           | `GET /api/raw/assets/{path}`           |
| Firmware      | Standard CRUD                          |
| Export        | `POST /api/export/gamelist-xml`        |
| Export        | `POST /api/export/pegasus`             |
| Netplay       | `GET /api/netplay/list`                |
| Play Sessions | `POST /api/play-sessions`              |
| Play Sessions | `GET /api/play-sessions`               |
| Sync          | `/api/sync/*`                          |
```

--------------------------------

### Vue App Startup Sequence

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

Illustrates the order of operations when the Vue application initializes, from creating the app instance to mounting it.

```text
index.html
  └── <script type="module" src="src/main.ts">
        │
        ├── Create Vue app with RomM.vue as root
        ├── Register plugins (Vuetify, Pinia, i18n, Mitt, MD Editor)
        ├── Install Vue Router
        │
        ├── Initialize critical stores (before mount):
        │   ├── authStore.fetchCurrentUser()
        │   ├── configStore.fetchConfig()
        │   ├── heartbeatStore.fetchHeartbeat()
        │   └── tasksStore.fetchTasks()
        │
        └── app.mount("#app")
```

--------------------------------

### Create Mock Structure and Config

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Sets up the necessary directory structure and an empty configuration file for RomM testing.

```shell
mkdir -p romm_mock/library/roms/switch
touch romm_mock/library/roms/switch/metroid.xci
mkdir -p romm_mock/resources
mkdir -p romm_mock/assets
mkdir -p romm_mock/config
touch romm_mock/config/config.yml
```

--------------------------------

### Create Test User and Database

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Creates the necessary test user and database within the MariaDB instance using a SQL script.

```shell
docker exec -i romm-db-dev mariadb -uroot -p<root password> < backend/romm_test/setup.sql
```

--------------------------------

### Filesystem Watcher Configuration

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Explains the filesystem watcher mechanism using `watchfiles` and its configuration for enabling rescans on file changes.

```text
File: watcher.py

Uses `watchfiles` to monitor the library directory for changes. When enabled (`ENABLE_RESCAN_ON_FILESYSTEM_CHANGE`), triggers a rescan after a configurable delay (`RESCAN_ON_FILESYSTEM_CHANGE_DELAY`, default 5 minutes).
```

--------------------------------

### Create Symlinks for Assets

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Creates symbolic links for the library and resources directories to be accessible by the frontend.

```shell
mkdir assets/romm
ln -s ../romm_mock/resources assets/romm/resources
ln -s ../romm_mock/assets assets/romm/assets
```

--------------------------------

### Copy Environment Template

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Copies the environment template file to .env for local configuration.

```shell
cp env.template .env
```

--------------------------------

### Settings Synchronization Data Flow

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

Explains the process of synchronizing user settings between local storage and the backend API, including UI updates.

```text
User changes setting → localStorage updated
  → useUISettings watcher fires
    → PUT /api/users/{id} with ui_settings JSON
      → Backend returns updated user
        → authStore.setCurrentUser(data)
          → On next login: user.ui_settings hydrates localStorage
```

--------------------------------

### ROM Gallery Loading Data Flow

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

Illustrates the sequence of events and API calls involved when the ROM gallery is loaded, from component mount to data updates.

```text
Component mount → romsStore.fetchRoms()
  → cachedApiService.getRoms(params, onBackgroundUpdate)
    → Cache hit? Return cached + background refresh
    → API call: GET /api/roms?platform_id=...&limit=72&offset=0&...
  → _postFetchRoms(): update ROMs, pagination, character index, filter values
  → Components react via reactive getters
```

--------------------------------

### Component Communication Patterns

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

Illustrates common patterns for component communication: props/emit for parent-child, Pinia stores for shared state, and Mitt emitter for cross-component events.

```text
┌─────────────────┐     props/emit     ┌─────────────────┐
│  Parent          │ ←───────────────→ │  Child           │
│  Component       │                    │  Component       │
└────────────────┬─┘                    └────────────────┬─┘
                 │                                       │
            store refs                              store refs
                 │                                       │
                 v                                       v
┌─────────────────────────────────────────────────────────┐
│                    Pinia Stores                          │
└─────────────────────────────────────────────────────────┘
         │
    mitt events (80+ types)
         │
         v
┌─────────────────────────────────────────────────────────┐
│              Cross-Component Events                      │
│  showEditRomDialog, snackbarShow, playGame, etc.        │
└─────────────────────────────────────────────────────────┘
```

--------------------------------

### RQ Priority Queues Configuration

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Lists the priority queues used by RQ (Redis Queue) for managing background tasks, specifying their use cases.

```text
Queue             Use Case                    
high_prio_queue   Urgent operations           
default_queue     Standard background work    
low_prio_queue    Long-running scans, cleanup 
```

--------------------------------

### Build Docker Image

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Builds the Docker image for the RomM application. Use --no-cache to force a rebuild.

```shell
docker compose build  # or `docker compose build --no-cache` to rebuild from scratch
```

--------------------------------

### Frontend Directory Structure Overview

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

This text-based representation outlines the hierarchical organization of the frontend codebase. It details the location of HTML entry points, build configurations, source code, static assets, and various component categories.

```text
frontend/
├── index.html                     # HTML entry point (<div id="app">)
├── package.json                   # Dependencies & scripts
├── vite.config.js                 # Vite build config with plugins
├── tsconfig.json                  # TypeScript configuration
├── eslint.config.js               # ESLint flat config
├── .nvmrc                         # Node 24
│
├── assets/                        # Static assets (logos, platform icons)
├── public/                        # Public static files
│
└── src/
    ├── main.ts                    # Entry point: app creation & plugin init
    ├── RomM.vue                   # Root component
    │
    ├── plugins/                   # Vue plugin setup
    │   ├── index.ts               # Plugin registration (Vuetify, Pinia, i18n, Mitt)
    │   ├── router.ts              # Vue Router (36 routes, guards, permissions)
    │   ├── vuetify.ts             # Vuetify instance (themes, icons)
    │   ├── pinia.ts               # Pinia store with router injection
    │   ├── pinia.d.ts             # Pinia type augmentation ($router)
    │   ├── mdeditor.ts            # Markdown editor with XSS plugin
    │   └── transition/            # View Transitions API polyfill
    │
    ├── layouts/                   # Layout wrappers
    │   ├── Auth.vue               # Authentication pages layout
    │   └── Main.vue               # Authenticated pages layout (+ all dialogs)
    │
    ├── views/                     # Page-level components (routes)
    │   ├── Auth/                  # Setup, Login, ResetPassword, Register
    │   ├── Gallery/               # Platform, Search, Collection variants
    │   ├── Player/                # EmulatorJS, RuffleRS
    │   ├── Settings/              # Profile, UI, Library, Metadata, Admin, Stats
    │   ├── Home.vue               # Dashboard
    │   ├── GameDetails.vue        # ROM detail page (8 tabs)
    │   ├── Scan.vue               # Library scan
    │   ├── Patcher.vue            # ROM patcher
    │   ├── Pair.vue               # Device pairing
    │   └── 404.vue                # Not found
    │
    ├── components/                # ~168 Vue components
    │   ├── common/                # Shared, reusable
    │   │   ├── Collection/        # Collection cards, dialogs (9 components)
    │   │   ├── Dialog/            # LoadingDialog, SearchCover
    │   │   ├── EmptyStates/       # 8 empty state variants
    │   │   ├── Game/              # Game cards, dialogs, controls (48+ components)
    │   │   ├── Navigation/        # AppBar, drawers, nav buttons (13 components)
    │   │   ├── Notifications/     # Snackbar, upload progress
    │   │   └── Platform/          # Platform cards, dialogs (8 components)
    │   ├── Details/               # Game detail sub-components (14+)
    │   ├── Gallery/               # Gallery app bar, filters, skeleton
    │   ├── Home/                  # Dashboard sections (8 components)
    │   ├── Scan/                  # Scan platform component
    │   └── Settings/              # Settings sub-components (25+)
    │       ├── Administration/    # Users, tokens, tasks
    │       ├── ClientApiTokens/   # API token list, create, pair
    │       ├── LibraryManagement/ # Platform bindings, exclusions
    │       ├── MetadataSources/   # Provider config & priority
    │       ├── ServerStats/       # Library stats widgets
    │       ├── UserInterface/     # Theme, view, locale
    │       └── UserProfile/       # Profile, password, avatar
    │
    ├── console/                   # Console mode (TV/gamepad UI)
    │   ├── Layout.vue             # Console layout with input bus
    │   ├── index.css              # Console-specific styles
    │   ├── views/                 # Console pages
    │   │   ├── Home.vue           # Platform grid, collections
    │   │   ├── GamesList.vue      # ROM grid for platform/collection
    │   │   ├── Game.vue           # Game details with spatial nav
    │   │   └── Play.vue           # Emulator in console mode
    │   ├── components/            # Console-specific components (12)
    │   │   ├── GameCard.vue, SystemCard.vue, CollectionCard.vue
    │   │   ├── BackButton.vue, NavigationHint.vue
    │   │   ├── ScreenshotLightbox.vue, SettingsModal.vue
    │   │   └── ArrowKeysIcon.vue, DPadIcon.vue, FaceButtons.vue
    │   ├── composables/
    │   │   ├── useConsoleTheme.ts # Theme management
    │   │   ├── useThemeAssets.ts  # Asset path resolution
    │   │   ├── useBackgroundArt.ts # Double-buffered backgrounds
    │   │   ├── useSpatialNav.ts   # Grid navigation
    │   │   ├── useElementRegistry.ts # Focus management
    │   │   ├── useInputScope.ts   # Scoped input handling
    │   │   └── useRovingDom.ts    # ARIA roving tabindex
    │   ├── input/
    │   │   ├── bus.ts             # Stack-based input scope manager
    │   │   ├── actions.ts         # 12 input actions

```

--------------------------------

### Scan Handler Workflow

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Outlines the step-by-step process executed by the scan handler for library scanning and metadata enrichment. It details platform detection, ROM file processing, metadata provider searches, and database updates.

```text
1. Detect platform folders in LIBRARY_BASE_PATH
2. For each platform:
   ├── Map filesystem slug to canonical platform (via config bindings)
   ├── Query metadata providers for platform info
   └── Create/update platform in DB
3. For each ROM file in platform:
   ├── Parse filename (extract name, tags, region, version)
   ├── Calculate file hashes (CRC32, MD5, SHA1)
   ├── Search metadata providers (in priority order):
   │   ├── IGDB
   │   ├── MobyGames
   │   ├── ScreenScraper
   │   ├── LaunchBox
   │   ├── RetroAchievements
   │   ├── Hasheous (hash-based matching)
   │   ├── Flashpoint
   │   ├── HLTB
   │   └── TheGamesDB
   ├── Download cover art and screenshots
   ├── Build aggregated metadata (RomMetadata)
   └── Create/update ROM in DB
4. Emit real-time progress via Socket.IO
5. Mark missing ROMs (files no longer on filesystem)
```

--------------------------------

### Middleware Stack Execution Order

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Illustrates the order in which middleware components process incoming requests and outgoing responses, showing the flow from the outside-in for requests and inside-out for responses.

```text
Request →  CORS → CSRF → Authentication → Session (Redis) → Context Vars → Endpoint
Response ← CORS ← CSRF ← Authentication ← Session (Redis) ← Context Vars ← Endpoint
```

--------------------------------

### Scheduled Tasks Configuration

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Details the scheduled background tasks, their environment variable toggles, default cron schedules, and descriptions.

```text
Task                              Env Toggle                                         Default Cron       Description            
scan_library                      ENABLE_SCHEDULED_RESCAN                          0 3 * * * (3 AM)   Full library rescan    
update_switch_titledb             ENABLE_SCHEDULED_UPDATE_SWITCH_TITLEDB           0 4 * * *        Update Switch game DB  
update_launchbox_metadata         ENABLE_SCHEDULED_UPDATE_LAUNCHBOX_METADATA       0 4 * * *        Refresh LaunchBox data 
convert_images_to_webp            ENABLE_SCHEDULED_CONVERT_IMAGES_TO_WEBP          0 4 * * *        Image optimization     
sync_retroachievements_progress   ENABLE_SCHEDULED_RETROACHIEVEMENTS_PROGRESS_SYNC 0 4 * * *        Sync RA user progress  
cleanup_netplay                   Always enabled                                 Periodic           Clean stale rooms      
```

--------------------------------

### Socket.IO and Redis Pub/Sub Architecture

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Illustrates the flow of real-time communication from clients to the FastAPI server via Socket.IO, and then to workers through Redis Pub/Sub.

```text
Client  ←──Socket.IO──→  FastAPI (python-socketio)  ←──Redis PubSub──→  Workers
```

--------------------------------

### Backend Test Directory Structure

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Mirrors the backend directory structure for organizing tests. Includes fixtures, adapter tests, configuration tests, endpoint integration tests, handler unit tests, and more.

```text
tests/
├── conftest.py                    # Shared fixtures
├── adapters/services/             # API adapter tests
│   └── cassettes/                 # VCR recorded API responses
├── config/                        # Configuration tests
├── endpoints/                     # Endpoint integration tests
│   ├── test_auth.py
│   ├── test_collections.py
│   ├── roms/
│   └── sockets/
├── handler/                       # Handler unit tests
│   ├── auth/
│   ├── database/
│   ├── filesystem/
│   └── metadata/
├── logger/                        # Logger tests
├── models/                        # Model tests
├── tasks/                         # Task tests
└── utils/                         # Utility tests
```

--------------------------------

### OpenAPI Code Generation Script

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

Run this script to fetch the OpenAPI schema and generate TypeScript interfaces. The schema is fetched from http://127.0.0.1:3000/openapi.json, and types are generated in the __generated__/models/ directory.

```bash
npm run generate
# Fetches http://127.0.0.1:3000/openapi.json
# Generates TypeScript interfaces in __generated__/models/
```

--------------------------------

### Run Linter and Formatter

Source: https://github.com/rommapp/romm/blob/master/DEVELOPER_SETUP.md

Manually runs the Trunk formatter and checker. These actions are also performed automatically on commit.

```shell
trunk fmt
trunk check
```

--------------------------------

### RomM Configuration API Endpoints

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Overview of the configuration API endpoints for managing platforms, versions, and exclusions.

```markdown
| Method | Path                       |
| ------ | -------------------------- |
| GET    | `/`                        |
| POST   | `/system/platforms`        |
| DELETE | `/system/platforms/{slug}` |
| POST   | `/system/versions`         |
| DELETE | `/system/versions/{slug}`  |
| POST   | `/system/exclusions`       |
| DELETE | `/system/exclusions`       |
```

--------------------------------

### Checkout Master Branch

Source: https://github.com/rommapp/romm/blob/master/CONTRIBUTING.md

Switch to the main development branch of the repository. This is typically the branch where new features are integrated.

```bash
git checkout master
```

--------------------------------

### Browser Cache Request Flow

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

Illustrates the request flow when using the experimental browser cache, showing cache hits and background updates. This strategy is used for ROM lists and recent/continue playing data.

```text
Request Flow with Cache:
┌──────────┐    cache hit    ┌──────────┐
│  Component├───────────────→│  Cached   │ → Immediate render
│           │                │  Response │
│           │    meanwhile   │          │
│           │◄───────────────│  Background│ → API fetch
│           │  onBackgroundUpdate       │ → Update if different
└──────────┘                └──────────┘
```

--------------------------------

### Console Mode Architecture

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

Outlines the architecture of the console mode interface, detailing its layout, input handling, theming, navigation, and view components.

```text
Console Layout
├── Input Bus (keyboard + gamepad → actions)
├── Theme System (CSS variables per theme)
├── Spatial Navigation (grid-based focus)
├── Sound Effects (Web Audio synthesis)
│
├── Home View
│   ├── Platform cards (spatial nav)
│   ├── Continue playing
│   └── Collections grid
│
├── Games List View
│   ├── Game cards with lazy loading
│   └── Virtual scrolling
│
├── Game Detail View
│   ├── Description, metadata, screenshots
│   ├── Save state management
│   └── Play button → Emulator
│
└── Play View
    └── EmulatorJS with save/state/BIOS selection
```

--------------------------------

### RomM App Loading Logo Styling

Source: https://github.com/rommapp/romm/blob/master/frontend/index.html

CSS for the application's loading logo, ensuring it's centered and styled appropriately. Includes responsive adjustments for different screen sizes and dark mode support.

```css
#app-loading-logo {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  z-index: 1020 !important;
  background-color: rgba(242, 244, 248) !important;
}

#app-loading-logo img {
  width: 30%;
  height: 30%;
  opacity: 0.1;
}

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: rgba(13, 17, 23) !important;
  }
  #app-loading-logo {
    background-color: rgba(13, 17, 23) !important;
  }
}

@media (max-width: 960px) {
  #app-loading-logo img {
    width: 50%;
    height: 50%;
  }
}
```

--------------------------------

### Heartbeat Store - Server Capability Flags

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

This snippet shows the structure of server capability flags managed by the heartbeat store. These flags inform the frontend about available features and configurations.

```typescript
METADATA_SOURCES: { IGDB, SS, MOBY, RA, STEAMGRIDDB, LAUNCHBOX, ... }
EMULATION: { DISABLE_EMULATOR_JS, DISABLE_RUFFLE_RS }
FRONTEND: { DISABLE_USERPASS_LOGIN, YOUTUBE_BASE_URL }
OIDC: { ENABLED, AUTOLOGIN, PROVIDER, RP_INITIATED_LOGOUT }
TASKS: { scheduled task configurations }
```

--------------------------------

### Request Flow Diagram

Source: https://github.com/rommapp/romm/blob/master/docs/BACKEND_ARCHITECTURE.md

Visualizes the path of an HTTP request through the application, from initial middleware processing to routing, endpoint handling, response serialization, and final response.

```text
HTTP Request
    │
    ├─ Middleware processes request (auth, session, CSRF)
    │
    ├─ FastAPI routes to endpoint handler
    │   └─ @protected_route checks scopes
    │
    ├─ Endpoint calls handler layer
    │   ├─ handler/database/*   → SQLAlchemy queries
    │   ├─ handler/metadata/*   → External API calls
    │   ├─ handler/filesystem/* → File I/O
    │   └─ handler/auth/*       → Token operations
    │
    ├─ Response schema (Pydantic) serializes output
    │
    └─ HTTP Response
```

--------------------------------

### Frontend Component Organization Tiers

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

Illustrates the hierarchical structure of frontend components, categorized into Common, Feature-specific, and Console Mode tiers.

```text
Tier 1: Common (shared, reusable)
├── Collection/     Cards, list items, 6 dialogs
├── Dialog/         Loading, SearchCover
├── EmptyStates/    8 variants (game, platform, collection, firmware, saves...)
├── Game/           Cards, 14 dialogs, PlayBtn, FavBtn, VirtualTable (48+)
├── Navigation/     AppBar, 3 drawers, 10 nav buttons
├── Platform/       Cards, PlatformIcon, 3 dialogs
└── Notifications/  Snackbar, upload progress

Tier 2: Feature-specific
├── Details/        Game detail tabs (14+ sub-components)
├── Gallery/        AppBar variants, filters, skeleton
├── Home/           Dashboard sections (8 components)
├── Scan/           Scan platform component
└── Settings/       25+ settings sub-components

Tier 3: Console Mode
└── console/        12 components + 7 composables + input system
```

--------------------------------

### Vite Path Alias Configuration

Source: https://github.com/rommapp/romm/blob/master/docs/FRONTEND_ARCHITECTURE.md

This JSON snippet shows the path alias configuration for Vite. It maps '@/*' to './src/*', allowing for cleaner import paths throughout the project, such as importing from '@/stores/roms'.

```json
{
  "@/*": "./src/*"
}
```