Merge branch 'main' into cal/dev-46-servers-scheduling-frontend

* Fix theseus lint by adding "unstable" feature to Tauri

* Remove "unstable" feature from tauri in apps/app

.cargo/config.toml

@@ -1,6 +1,6 @@
-# Windows has stack overflows when calling from Tauri, so we increase compiler size
+# Windows has stack overflows when calling from Tauri, so we increase the default stack size used by the compiler
 [target.'cfg(windows)']
 rustflags = ["-C", "link-args=/STACK:16777220"]
 
 [build]
-rustflags = ["--cfg", "tokio_unstable"]
+rustflags = ["--cfg", "tokio_unstable"]

.github/workflows/theseus-release.yml

@@ -32,16 +32,16 @@ jobs:
 
       - name: Rust setup (mac)
         if: startsWith(matrix.platform, 'macos')
-        uses: dtolnay/rust-toolchain@stable
+        uses: actions-rust-lang/setup-rust-toolchain@v1
         with:
-          components: rustfmt, clippy
-          targets: aarch64-apple-darwin, x86_64-apple-darwin
+          rustflags: ''
+          target: x86_64-apple-darwin
 
       - name: Rust setup
         if: "!startsWith(matrix.platform, 'macos')"
-        uses: dtolnay/rust-toolchain@stable
+        uses: actions-rust-lang/setup-rust-toolchain@v1
         with:
-          components: rustfmt, clippy
+          rustflags: ''
 
       - name: Setup rust cache
         uses: actions/cache@v4
@@ -72,10 +72,10 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-rust-target-
 
-      - name: Use Node.js
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version-file: .nvmrc
 
       - name: Install pnpm via corepack
         shell: bash

.github/workflows/turbo-ci.yml

@@ -2,7 +2,7 @@ name: CI
 
 on:
   push:
-    branches: ['main']
+    branches: [main]
   pull_request:
     types: [opened, synchronize]
   merge_group:
@@ -10,71 +10,69 @@ on:
 
 jobs:
   build:
-    name: Build, Test, and Lint
+    name: Lint and Test
     runs-on: ubuntu-22.04
 
+    env:
+      # Ensure pnpm output is colored in GitHub Actions logs
+      FORCE_COLOR: 3
+      # Make cargo nextest successfully ignore projects without tests
+      NEXTEST_NO_TESTS: pass
+
     steps:
-      - name: Check out code
+      - name: 📥 Check out code
         uses: actions/checkout@v4
         with:
           fetch-depth: 2
 
-      - name: Cache turbo build setup
-        uses: actions/cache@v4
-        with:
-          path: .turbo
-          key: ${{ runner.os }}-turbo-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-turbo-
-
-      - name: Install build dependencies
+      - name: 🧰 Install build dependencies
         run: |
           sudo apt-get update
-          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+          sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
 
-      - name: Setup Node.JS environment
+      - name: 🧰 Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: 🧰 Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version-file: .nvmrc
+          cache: pnpm
 
-      - name: Install pnpm via corepack
-        shell: bash
-        run: |
-          corepack enable
-          corepack prepare --activate
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v4
-        name: Setup pnpm cache
+      - name: 🧰 Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
         with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          rustflags: ''
+          components: clippy, rustfmt
+          cache: false
 
-      - name: Install dependencies
+      - name: 🧰 Setup nextest
+        uses: taiki-e/install-action@nextest
+
+      # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
+      # back to a cached cargo install
+      - name: 🧰 Setup cargo-sqlx
+        uses: AlexTMjugador/cache-cargo-install-action@feat/features-support
+        with:
+          tool: sqlx-cli
+          locked: false
+          no-default-features: true
+          features: rustls,postgres
+
+      - name: 💨 Setup Turbo cache
+        uses: rharkor/caching-for-turbo@v1.8
+
+      - name: 🧰 Install dependencies
         run: pnpm install
 
-      - name: Build
-        run: pnpm build
-        env:
-          SQLX_OFFLINE: true
+      - name: ⚙️ Start services
+        run: docker compose up --wait
 
-      - name: Lint
-        run: pnpm lint
-        env:
-          SQLX_OFFLINE: true
+      - name: ⚙️ Setup Labrinth environment and database
+        working-directory: apps/labrinth
+        run: |
+          cp .env.local .env
+          sqlx database setup
 
-      - name: Start docker compose
-        run: docker compose up -d
-
-      - name: Test
-        run: pnpm test
-        env:
-          SQLX_OFFLINE: true
-          DATABASE_URL: postgresql://labrinth:labrinth@localhost/postgres
+      - name: 🔍 Lint and test
+        run: pnpm run ci

.idea/vcs.xml

@@ -1,5 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="CommitMessageInspectionProfile">
+    <profile version="1.0">
+      <inspection_tool class="CommitFormat" enabled="true" level="WARNING" enabled_by_default="true" />
+      <inspection_tool class="CommitNamingConvention" enabled="true" level="WARNING" enabled_by_default="true" />
+    </profile>
+  </component>
   <component name="VcsDirectoryMappings">
     <mapping directory="" vcs="Git" />
   </component>

.nvmrc

@@ -0,0 +1 @@
+20.19.2

Cargo.lock

@@ -1379,6 +1379,17 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "613afe47fcd5fac7ccf1db93babcb082c5994d996f20b8b159f2ad1658eb5724"
 
+[[package]]
+name = "chardetng"
+version = "0.1.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "14b8f0b65b7b08ae3c8187e8d77174de20cb6777864c6b832d8ad365999cf1ea"
+dependencies = [
+ "cfg-if",
+ "encoding_rs",
+ "memchr",
+]
+
 [[package]]
 name = "chrono"
 version = "0.4.41"
@@ -8865,6 +8876,7 @@ dependencies = [
  "async_zip",
  "base64 0.22.1",
  "bytes",
+ "chardetng",
  "chrono",
  "daedalus",
  "dashmap",
@@ -8872,6 +8884,7 @@ dependencies = [
  "discord-rich-presence",
  "dunce",
  "either",
+ "encoding_rs",
  "enumset",
  "flate2",
  "fs4",
@@ -8890,6 +8903,7 @@ dependencies = [
  "serde",
  "serde_ini",
  "serde_json",
+ "serde_with",
  "sha1_smol",
  "sha2",
  "sqlx",

Cargo.toml

@@ -10,6 +10,9 @@ members = [
   "packages/daedalus",
 ]
 
+[workspace.package]
+edition = "2024"
+
 [workspace.dependencies]
 actix-cors = "0.7.1"
 actix-files = "0.6.6"
@@ -21,6 +24,7 @@ actix-web-prom = "0.10.0"
 actix-ws = "0.3.0"
 argon2 = { version = "0.5.3", features = ["std"] }
 ariadne = { path = "packages/ariadne" }
+async_zip = "0.0.17"
 async-compression = { version = "0.4.24", default-features = false }
 async-recursion = "1.1.1"
 async-stripe = { version = "0.41.0", default-features = false, features = [
@@ -31,11 +35,11 @@ async-tungstenite = { version = "0.29.1", default-features = false, features = [
   "futures-03-sink",
 ] }
 async-walkdir = "2.1.0"
-async_zip = "0.0.17"
 base64 = "0.22.1"
 bitflags = "2.9.1"
 bytes = "1.10.1"
 censor = "0.3.0"
+chardetng = "0.1.17"
 chrono = "0.4.41"
 clap = "4.5.40"
 clickhouse = "0.13.3"
@@ -50,6 +54,7 @@ dotenv-build = "0.1.1"
 dotenvy = "0.15.7"
 dunce = "1.0.5"
 either = "1.15.0"
+encoding_rs = "0.8.35"
 enumset = "1.1.6"
 flate2 = "1.1.2"
 fs4 = { version = "0.13.1", default-features = false }
@@ -89,19 +94,19 @@ quartz_nbt = "0.2.9"
 quick-xml = "0.37.5"
 rand = "=0.8.5"  # Locked on 0.8 until argon2 and p256 update to 0.9
 rand_chacha = "=0.3.1"  # Locked on 0.3 until we can update rand to 0.9
-redis = "=0.31.0" # Locked on 0.31 until deadpool-redis updates to 0.32
+redis = "=0.31.0"  # Locked on 0.31 until deadpool-redis updates to 0.32
 regex = "1.11.1"
 reqwest = { version = "0.12.19", default-features = false }
-rust-s3 = { version = "0.35.1", default-features = false, features = [
-  "fail-on-err",
-  "tags",
-  "tokio-rustls-tls",
-] }
 rust_decimal = { version = "1.37.1", features = [
   "serde-with-float",
   "serde-with-str",
 ] }
 rust_iso3166 = "0.1.14"
+rust-s3 = { version = "0.35.1", default-features = false, features = [
+  "fail-on-err",
+  "tags",
+  "tokio-rustls-tls",
+] }
 rusty-money = "0.4.1"
 sentry = { version = "0.38.1", default-features = false, features = [
   "backtrace",
@@ -113,12 +118,12 @@ sentry = { version = "0.38.1", default-features = false, features = [
 ] }
 sentry-actix = "0.38.1"
 serde = "1.0.219"
-serde-xml-rs = "0.8.1"  # Also an XML (de)serializer, consider dropping yaserde in favor of this
 serde_bytes = "0.11.17"
 serde_cbor = "0.11.2"
 serde_ini = "0.2.0"
 serde_json = "1.0.140"
 serde_with = "3.12.0"
+serde-xml-rs = "0.8.1"  # Also an XML (de)serializer, consider dropping yaserde in favor of this
 sha1 = "0.10.6"
 sha1_smol = { version = "1.0.1", features = ["std"] }
 sha2 = "0.10.9"
@@ -168,6 +173,44 @@ zip = { version = "4.0.0", default-features = false, features = [
 ] }
 zxcvbn = "3.1.0"
 
+[workspace.lints.clippy]
+bool_to_int_with_if = "warn"
+borrow_as_ptr = "warn"
+cfg_not_test = "warn"
+clear_with_drain = "warn"
+cloned_instead_of_copied = "warn"
+collection_is_never_read = "warn"
+dbg_macro = "warn"
+default_trait_access = "warn"
+explicit_iter_loop = "warn"
+filter_map_next = "warn"
+flat_map_option = "warn"
+format_push_string = "warn"
+get_unwrap = "warn"
+large_include_file = "warn"
+large_stack_arrays = "warn"
+manual_assert = "warn"
+manual_instant_elapsed = "warn"
+manual_is_variant_and = "warn"
+manual_let_else = "warn"
+map_unwrap_or = "warn"
+match_bool = "warn"
+needless_collect = "warn"
+negative_feature_names = "warn"
+non_std_lazy_statics = "warn"
+pathbuf_init_then_push = "warn"
+read_zero_byte_vec = "warn"
+redundant_clone = "warn"
+redundant_feature_names = "warn"
+redundant_type_annotations = "warn"
+todo = "warn"
+unnested_or_patterns = "warn"
+wildcard_dependencies = "warn"
+
+[workspace.lints.rust]
+# Turn warnings into errors by default
+warnings = "deny"
+
 [patch.crates-io]
 wry = { git = "https://github.com/modrinth/wry", rev = "cafdaa9" }
 

apps/app-frontend/package.json

@@ -9,18 +9,19 @@
     "tsc:check": "vue-tsc --noEmit",
     "lint": "eslint . && prettier --check .",
     "fix": "eslint . --fix && prettier --write .",
-    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/helpers,src/pages,src/store}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace"
+    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/helpers,src/pages,src/store}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
+    "test": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "@geometrically/minecraft-motd-parser": "^1.1.4",
     "@modrinth/assets": "workspace:*",
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
     "@sentry/vue": "^8.27.0",
-    "@geometrically/minecraft-motd-parser": "^1.1.4",
     "@tauri-apps/api": "^2.5.0",
     "@tauri-apps/plugin-dialog": "^2.2.1",
-    "@tauri-apps/plugin-os": "^2.2.1",
     "@tauri-apps/plugin-opener": "^2.2.6",
+    "@tauri-apps/plugin-os": "^2.2.1",
     "@tauri-apps/plugin-updater": "^2.7.1",
     "@tauri-apps/plugin-window-state": "^2.2.2",
     "@vintl/vintl": "^4.4.1",
@@ -39,11 +40,12 @@
     "@eslint/compat": "^1.1.1",
     "@formatjs/cli": "^6.2.12",
     "@nuxt/eslint-config": "^0.5.6",
+    "@taijased/vue-render-tracker": "^1.0.7",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.9.1",
     "eslint-config-custom": "workspace:*",
-    "eslint-plugin-turbo": "^2.1.1",
+    "eslint-plugin-turbo": "^2.5.4",
     "postcss": "^8.4.39",
     "prettier": "^3.2.5",
     "sass": "^1.74.1",
@@ -51,8 +53,7 @@
     "tsconfig": "workspace:*",
     "typescript": "^5.5.4",
     "vite": "^5.4.6",
-    "vue-tsc": "^2.1.6",
-    "@taijased/vue-render-tracker": "^1.0.7"
+    "vue-tsc": "^2.1.6"
   },
   "packageManager": "pnpm@9.4.0",
   "web-types": "../../web-types.json"

apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue

@@ -25,9 +25,8 @@ const editProfileObject = computed(() => {
     hooks?: Hooks
   } = {}
 
-  if (overrideHooks.value) {
-    editProfile.hooks = hooks.value
-  }
+  // When hooks are not overridden per-instance, we want to clear them
+  editProfile.hooks = overrideHooks.value ? hooks.value : {}
 
   return editProfile
 })

apps/app-frontend/src/components/ui/world/WorldItem.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import type { ServerStatus, ServerWorld, World } from '@/helpers/worlds.ts'
-import {
-  set_world_display_status,
-  getWorldIdentifier,
-  showWorldInFolder,
-} from '@/helpers/worlds.ts'
+import type { ServerStatus, ServerWorld, SingleplayerWorld, World } from '@/helpers/worlds.ts'
+import { set_world_display_status, getWorldIdentifier } from '@/helpers/worlds.ts'
 import { formatNumber, getPingLevel } from '@modrinth/utils'
 import {
   useRelativeTime,
@@ -49,6 +45,7 @@ const router = useRouter()
 
 const emit = defineEmits<{
   (e: 'play' | 'play-instance' | 'update' | 'stop' | 'refresh' | 'edit' | 'delete'): void
+  (e: 'open-folder', world: SingleplayerWorld): void
 }>()
 
 const props = withDefaults(
@@ -380,8 +377,7 @@ const messages = defineMessages({
               {
                 id: 'open-folder',
                 shown: world.type === 'singleplayer',
-                action: () =>
-                  world.type === 'singleplayer' ? showWorldInFolder(instancePath, world.path) : {},
+                action: () => (world.type === 'singleplayer' ? emit('open-folder', world) : {}),
               },
               {
                 divider: true,

apps/app-frontend/src/pages/instance/Index.vue

@@ -32,7 +32,11 @@
         <template #actions>
           <div class="flex gap-2">
             <ButtonStyled
-              v-if="instance.install_stage.includes('installing')"
+              v-if="
+                ['installing', 'pack_installing', 'minecraft_installing'].includes(
+                  instance.install_stage,
+                )
+              "
               color="brand"
               size="large"
             >

apps/app-frontend/src/pages/instance/Worlds.vue

@@ -86,6 +86,7 @@
             world.type === 'server' ? editServerModal?.show(world) : editWorldModal?.show(world)
         "
         @delete="() => promptToRemoveWorld(world)"
+        @open-folder="(world: SingleplayerWorld) => showWorldInFolder(instance.path, world.path)"
       />
     </div>
   </div>
@@ -151,6 +152,7 @@ import {
   hasQuickPlaySupport,
   refreshWorlds,
   handleDefaultProfileUpdateEvent,
+  showWorldInFolder,
 } from '@/helpers/worlds.ts'
 import AddServerModal from '@/components/ui/world/modal/AddServerModal.vue'
 import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'

apps/app-playground/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "theseus_playground"
 version = "0.0.0"
-edition = "2024"
+edition.workspace = true
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
@@ -9,3 +9,6 @@ edition = "2024"
 theseus = { workspace = true, features = ["cli"] }
 tokio = { workspace = true, features = ["macros", "rt-multi-thread"] }
 enumset.workspace = true
+
+[lints]
+workspace = true

apps/app-playground/package.json

@@ -2,9 +2,9 @@
   "name": "@modrinth/app-playground",
   "scripts": {
     "build": "cargo build --release",
-    "lint": "cargo fmt --check && cargo clippy --all-targets --all-features -- -D warnings",
-    "fix": "cargo fmt && cargo clippy --fix",
+    "lint": "cargo fmt --check && cargo clippy --all-targets",
+    "fix": "cargo clippy --all-targets --fix --allow-dirty && cargo fmt",
     "dev": "cargo run",
-    "test": "cargo test"
+    "test": "cargo nextest run --all-targets --no-fail-fast"
   }
 }

apps/app/Cargo.toml

@@ -4,8 +4,7 @@ version = "0.9.5"
 description = "The Modrinth App is a desktop application for managing your Minecraft mods"
 license = "GPL-3.0-only"
 repository = "https://github.com/modrinth/code/apps/app/"
-edition = "2024"
-build = "build.rs"
+edition.workspace = true
 
 [build-dependencies]
 tauri-build = { workspace = true, features = ["codegen"] }
@@ -17,7 +16,7 @@ serde_json.workspace = true
 serde = { workspace = true, features = ["derive"] }
 serde_with.workspace = true
 
-tauri = { workspace = true, features = ["devtools", "macos-private-api", "protocol-asset", "unstable"] }
+tauri = { workspace = true, features = ["devtools", "macos-private-api", "protocol-asset"] }
 tauri-plugin-window-state.workspace = true
 tauri-plugin-deep-link.workspace = true
 tauri-plugin-os.workspace = true
@@ -56,3 +55,6 @@ default = ["custom-protocol"]
 # DO NOT remove this
 custom-protocol = ["tauri/custom-protocol"]
 updater = []
+
+[lints]
+workspace = true

apps/app/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@modrinth/app",
   "scripts": {
-    "build": "tauri build",
     "tauri": "tauri",
+    "build": "tauri build",
     "dev": "tauri dev",
-    "test": "cargo test",
-    "lint": "cargo fmt --check && cargo clippy --all-targets -- -D warnings",
-    "fix": "cargo fmt && cargo clippy --fix"
+    "test": "cargo nextest run --all-targets --no-fail-fast",
+    "lint": "cargo fmt --check && cargo clippy --all-targets",
+    "fix": "cargo clippy --all-targets --fix --allow-dirty && cargo fmt"
   },
   "devDependencies": {
     "@tauri-apps/cli": "2.5.0"

apps/app/src/api/utils.rs

@@ -37,6 +37,7 @@ pub fn get_os() -> OS {
     let os = OS::MacOS;
     os
 }
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[allow(clippy::enum_variant_names)]
 pub enum OS {

apps/app/src/api/worlds.rs

@@ -43,7 +43,7 @@ pub async fn get_recent_worlds<R: Runtime>(
         display_statuses.unwrap_or(EnumSet::all()),
     )
     .await?;
-    for world in result.iter_mut() {
+    for world in &mut result {
         adapt_world_icon(&app_handle, &mut world.world);
     }
     Ok(result)
@@ -55,7 +55,7 @@ pub async fn get_profile_worlds<R: Runtime>(
     path: &str,
 ) -> Result<Vec<World>> {
     let mut result = worlds::get_profile_worlds(path).await?;
-    for world in result.iter_mut() {
+    for world in &mut result {
         adapt_world_icon(&app_handle, world);
     }
     Ok(result)

apps/app/src/macos/deep_link.rs

@@ -11,7 +11,8 @@ pub fn get_or_init_payload<R: Runtime, M: Manager<R>>(
     manager: &M,
 ) -> InitialPayload {
     let initial_payload = manager.try_state::<InitialPayload>();
-    let mtx = if let Some(initial_payload) = initial_payload {
+
+    if let Some(initial_payload) = initial_payload {
         initial_payload.inner().clone()
     } else {
         tracing::info!("No initial payload found, creating new");
@@ -22,7 +23,5 @@ pub fn get_or_init_payload<R: Runtime, M: Manager<R>>(
         manager.manage(payload.clone());
 
         payload
-    };
-
-    mtx
+    }
 }

apps/app/src/main.rs

@@ -197,7 +197,7 @@ fn main() {
             {
                 let payload = macos::deep_link::get_or_init_payload(app);
 
-                let mtx_copy = payload.payload.clone();
+                let mtx_copy = payload.payload;
                 app.listen("deep-link://new-url", move |url| {
                     let mtx_copy_copy = mtx_copy.clone();
                     let request = url.payload().to_owned();
@@ -229,7 +229,6 @@ fn main() {
                 tauri::async_runtime::spawn(api::utils::handle_command(
                     payload,
                 ));
-                dbg!(url);
             });
 
             #[cfg(not(target_os = "linux"))]
@@ -273,22 +272,22 @@ fn main() {
 
     match app {
         Ok(app) => {
-            #[allow(unused_variables)]
             app.run(|app, event| {
+                #[cfg(not(target_os = "macos"))]
+                drop((app, event));
                 #[cfg(target_os = "macos")]
                 if let tauri::RunEvent::Opened { urls } = event {
                     tracing::info!("Handling webview open {urls:?}");
 
                     let file = urls
                         .into_iter()
-                        .filter_map(|url| url.to_file_path().ok())
-                        .next();
+                        .find_map(|url| url.to_file_path().ok());
 
                     if let Some(file) = file {
                         let payload =
                             macos::deep_link::get_or_init_payload(app);
 
-                        let mtx_copy = payload.payload.clone();
+                        let mtx_copy = payload.payload;
                         let request = file.to_string_lossy().to_string();
                         tauri::async_runtime::spawn(async move {
                             let mut payload = mtx_copy.lock().await;

apps/app/turbo.jsonc

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../node_modules/turbo/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    // Running Clippy and tests on a Tauri application requires
+    // the frontend to be built at least once first
+    "lint": {
+      "dependsOn": ["@modrinth/app-frontend#build"]
+    },
+    "test": {
+      "dependsOn": ["@modrinth/app-frontend#build"]
+    }
+  }
+}

apps/daedalus_client/Cargo.toml

@@ -2,7 +2,7 @@
 name = "daedalus_client"
 version = "0.2.2"
 authors = ["Jai A <jai@modrinth.com>"]
-edition = "2024"
+edition.workspace = true
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
@@ -28,3 +28,6 @@ tracing-error.workspace = true
 
 tracing.workspace = true
 tracing-subscriber = { workspace = true, features = ["env-filter"] }
+
+[lints]
+workspace = true

apps/daedalus_client/Dockerfile

@@ -1,4 +1,4 @@
-FROM rust:1.86.0 AS build
+FROM rust:1.87.0 AS build
 ENV PKG_CONFIG_ALLOW_CROSS=1
 
 WORKDIR /usr/src/daedalus

apps/daedalus_client/package.json

@@ -2,10 +2,10 @@
   "name": "@modrinth/daedalus_client",
   "scripts": {
     "build": "cargo build --release",
-    "lint": "cargo fmt --check && cargo clippy --all-targets --all-features -- -D warnings",
-    "fix": "cargo fmt && cargo clippy --fix",
+    "lint": "cargo fmt --check && cargo clippy --all-targets",
+    "fix": "cargo clippy --all-targets --fix --allow-dirty && cargo fmt",
     "dev": "cargo run",
-    "test": "cargo test"
+    "test": "cargo nextest run --all-targets --no-fail-fast"
   },
   "dependencies": {
     "@modrinth/daedalus": "workspace:*"

apps/daedalus_client/src/minecraft.rs

@@ -52,8 +52,7 @@ pub async fn fetch(
                     if modrinth_version
                         .original_sha1
                         .as_ref()
-                        .map(|x| x == &version.sha1)
-                        .unwrap_or(false)
+                        .is_some_and(|x| x == &version.sha1)
                     {
                         existing_versions.push(modrinth_version);
                     } else {

apps/docs/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro check && astro build",
+    "lint": "astro check",
+    "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
@@ -18,4 +19,4 @@
     "starlight-openapi": "^0.14.0",
     "typescript": "^5.8.2"
   }
-}
+}

apps/frontend/.env.local

@@ -2,4 +2,3 @@ BASE_URL=http://127.0.0.1:8000/v2/
 BROWSER_BASE_URL=http://127.0.0.1:8000/v2/
 PYRO_BASE_URL=https://staging-archon.modrinth.com
 PROD_OVERRIDE=true
-

apps/frontend/package.json

@@ -10,7 +10,8 @@
     "postinstall": "nuxi prepare",
     "lint": "eslint . && prettier --check .",
     "fix": "eslint . --fix && prettier --write .",
-    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace"
+    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
+    "test": "nuxi build"
   },
   "devDependencies": {
     "@formatjs/cli": "^6.2.12",
@@ -40,10 +41,12 @@
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
     "@pinia/nuxt": "^0.5.1",
+    "@types/three": "^0.172.0",
     "@vintl/vintl": "^4.4.1",
     "@vueuse/core": "^11.1.0",
     "ace-builds": "^1.36.2",
     "ansi-to-html": "^0.7.2",
+    "cronstrue": "^2.61.0",
     "dayjs": "^1.11.7",
     "dompurify": "^3.1.7",
     "floating-vue": "^5.2.2",
@@ -58,7 +61,6 @@
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
     "three": "^0.172.0",
-    "@types/three": "^0.172.0",
     "vue-multiselect": "3.0.0-alpha.2",
     "vue-typed-virtual-list": "^1.0.10",
     "vue3-ace-editor": "^2.2.4",

apps/frontend/src/components/ui/Avatar.vue

@@ -1,46 +0,0 @@
-<template>
-  <OmorphiaAvatar
-    :src="src"
-    :alt="alt"
-    :size="size"
-    :circle="circle"
-    :no-shadow="noShadow"
-    :loading="loading"
-    :raised="raised"
-  />
-</template>
-
-<script setup>
-import { Avatar as OmorphiaAvatar } from "@modrinth/ui";
-
-const props = defineProps({
-  src: {
-    type: String,
-    default: null,
-  },
-  alt: {
-    type: String,
-    default: "",
-  },
-  size: {
-    type: String,
-    default: "2rem",
-  },
-  circle: {
-    type: Boolean,
-    default: false,
-  },
-  noShadow: {
-    type: Boolean,
-    default: false,
-  },
-  loading: {
-    type: String,
-    default: "eager",
-  },
-  raised: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>

apps/frontend/src/components/ui/Badge.vue

@@ -1,131 +0,0 @@
-<template>
-  <span
-    :class="
-      'badge flex items-center gap-1 font-semibold text-secondary ' + color + ' type--' + type
-    "
-  >
-    <template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>
-
-    <!-- User roles -->
-    <template v-else-if="type === 'admin'"> <ModrinthIcon /> Modrinth Team</template>
-    <template v-else-if="type === 'moderator'"> <ModeratorIcon /> Moderator</template>
-    <template v-else-if="type === 'creator'"><CreatorIcon /> Creator</template>
-    <template v-else-if="type === 'plus'"><PlusIcon /> Modrinth Plus</template>
-
-    <!-- Project statuses -->
-    <template v-else-if="type === 'approved'"><GlobeIcon /> Public</template>
-    <template v-else-if="type === 'approved-general'"><CheckIcon /> Approved</template>
-    <template v-else-if="type === 'unlisted' || type === 'withheld'"
-      ><LinkIcon /> Unlisted</template
-    >
-    <template v-else-if="type === 'private'"><LockIcon /> Private</template>
-    <template v-else-if="type === 'scheduled'"> <CalendarIcon /> Scheduled</template>
-    <template v-else-if="type === 'draft'"><DraftIcon /> Draft</template>
-    <template v-else-if="type === 'archived'"> <ArchiveIcon /> Archived</template>
-    <template v-else-if="type === 'rejected'"><CrossIcon /> Rejected</template>
-    <template v-else-if="type === 'processing'"> <ProcessingIcon /> Under review</template>
-
-    <!-- Team members -->
-    <template v-else-if="type === 'accepted'"><CheckIcon /> Accepted</template>
-    <template v-else-if="type === 'pending'"> <ProcessingIcon /> Pending </template>
-
-    <!-- Transaction statuses -->
-    <template v-else-if="type === 'success'"><CheckIcon /> Success</template>
-
-    <!-- Report status -->
-    <template v-else-if="type === 'closed'"> <CloseIcon /> Closed</template>
-
-    <!-- Other -->
-    <template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
-  </span>
-</template>
-
-<script setup>
-import {
-  GlobeIcon,
-  LinkIcon,
-  ModrinthIcon,
-  PlusIcon,
-  ScaleIcon as ModeratorIcon,
-  BoxIcon as CreatorIcon,
-  FileTextIcon as DraftIcon,
-  XIcon as CrossIcon,
-  ArchiveIcon,
-  UpdatedIcon as ProcessingIcon,
-  CheckIcon,
-  LockIcon,
-  CalendarIcon,
-  XCircleIcon as CloseIcon,
-} from "@modrinth/assets";
-import { capitalizeString } from "@modrinth/utils";
-
-defineProps({
-  type: {
-    type: String,
-    required: true,
-  },
-  color: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.badge {
-  .circle {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    display: inline-block;
-    margin-right: 0.25rem;
-    background-color: var(--badge-color);
-  }
-
-  svg {
-    vertical-align: -15%;
-    width: 1em;
-    height: 1em;
-  }
-
-  &.type--closed,
-  &.type--withheld,
-  &.type--rejected,
-  &.red {
-    --badge-color: var(--color-red);
-  }
-
-  &.type--pending,
-  &.type--moderator,
-  &.type--processing,
-  &.type--scheduled,
-  &.orange {
-    --badge-color: var(--color-orange);
-  }
-
-  &.type--accepted,
-  &.type--admin,
-  &.type--success,
-  &.type--approved-general,
-  &.green {
-    --badge-color: var(--color-green);
-  }
-
-  &.type--creator,
-  &.blue {
-    --badge-color: var(--color-blue);
-  }
-
-  &.type--unlisted,
-  &.type--plus,
-  &.purple {
-    --badge-color: var(--color-purple);
-  }
-
-  &.type--private,
-  &.type--approved,
-  &.gray {
-    --badge-color: var(--color-secondary);
-  }
-}
-</style>

apps/frontend/src/components/ui/CopyCode.vue

@@ -1,75 +0,0 @@
-<template>
-  <button class="code" :class="{ copied }" title="Copy code to clipboard" @click="copyText">
-    <span>{{ text }}</span>
-    <CheckIcon v-if="copied" />
-    <ClipboardCopyIcon v-else />
-  </button>
-</template>
-
-<script>
-import { CheckIcon, ClipboardCopyIcon } from "@modrinth/assets";
-
-export default {
-  components: {
-    CheckIcon,
-    ClipboardCopyIcon,
-  },
-  props: {
-    text: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      copied: false,
-    };
-  },
-  methods: {
-    async copyText() {
-      await navigator.clipboard.writeText(this.text);
-      this.copied = true;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.code {
-  color: var(--color-text);
-  display: inline-flex;
-  grid-gap: 0.5rem;
-  font-family: var(--mono-font);
-  font-size: var(--font-size-sm);
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-  background-color: var(--color-code-bg);
-  width: fit-content;
-  border-radius: 10px;
-  user-select: text;
-  transition:
-    opacity 0.5s ease-in-out,
-    filter 0.2s ease-in-out,
-    transform 0.05s ease-in-out,
-    outline 0.2s ease-in-out;
-
-  span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  svg {
-    width: 1em;
-    height: 1em;
-  }
-
-  &:hover {
-    filter: brightness(0.85);
-  }
-
-  &:active {
-    transform: scale(0.95);
-    filter: brightness(0.8);
-  }
-}
-</style>

apps/frontend/src/components/ui/ModerationChecklist.vue

@@ -654,11 +654,11 @@ For a brief rundown of how this works:
         {
           name: "Insufficient",
           resultingMessage: `## Insufficient Gallery Images
-        We ask that projects like yours show off their content using images in the Gallery, or optionally in the Description, in order to effectively and clearly inform users of its content per section 2.1 of [Modrinth's content rules](https://modrinth.com/legal/rules#general-expectations).
-        Keep in mind that you should:
-        - Set a featured image that best represents your project.
-        - Ensure all your images have titles that accurately label the image, and optionally, details on the contents of the image in the images Description.
-        - Upload any relevant images in your Description to your Gallery tab for best results.`,
+We ask that projects like yours show off their content using images in the Gallery, or optionally in the Description, in order to effectively and clearly inform users of its content per section 2.1 of [Modrinth's content rules](https://modrinth.com/legal/rules#general-expectations).
+Keep in mind that you should:
+- Set a featured image that best represents your project.
+- Ensure all your images have titles that accurately label the image, and optionally, details on the contents of the image in the images Description.
+- Upload any relevant images in your Description to your Gallery tab for best results.`,
         },
         {
           name: "Not relevant",

apps/frontend/src/components/ui/NotificationItem.vue

@@ -104,13 +104,13 @@
         </nuxt-link>
         <template v-if="tags.rejectedStatuses.includes(notification.body.new_status)">
           has been
-          <Badge :type="notification.body.new_status" />
+          <ProjectStatusBadge :status="notification.body.new_status" />
         </template>
         <template v-else>
           updated from
-          <Badge :type="notification.body.old_status" />
+          <ProjectStatusBadge :status="notification.body.old_status" />
           to
-          <Badge :type="notification.body.new_status" />
+          <ProjectStatusBadge :status="notification.body.new_status" />
         </template>
         by the moderators.
       </template>
@@ -331,16 +331,13 @@ import {
   XIcon,
   ExternalIcon,
 } from "@modrinth/assets";
-import { useRelativeTime } from "@modrinth/ui";
+import { Avatar, ProjectStatusBadge, CopyCode, useRelativeTime } from "@modrinth/ui";
 import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
 import { getProjectLink, getVersionLink } from "~/helpers/projects.js";
 import { getUserLink } from "~/helpers/users.js";
 import { acceptTeamInvite, removeSelfFromTeam } from "~/helpers/teams.js";
 import { markAsRead } from "~/helpers/notifications.ts";
 import DoubleIcon from "~/components/ui/DoubleIcon.vue";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
 import Categories from "~/components/ui/search/Categories.vue";
 
 const app = useNuxtApp();

apps/frontend/src/components/ui/Pagination.vue

@@ -1,196 +0,0 @@
-<template>
-  <div v-if="count > 1" class="columns paginates">
-    <a
-      :class="{ disabled: page === 1 }"
-      :tabindex="page === 1 ? -1 : 0"
-      class="left-arrow paginate has-icon"
-      aria-label="Previous Page"
-      :href="linkFunction(page - 1)"
-      @click.prevent="page !== 1 ? switchPage(page - 1) : null"
-    >
-      <LeftArrowIcon />
-    </a>
-    <div
-      v-for="(item, index) in pages"
-      :key="'page-' + item + '-' + index"
-      :class="{
-        'page-number': page !== item,
-        shrink: item > 99,
-      }"
-      class="page-number-container"
-    >
-      <div v-if="item === '-'" class="has-icon">
-        <GapIcon />
-      </div>
-      <a
-        v-else
-        :class="{
-          'page-number current': page === item,
-          shrink: item > 99,
-        }"
-        :href="linkFunction(item)"
-        @click.prevent="page !== item ? switchPage(item) : null"
-      >
-        {{ item }}
-      </a>
-    </div>
-
-    <a
-      :class="{
-        disabled: page === pages[pages.length - 1],
-      }"
-      :tabindex="page === pages[pages.length - 1] ? -1 : 0"
-      class="right-arrow paginate has-icon"
-      aria-label="Next Page"
-      :href="linkFunction(page + 1)"
-      @click.prevent="page !== pages[pages.length - 1] ? switchPage(page + 1) : null"
-    >
-      <RightArrowIcon />
-    </a>
-  </div>
-</template>
-
-<script>
-import { GapIcon, LeftArrowIcon, RightArrowIcon } from "@modrinth/assets";
-
-export default {
-  components: {
-    GapIcon,
-    LeftArrowIcon,
-    RightArrowIcon,
-  },
-  props: {
-    page: {
-      type: Number,
-      default: 1,
-    },
-    count: {
-      type: Number,
-      default: 1,
-    },
-    linkFunction: {
-      type: Function,
-      default() {
-        return () => "/";
-      },
-    },
-  },
-  emits: ["switch-page"],
-  computed: {
-    pages() {
-      let pages = [];
-
-      if (this.count > 7) {
-        if (this.page + 3 >= this.count) {
-          pages = [
-            1,
-            "-",
-            this.count - 4,
-            this.count - 3,
-            this.count - 2,
-            this.count - 1,
-            this.count,
-          ];
-        } else if (this.page > 5) {
-          pages = [1, "-", this.page - 1, this.page, this.page + 1, "-", this.count];
-        } else {
-          pages = [1, 2, 3, 4, 5, "-", this.count];
-        }
-      } else {
-        pages = Array.from({ length: this.count }, (_, i) => i + 1);
-      }
-
-      return pages;
-    },
-  },
-  methods: {
-    switchPage(newPage) {
-      this.$emit("switch-page", newPage);
-      if (newPage !== null && newPage !== "" && !isNaN(newPage)) {
-        this.$emit("switch-page", Math.min(Math.max(newPage, 1), this.count));
-      }
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-a {
-  position: relative;
-  color: var(--color-button-text);
-  box-shadow: var(--shadow-raised), var(--shadow-inset);
-
-  padding: 0.5rem 1rem;
-  margin: 0;
-  border-radius: 2rem;
-  background: var(--color-raised-bg);
-
-  transition:
-    opacity 0.5s ease-in-out,
-    filter 0.2s ease-in-out,
-    transform 0.05s ease-in-out,
-    outline 0.2s ease-in-out;
-
-  &.page-number.current {
-    background: var(--color-brand);
-    color: var(--color-brand-inverted);
-    cursor: default;
-    outline: 2px solid transparent;
-  }
-
-  &.paginate.disabled {
-    background-color: transparent;
-    cursor: not-allowed;
-    filter: grayscale(50%);
-    opacity: 0.5;
-  }
-}
-
-.has-icon {
-  display: flex;
-  align-items: center;
-
-  svg {
-    width: 1em;
-  }
-}
-
-.page-number-container,
-a,
-.has-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.paginates {
-  height: 2em;
-  margin: 0.5rem 0;
-
-  > div,
-  .has-icon {
-    margin: 0 0.3em;
-  }
-}
-
-.left-arrow {
-  margin-left: auto !important;
-}
-
-.right-arrow {
-  margin-right: auto !important;
-}
-
-@media screen and (max-width: 400px) {
-  .paginates {
-    font-size: 80%;
-  }
-}
-
-@media screen and (max-width: 530px) {
-  a {
-    width: 2.5rem;
-    padding: 0.5rem 0;
-  }
-}
-</style>

apps/frontend/src/components/ui/ProjectCard.vue

@@ -29,7 +29,7 @@
           {{ author }}
         </nuxt-link>
       </p>
-      <Badge v-if="status && status !== 'approved'" :type="status" class="status" />
+      <ProjectStatusBadge v-if="status && status !== 'approved'" :status="status" class="status" />
     </div>
     <p class="description">
       {{ description }}
@@ -91,18 +91,16 @@
 
 <script>
 import { CalendarIcon, UpdatedIcon, DownloadIcon, HeartIcon } from "@modrinth/assets";
+import { Avatar, ProjectStatusBadge, useRelativeTime } from "@modrinth/ui";
 import Categories from "~/components/ui/search/Categories.vue";
-import Badge from "~/components/ui/Badge.vue";
 import EnvironmentIndicator from "~/components/ui/EnvironmentIndicator.vue";
-import Avatar from "~/components/ui/Avatar.vue";
-import { useRelativeTime } from "@modrinth/ui";
 
 export default {
   components: {
+    ProjectStatusBadge,
     EnvironmentIndicator,
     Avatar,
     Categories,
-    Badge,
     CalendarIcon,
     UpdatedIcon,
     DownloadIcon,

apps/frontend/src/components/ui/report/ReportInfo.vue

@@ -104,12 +104,9 @@
 
 <script setup>
 import { ReportIcon, UnknownIcon, VersionIcon } from "@modrinth/assets";
+import { Avatar, Badge, CopyCode, useRelativeTime } from "@modrinth/ui";
 import { renderHighlightedString } from "~/helpers/highlight.js";
-import { useRelativeTime } from "@modrinth/ui";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
 import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
 
 const formatRelativeTime = useRelativeTime();
 

apps/frontend/src/components/ui/report/ReportsList.vue

@@ -18,6 +18,7 @@
 <script setup>
 import ReportInfo from "~/components/ui/report/ReportInfo.vue";
 import { addReportMessage } from "~/helpers/threads.js";
+import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
 
 defineProps({
   moderation: {
@@ -53,13 +54,13 @@ const threadIds = [
 
 const [{ data: users }, { data: versions }, { data: threads }] = await Promise.all([
   await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
-    useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`),
+    fetchSegmented(userIds, (ids) => `users?ids=${asEncodedJsonArray(ids)}`),
   ),
   await useAsyncData(`versions?ids=${JSON.stringify(versionIds)}`, () =>
-    useBaseFetch(`versions?ids=${encodeURIComponent(JSON.stringify(versionIds))}`),
+    fetchSegmented(versionIds, (ids) => `versions?ids=${asEncodedJsonArray(ids)}`),
   ),
   await useAsyncData(`threads?ids=${JSON.stringify(threadIds)}`, () =>
-    useBaseFetch(`threads?ids=${encodeURIComponent(JSON.stringify(threadIds))}`),
+    fetchSegmented(threadIds, (ids) => `threads?ids=${asEncodedJsonArray(ids)}`),
   ),
 ]);
 
@@ -70,7 +71,7 @@ const versionProjects = versions.value.map((version) => version.project_id);
 const projectIds = [...new Set(reportedProjects.concat(versionProjects))];
 
 const { data: projects } = await useAsyncData(`projects?ids=${JSON.stringify(projectIds)}`, () =>
-  useBaseFetch(`projects?ids=${encodeURIComponent(JSON.stringify(projectIds))}`),
+  fetchSegmented(projectIds, (ids) => `projects?ids=${asEncodedJsonArray(ids)}`),
 );
 
 reports.value = rawReports.map((report) => {

apps/frontend/src/components/ui/servers/BackupCreateModal.vue

@@ -45,9 +45,11 @@
 import { ref, nextTick, computed } from "vue";
 import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { IssuesIcon, PlusIcon, XIcon } from "@modrinth/assets";
+import { ModrinthServersFetchError, type ServerBackup } from "@modrinth/utils";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();
 
 const modal = ref<InstanceType<typeof NewModal>>();
@@ -64,7 +66,7 @@ const trimmedName = computed(() => backupName.value.trim());
 const nameExists = computed(() => {
   if (!props.server.backups?.data) return false;
   return props.server.backups.data.some(
-    (backup) => backup.name.trim().toLowerCase() === trimmedName.value.toLowerCase(),
+    (backup: ServerBackup) => backup.name.trim().toLowerCase() === trimmedName.value.toLowerCase(),
   );
 });
 
@@ -98,7 +100,7 @@ const createBackup = async () => {
     hideModal();
     await props.server.refresh();
   } catch (error) {
-    if (error instanceof PyroFetchError && error.statusCode === 429) {
+    if (error instanceof ModrinthServersFetchError && error?.statusCode === 429) {
       isRateLimited.value = true;
       addNotification({
         type: "error",

apps/frontend/src/components/ui/servers/BackupDeleteModal.vue

@@ -20,13 +20,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { ConfirmModal } from "@modrinth/ui";
-import type { Server } from "~/composables/pyroServers";
+import type { Backup } from "@modrinth/utils";
 import BackupItem from "~/components/ui/servers/BackupItem.vue";
 
-defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
-}>();
-
 const emit = defineEmits<{
   (e: "delete", backup: Backup | undefined): void;
 }>();

apps/frontend/src/components/ui/servers/BackupItem.vue

@@ -17,7 +17,7 @@ import {
 import { ButtonStyled, commonMessages, OverflowMenu, ProgressBar } from "@modrinth/ui";
 import { defineMessages, useVIntl } from "@vintl/vintl";
 import { ref } from "vue";
-import type { Backup } from "~/composables/pyroServers.ts";
+import type { Backup } from "@modrinth/utils";
 
 const flags = useFeatureFlags();
 const { formatMessage } = useVIntl();

apps/frontend/src/components/ui/servers/BackupRenameModal.vue

@@ -48,10 +48,11 @@
 import { ref, nextTick, computed } from "vue";
 import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { SpinnerIcon, SaveIcon, XIcon, IssuesIcon } from "@modrinth/assets";
-import type { Server } from "~/composables/pyroServers";
+import type { Backup } from "@modrinth/utils";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();
 
 const modal = ref<InstanceType<typeof NewModal>>();
@@ -70,7 +71,7 @@ const nameExists = computed(() => {
   }
 
   return props.server.backups.data.some(
-    (backup) => backup.name.trim().toLowerCase() === trimmedName.value.toLowerCase(),
+    (backup: Backup) => backup.name.trim().toLowerCase() === trimmedName.value.toLowerCase(),
   );
 });
 

apps/frontend/src/components/ui/servers/BackupRestoreModal.vue

@@ -19,11 +19,12 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { ConfirmModal, NewModal } from "@modrinth/ui";
-import type { Server } from "~/composables/pyroServers";
+import type { Backup } from "@modrinth/utils";
 import BackupItem from "~/components/ui/servers/BackupItem.vue";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();
 
 const modal = ref<InstanceType<typeof NewModal>>();

apps/frontend/src/components/ui/servers/BackupSettingsModal.vue

@@ -59,10 +59,10 @@
 import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { XIcon, SaveIcon } from "@modrinth/assets";
 import { ref, computed } from "vue";
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<{
-  server: Server<["backups"]>;
+  server: ModrinthServer;
 }>();
 
 const modal = ref<InstanceType<typeof NewModal>>();

apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue

@@ -239,7 +239,7 @@ import {
 import { Admonition, ButtonStyled, NewModal } from "@modrinth/ui";
 import TagItem from "@modrinth/ui/src/components/base/TagItem.vue";
 import { ref, computed } from "vue";
-import { formatCategory, formatVersionsForDisplay, type Version } from "@modrinth/utils";
+import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from "@modrinth/utils";
 import Accordion from "~/components/ui/Accordion.vue";
 import Checkbox from "~/components/ui/Checkbox.vue";
 import ContentVersionFilter, {

apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue

@@ -99,7 +99,7 @@
 import { FolderOpenIcon, CheckCircleIcon, XCircleIcon } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
 import { ref, computed, watch, nextTick } from "vue";
-import type { FSModule } from "~/composables/pyroServers.ts";
+import { FSModule } from "~/composables/servers/modules/fs.ts";
 
 interface UploadItem {
   file: File;

apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue

@@ -75,13 +75,14 @@
 <script setup lang="ts">
 import { ExternalIcon, SpinnerIcon, DownloadIcon, XIcon } from "@modrinth/assets";
 import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
+import { ModrinthServersFetchError } from "@modrinth/utils";
 import { ref, computed, nextTick } from "vue";
-import { handleError, type Server } from "~/composables/pyroServers.ts";
+import { handleError, ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const cf = ref(false);
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();
 
 const modal = ref<typeof NewModal>();
@@ -110,24 +111,18 @@ const handleSubmit = async () => {
   if (!error.value) {
     // hide();
     try {
-      const dry = await props.server.fs?.extractFile(trimmedUrl.value, true, true);
+      const dry = await props.server.fs.extractFile(trimmedUrl.value, true, true);
 
       if (!cf.value || dry.modpack_name) {
-        await props.server.fs?.extractFile(trimmedUrl.value, true, false, true);
+        await props.server.fs.extractFile(trimmedUrl.value, true, false, true);
         hide();
       } else {
         submitted.value = false;
         handleError(
-          new ServersError(
+          new ModrinthServersFetchError(
             "Could not find CurseForge modpack at that URL.",
-            undefined,
-            undefined,
-            undefined,
-            {
-              context: "Error installing modpack",
-              error: `url: ${url.value}`,
-              description: "Could not find CurseForge modpack at that URL.",
-            },
+            404,
+            new Error(`No modpack found at ${url.value}`),
           ),
         );
       }

apps/frontend/src/components/ui/servers/OverviewLoading.vue

@@ -1,80 +0,0 @@
-<template>
-  <div
-    aria-hidden="true"
-    style="font-variant-numeric: tabular-nums"
-    class="pointer-events-none h-full w-full select-none"
-  >
-    <div class="flex flex-col gap-6">
-      <div class="flex flex-row items-center gap-6">
-        <div
-          class="relative max-h-[156px] min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
-        >
-          <div class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1">
-            <div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
-              <h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">0.00%</h2>
-              <h3 class="relative z-10 text-sm font-normal text-secondary">/ 100%</h3>
-            </div>
-            <h3 class="relative z-10 text-base font-normal text-secondary">CPU usage</h3>
-          </div>
-          <CPUIcon class="absolute right-10 top-10" />
-        </div>
-        <div
-          class="relative max-h-[156px] min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
-        >
-          <div class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1">
-            <div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
-              <h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">0.00%</h2>
-              <h3 class="relative z-10 text-sm font-normal text-secondary">/ 100%</h3>
-            </div>
-            <h3 class="relative z-10 text-base font-normal text-secondary">Memory usage</h3>
-          </div>
-          <DBIcon class="absolute right-10 top-10" />
-        </div>
-        <div
-          class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8 transition-transform duration-100 hover:scale-105 active:scale-100"
-        >
-          <div class="flex flex-row items-center gap-2">
-            <h2 class="m-0 -ml-0.5 mt-1 text-3xl font-extrabold text-contrast">0 B</h2>
-          </div>
-          <h3 class="relative z-10 text-base font-normal text-secondary">Storage usage</h3>
-          <FolderOpenIcon class="absolute right-10 top-10 size-8" />
-        </div>
-      </div>
-
-      <div
-        class="relative flex h-full w-full flex-col gap-3 overflow-hidden rounded-2xl bg-bg-raised p-8"
-      >
-        <div class="experimental-styles-within flex flex-row items-center">
-          <div class="flex flex-row items-center gap-4">
-            <h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
-          </div>
-        </div>
-        <div class="relative w-full">
-          <input type="text" placeholder="Search logs" class="h-12 !w-full !pl-10 !pr-48" />
-          <SearchIcon class="absolute left-4 top-1/2 -translate-y-1/2" />
-        </div>
-        <div
-          class="console relative h-full min-h-[516px] w-full overflow-hidden rounded-xl bg-bg text-sm"
-        ></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { CPUIcon, DBIcon, FolderOpenIcon, SearchIcon } from "@modrinth/assets";
-</script>
-
-<style scoped>
-html.light-mode .console {
-  background: var(--color-bg);
-}
-
-html.dark-mode .console {
-  background: black;
-}
-
-html.oled-mode .console {
-  background: black;
-}
-</style>

apps/frontend/src/components/ui/servers/PanelServerActionButton.vue

@@ -59,7 +59,7 @@
 
       <template v-else>
         <ButtonStyled v-if="showStopButton" type="transparent">
-          <button :disabled="!canTakeAction" @click="initiateAction('stop')">
+          <button :disabled="!canTakeAction" @click="initiateAction('Stop')">
             <div class="flex gap-1">
               <StopCircleIcon class="h-5 w-5" />
               <span>{{ isStoppingState ? "Stopping..." : "Stop" }}</span>
@@ -120,14 +120,12 @@ import {
 import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { useRouter } from "vue-router";
 import { useStorage } from "@vueuse/core";
-
-type ServerAction = "start" | "stop" | "restart" | "kill";
-type ServerState = "stopped" | "starting" | "running" | "stopping" | "restarting";
+import type { PowerAction as ServerPowerAction, ServerState } from "@modrinth/utils";
 
 const flags = useFeatureFlags();
 
 interface PowerAction {
-  action: ServerAction;
+  action: ServerPowerAction;
   nextState: ServerState;
 }
 
@@ -142,7 +140,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: "action", action: ServerAction): void;
+  (e: "action", action: ServerPowerAction): void;
 }>();
 
 const router = useRouter();
@@ -170,7 +168,7 @@ const isStoppingState = computed(() => serverState.value === "stopping");
 const showStopButton = computed(() => isRunning.value || isStoppingState.value);
 
 const primaryActionText = computed(() => {
-  const states: Record<ServerState, string> = {
+  const states: Partial<Record<ServerState, string>> = {
     starting: "Starting...",
     restarting: "Restarting...",
     running: "Restart",
@@ -193,7 +191,7 @@ const menuOptions = computed(() => [
           id: "kill",
           label: "Kill server",
           icon: SlashIcon,
-          action: () => initiateAction("kill"),
+          action: () => initiateAction("Kill"),
         },
       ]),
   {
@@ -221,17 +219,17 @@ async function copyId() {
   await navigator.clipboard.writeText(serverId as string);
 }
 
-function initiateAction(action: ServerAction) {
+function initiateAction(action: ServerPowerAction) {
   if (!canTakeAction.value) return;
 
-  const stateMap: Record<ServerAction, ServerState> = {
-    start: "starting",
-    stop: "stopping",
-    restart: "restarting",
-    kill: "stopping",
+  const stateMap: Record<ServerPowerAction, ServerState> = {
+    Start: "starting",
+    Stop: "stopping",
+    Restart: "restarting",
+    Kill: "stopping",
   };
 
-  if (action === "start") {
+  if (action === "Start") {
     emit("action", action);
     serverState.value = stateMap[action];
     startingDelay.value = true;
@@ -249,7 +247,7 @@ function initiateAction(action: ServerAction) {
 }
 
 function handlePrimaryAction() {
-  initiateAction(isRunning.value ? "restart" : "start");
+  initiateAction(isRunning.value ? "Restart" : "Start");
 }
 
 function executePowerAction() {
@@ -263,7 +261,7 @@ function executePowerAction() {
     userPreferences.value.powerDontAskAgain = true;
   }
 
-  if (action === "start") {
+  if (action === "Start") {
     startingDelay.value = true;
     setTimeout(() => (startingDelay.value = false), 5000);
   }

apps/frontend/src/components/ui/servers/PanelServerStatus.vue

@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import type { ServerState } from "~/types/servers";
+import type { ServerState } from "@modrinth/utils";
 
 const STATUS_CLASSES = {
   running: { main: "bg-brand", bg: "bg-bg-green" },
@@ -49,7 +49,7 @@ const STATUS_CLASSES = {
   unknown: { main: "", bg: "" },
 } as const;
 
-const STATUS_TEXTS = {
+const STATUS_TEXTS: Partial<Record<ServerState, string>> = {
   running: "Running",
   stopped: "",
   crashed: "Crashed",
@@ -63,7 +63,10 @@ defineProps<{
 const isExpanded = ref(false);
 
 function getStatusClass(state: ServerState) {
-  return STATUS_CLASSES[state] ?? STATUS_CLASSES.unknown;
+  if (state in STATUS_CLASSES) {
+    return STATUS_CLASSES[state as keyof typeof STATUS_CLASSES];
+  }
+  return STATUS_CLASSES.unknown;
 }
 
 function getStatusText(state: ServerState) {

apps/frontend/src/components/ui/servers/PanelTerminal.vue

@@ -7,16 +7,17 @@
           type="text"
           placeholder="Search logs"
           class="h-12 !w-full !pl-10 !pr-48"
+          :disabled="loading"
           @keydown.escape="clearSearch"
         />
         <SearchIcon class="absolute left-4 top-1/2 -translate-y-1/2" />
-        <ButtonStyled v-if="searchInput" @click="clearSearch">
+        <ButtonStyled v-if="searchInput && !loading" @click="clearSearch">
           <button class="absolute right-2 top-1/2 -translate-y-1/2">
             <XIcon class="h-5 w-5" />
           </button>
         </ButtonStyled>
         <span
-          v-if="pyroConsole.filteredOutput.value.length && searchInput"
+          v-if="pyroConsole.filteredOutput.value.length && searchInput && !loading"
           class="pointer-events-none absolute right-12 top-1/2 -translate-y-1/2 select-none whitespace-pre text-sm"
         >
           {{ pyroConsole.filteredOutput.value.length }}
@@ -29,11 +30,13 @@
       :class="[
         'terminal-font console relative z-[1] flex h-full w-full flex-col items-center justify-between overflow-hidden rounded-t-xl px-1 text-sm transition-transform duration-300',
         { 'scale-fullscreen screen-fixed inset-0 z-50 !rounded-none': isFullScreen },
+        { 'pointer-events-none': loading },
       ]"
+      :aria-hidden="loading"
       tabindex="-1"
     >
       <div
-        v-if="cosmetics.advancedRendering"
+        v-if="cosmetics.advancedRendering && !loading"
         class="progressive-gradient pointer-events-none absolute -bottom-6 left-0 z-[2] h-[10rem] w-full overflow-hidden rounded-xl"
         :style="`--transparency: ${Math.max(0, lerp(100, 0, bottomThreshold * 8))}%`"
         aria-hidden="true"
@@ -47,7 +50,7 @@
         />
       </div>
       <div
-        v-else
+        v-else-if="!loading"
         class="pointer-events-none absolute bottom-0 left-0 right-0 z-[2] h-[196px] w-full"
         :style="
           bottomThreshold > 0
@@ -79,6 +82,7 @@
       </div>
       <div data-pyro-terminal-scroll-root class="relative h-full w-full">
         <div
+          v-if="!loading"
           ref="scrollbarTrack"
           data-pyro-terminal-scrollbar-track
           class="absolute -right-1 bottom-16 top-4 z-[4] w-4 overflow-hidden"
@@ -118,7 +122,12 @@
           class="scrollbar-none absolute left-0 top-0 h-full w-full select-text overflow-x-auto overflow-y-auto py-6 pb-[72px]"
           @scroll.passive="() => handleListScroll()"
         >
-          <div data-pyro-terminal-virtual-height-watcher :style="{ height: `${totalHeight}px` }">
+          <div v-if="loading" class="h-full w-full" />
+          <div
+            v-else
+            data-pyro-terminal-virtual-height-watcher
+            :style="{ height: `${totalHeight}px` }"
+          >
             <ul
               class="m-0 list-none p-0"
               data-pyro-terminal-virtual-list
@@ -205,6 +214,7 @@
         <slot />
       </div>
       <button
+        v-if="!loading"
         data-pyro-fullscreen
         :label="isFullScreen ? 'Exit full screen' : 'Enter full screen'"
         class="experimental-styles-within absolute right-4 top-4 z-[3] grid h-12 w-12 place-content-center rounded-full border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
@@ -217,7 +227,7 @@
 
       <Transition name="fade">
         <div
-          v-if="hasSelection || isSingleLineSelected"
+          v-if="(hasSelection || isSingleLineSelected) && !loading"
           class="absolute right-20 top-4 z-[3] flex flex-row items-center"
           :class="{ '!right-4': searchInput || hasSelection || isSingleLineSelected }"
         >
@@ -247,7 +257,7 @@
 
       <Transition name="scroll-to-bottom">
         <button
-          v-if="bottomThreshold > 0 && !isScrolledToBottom"
+          v-if="bottomThreshold > 0 && !isScrolledToBottom && !loading"
           data-pyro-scrolltobottom
           label="Scroll to bottom"
           class="scroll-to-bottom-btn experimental-styles-within absolute bottom-[4.5rem] right-4 z-[3] grid h-12 w-12 place-content-center rounded-full border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
@@ -291,13 +301,14 @@ import { useDebounceFn } from "@vueuse/core";
 import { NewModal } from "@modrinth/ui";
 import ButtonStyled from "@modrinth/ui/src/components/base/ButtonStyled.vue";
 import DOMPurify from "dompurify";
-import { usePyroConsole } from "~/store/console.ts";
+import { useModrinthServersConsole } from "~/store/console.ts";
 
 const { $cosmetics } = useNuxtApp();
 const cosmetics = $cosmetics;
 
 const props = defineProps<{
   fullScreen: boolean;
+  loading?: boolean;
 }>();
 
 const BUFFER_SIZE = 5;
@@ -307,8 +318,8 @@ const SEPARATOR_HEIGHT = 32;
 const SCROLL_END_DELAY = 150;
 const progressiveBlurIterations = ref(8);
 
-const pyroConsole = usePyroConsole();
-const consoleOutput = pyroConsole.output;
+const pyroConsole = useModrinthServersConsole();
+const consoleOutput = computed(() => (props.loading ? [] : pyroConsole.output.value));
 
 const scrollContainer = ref<HTMLElement | null>(null);
 

apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue

@@ -69,10 +69,11 @@
 <script setup lang="ts">
 import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { DownloadIcon, XIcon } from "@modrinth/assets";
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServersFetchError } from "@modrinth/utils";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
   project: any;
   versions: any[];
   currentVersion?: any;
@@ -98,8 +99,7 @@ const handleReinstall = async () => {
   try {
     const versionId = props.versions.find((v) => v.version_number === selectedVersion.value)?.id;
 
-    await props.server.general?.reinstall(
-      props.server.serverId,
+    await props.server.general.reinstall(
       false,
       props.project.id,
       versionId,
@@ -110,7 +110,7 @@ const handleReinstall = async () => {
     emit("reinstall");
     hide();
   } catch (error) {
-    if (error instanceof PyroFetchError && error.statusCode === 429) {
+    if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
       addNotification({
         group: "server",
         title: "Cannot reinstall server",

apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue

@@ -116,11 +116,12 @@
 <script setup lang="ts">
 import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
 import { UploadIcon, RightArrowIcon, XIcon, ServerIcon } from "@modrinth/assets";
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServersFetchError } from "@modrinth/utils";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
   backupInProgress?: BackupInProgressReason;
 }>();
 
@@ -175,7 +176,7 @@ const handleReinstall = async () => {
     window.scrollTo(0, 0);
     hide();
   } catch (error) {
-    if (error instanceof PyroFetchError && error.statusCode === 429) {
+    if (error instanceof ModrinthServersFetchError && error?.statusCode === 429) {
       addNotification({
         group: "server",
         title: "Cannot reinstall server",

apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue

@@ -200,9 +200,9 @@
 import { BackupWarning, ButtonStyled, NewModal, Toggle } from "@modrinth/ui";
 import { DropdownIcon, RightArrowIcon, ServerIcon, XIcon } from "@modrinth/assets";
 import { $fetch } from "ofetch";
-import type { Server } from "~/composables/pyroServers";
-import type { Loaders } from "~/types/servers";
+import { type Loaders, ModrinthServersFetchError } from "@modrinth/utils";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const { formatMessage } = useVIntl();
 
@@ -220,7 +220,7 @@ type VersionMap = Record<string, LoaderVersion[]>;
 type VersionCache = Record<string, any>;
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
   currentLoader: Loaders | undefined;
   backupInProgress?: BackupInProgressReason;
   initialSetup?: boolean;
@@ -458,7 +458,6 @@ const handleReinstall = async () => {
 
   try {
     await props.server.general?.reinstall(
-      props.server.serverId,
       true,
       selectedLoader.value,
       selectedMCVersion.value,
@@ -474,7 +473,7 @@ const handleReinstall = async () => {
 
     hide();
   } catch (error) {
-    if (error instanceof PyroFetchError && error.statusCode === 429) {
+    if (error instanceof ModrinthServersFetchError && (error as any)?.statusCode === 429) {
       addNotification({
         group: "server",
         title: "Cannot reinstall server",

apps/frontend/src/components/ui/servers/SaveBanner.vue

@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import { ButtonStyled } from "@modrinth/ui";
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<{
   isUpdating: boolean;
@@ -39,7 +39,7 @@ const props = defineProps<{
   save: () => void;
   reset: () => void;
   isVisible: boolean;
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();
 
 const saveAndRestart = async () => {

apps/frontend/src/components/ui/servers/ServerInstallation.vue

@@ -160,14 +160,14 @@
 <script setup lang="ts">
 import { ButtonStyled, NewProjectCard } from "@modrinth/ui";
 import { TransferIcon, UploadIcon, InfoIcon, CompassIcon, SettingsIcon } from "@modrinth/assets";
-import type { Server } from "~/composables/pyroServers";
-import type { Loaders } from "~/types/servers";
+import type { Loaders } from "@modrinth/utils";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const { formatMessage } = useVIntl();
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
   ignoreCurrentInstallation?: boolean;
   backupInProgress?: BackupInProgressReason;
 }>();

apps/frontend/src/components/ui/servers/ServerListing.vue

@@ -81,12 +81,13 @@
 
 <script setup lang="ts">
 import { ChevronRightIcon, LockIcon, SparklesIcon } from "@modrinth/assets";
-import type { Project, Server } from "~/types/servers";
+import type { Project, Server } from "@modrinth/utils";
+import { useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<Partial<Server>>();
 
 if (props.server_id) {
-  await usePyroServer(props.server_id, ["general"]);
+  await useModrinthServers(props.server_id, ["general"]);
 }
 
 const showGameLabel = computed(() => !!props.game);
@@ -109,7 +110,7 @@ if (props.upstream) {
 const image = useState<string | undefined>(`server-icon-${props.server_id}`, () => undefined);
 
 if (import.meta.server && projectData.value?.icon_url) {
-  await usePyroServer(props.server_id!, ["general"]);
+  await useModrinthServers(props.server_id!, ["general"]);
 }
 
 const iconUrl = computed(() => projectData.value?.icon_url || undefined);

apps/frontend/src/components/ui/servers/ServerSidebar.vue

@@ -6,7 +6,7 @@
           <NuxtLink
             :to="link.href"
             class="flex items-center gap-2 rounded-xl p-2 hover:bg-button-bg"
-            :class="{ 'bg-button-bg text-contrast': route.path === link.href }"
+            :class="{ 'bg-button-bg text-contrast': isLinkActive(link) }"
           >
             <div class="flex items-center gap-2 font-bold">
               <component :is="link.icon" class="size-6" />
@@ -34,18 +34,38 @@
 <script setup lang="ts">
 import { RightArrowIcon } from "@modrinth/assets";
 import type { RouteLocationNormalized } from "vue-router";
-import type { Server } from "~/composables/pyroServers";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const emit = defineEmits(["reinstall"]);
 
-defineProps<{
-  navLinks: { label: string; href: string; icon: Component; external?: boolean }[];
+const props = defineProps<{
+  navLinks: {
+    label: string;
+    href: string;
+    icon: Component;
+    external?: boolean;
+    matches?: RegExp[];
+  }[];
   route: RouteLocationNormalized;
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
   backupInProgress?: BackupInProgressReason;
 }>();
 
+const isLinkActive = (link: (typeof props.navLinks)[0]) => {
+  if (props.route.path === link.href) {
+    return true;
+  }
+
+  if (link.matches && link.matches.length > 0) {
+    return link.matches.some((regex: RegExp) => {
+      return regex.test(props.route.path);
+    });
+  }
+
+  return false;
+};
+
 const onReinstall = (...args: any[]) => {
   emit("reinstall", ...args);
 };

apps/frontend/src/components/ui/servers/ServerStats.vue

@@ -3,6 +3,8 @@
     data-pyro-server-stats
     style="font-variant-numeric: tabular-nums"
     class="flex select-none flex-col items-center gap-6 md:flex-row"
+    :class="{ 'pointer-events-none': loading }"
+    :aria-hidden="loading"
   >
     <div
       v-for="(metric, index) in metrics"
@@ -18,7 +20,7 @@
           <h3 class="flex items-center gap-2 text-base font-normal text-secondary">
             {{ metric.title }}
             <IssuesIcon
-              v-if="metric.warning"
+              v-if="metric.warning && !loading"
               v-tooltip="metric.warning"
               class="size-5"
               :style="{ color: 'var(--color-orange)' }"
@@ -28,51 +30,76 @@
         <div class="absolute -left-8 -top-4 h-28 w-56 rounded-full bg-bg-raised blur-lg" />
       </div>
 
-      <component :is="metric.icon" class="absolute right-10 top-10 z-10" />
-      <ClientOnly>
-        <VueApexCharts
-          v-if="metric.showGraph"
-          type="area"
-          height="142"
-          :options="getChartOptions(metric.warning)"
-          :series="[{ name: metric.title, data: metric.data }]"
-          class="chart absolute bottom-0 left-0 right-0 w-full opacity-0"
-        />
-      </ClientOnly>
+      <component
+        :is="metric.icon"
+        class="absolute right-10 top-10 z-10 size-8"
+        style="width: 2rem; height: 2rem"
+      />
+
+      <div class="chart-space absolute bottom-0 left-0 right-0">
+        <ClientOnly>
+          <VueApexCharts
+            v-if="metric.showGraph && !loading"
+            type="area"
+            height="142"
+            :options="getChartOptions(metric.warning, index)"
+            :series="[{ name: metric.title, data: metric.data }]"
+            class="chart"
+            :class="chartsReady.has(index) ? 'opacity-100' : 'opacity-0'"
+          />
+        </ClientOnly>
+      </div>
     </div>
 
-    <NuxtLink
-      :to="`/servers/manage/${serverId}/files`"
-      class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8 transition-transform duration-100 hover:scale-105 active:scale-100"
+    <component
+      :is="loading ? 'div' : 'NuxtLink'"
+      :to="loading ? undefined : `/servers/manage/${serverId}/files`"
+      class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
+      :class="loading ? '' : 'transition-transform duration-100 hover:scale-105 active:scale-100'"
     >
       <div class="flex flex-row items-center gap-2">
         <h2 class="m-0 -ml-0.5 mt-1 text-3xl font-extrabold text-contrast">
-          {{ formatBytes(stats.storage_usage_bytes) }}
+          {{ loading ? "0 B" : formatBytes(stats.storage_usage_bytes) }}
         </h2>
       </div>
       <h3 class="text-base font-normal text-secondary">Storage usage</h3>
       <FolderOpenIcon class="absolute right-10 top-10 size-8" />
-    </NuxtLink>
+    </component>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, shallowRef } from "vue";
-import { FolderOpenIcon, CPUIcon, DBIcon, IssuesIcon } from "@modrinth/assets";
+import { FolderOpenIcon, CPUIcon, DatabaseIcon, IssuesIcon } from "@modrinth/assets";
 import { useStorage } from "@vueuse/core";
-import type { Stats } from "~/types/servers";
+import type { Stats } from "@modrinth/utils";
 
 const route = useNativeRoute();
 const serverId = route.params.id;
 const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
 
+const chartsReady = ref(new Set<number>());
+
 const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
   ramAsNumber: false,
 });
 
-const props = defineProps<{ data: Stats }>();
+const props = withDefaults(defineProps<{ data?: Stats; loading?: boolean }>(), {
+  loading: false,
+});
 
-const stats = shallowRef(props.data.current);
+const stats = shallowRef(
+  props.data?.current || {
+    cpu_percent: 0,
+    ram_usage_bytes: 0,
+    ram_total_bytes: 1, // Avoid division by zero
+    storage_usage_bytes: 0,
+  },
+);
+
+const onChartReady = (index: number) => {
+  chartsReady.value.add(index);
+};
 
 const formatBytes = (bytes: number) => {
   const units = ["B", "KB", "MB", "GB"];
@@ -94,6 +121,29 @@ const updateGraphData = (arr: number[], newValue: number) => {
 };
 
 const metrics = computed(() => {
+  if (props.loading) {
+    return [
+      {
+        title: "CPU usage",
+        value: "0.00%",
+        max: "100%",
+        icon: CPUIcon,
+        data: cpuData.value,
+        showGraph: false,
+        warning: null,
+      },
+      {
+        title: "Memory usage",
+        value: "0.00%",
+        max: "100%",
+        icon: DatabaseIcon,
+        data: ramData.value,
+        showGraph: false,
+        warning: null,
+      },
+    ];
+  }
+
   const ramPercent = Math.min(
     (stats.value.ram_usage_bytes / stats.value.ram_total_bytes) * 100,
     100,
@@ -119,7 +169,7 @@ const metrics = computed(() => {
         ? formatBytes(stats.value.ram_usage_bytes)
         : `${ramPercent.toFixed(2)}%`,
       max: userPreferences.value.ramAsNumber ? formatBytes(stats.value.ram_total_bytes) : "100%",
-      icon: DBIcon,
+      icon: DatabaseIcon,
       data: ramData.value,
       showGraph: true,
       warning: ramPercent >= 90 ? "Memory usage is very high" : null,
@@ -127,7 +177,7 @@ const metrics = computed(() => {
   ];
 });
 
-const getChartOptions = (hasWarning: string | null) => ({
+const getChartOptions = (hasWarning: string | null, index: number) => ({
   chart: {
     type: "area",
     animations: { enabled: false },
@@ -139,6 +189,10 @@ const getChartOptions = (hasWarning: string | null) => ({
       top: 0,
       bottom: 0,
     },
+    events: {
+      mounted: () => onChartReady(index),
+      updated: () => onChartReady(index),
+    },
   },
   stroke: { curve: "smooth", width: 3 },
   fill: {
@@ -172,24 +226,26 @@ const getChartOptions = (hasWarning: string | null) => ({
 });
 
 watch(
-  () => props.data.current,
+  () => props.data?.current,
   (newStats) => {
-    stats.value = newStats;
+    if (newStats) {
+      stats.value = newStats;
+    }
   },
 );
 </script>
 
 <style scoped>
-.chart {
-  animation: fadeIn 0.2s ease-out 0.2s forwards;
+.chart-space {
+  height: 142px;
+  width: calc(100% + 48px);
   margin-left: -24px;
   margin-right: -24px;
-  width: calc(100% + 48px) !important;
 }
 
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-  }
+.chart {
+  width: 100% !important;
+  height: 142px !important;
+  transition: opacity 0.3s ease-out;
 }
 </style>

apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue

@@ -224,7 +224,7 @@
 
 <script setup lang="ts">
 import { LoaderIcon } from "@modrinth/assets";
-import type { Loaders } from "~/types/servers";
+import type { Loaders } from "@modrinth/utils";
 
 defineProps<{
   loader: Loaders;

apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ButtonStyled, ServersSpecs } from "@modrinth/ui";
 import type { MessageDescriptor } from "@vintl/vintl";
-import { formatPrice } from "../../../../../../../packages/utils";
+import { formatPrice } from "@modrinth/utils";
 
 const { formatMessage, locale } = useVIntl();
 

apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue

@@ -3,7 +3,7 @@ import { Accordion, ButtonStyled, NewModal, ServerNotice, TagItem } from "@modri
 import { PlusIcon, XIcon } from "@modrinth/assets";
 import type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
 import { ref } from "vue";
-import { usePyroFetch } from "~/composables/pyroFetch.ts";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 
 const app = useNuxtApp() as unknown as { $notify: any };
 
@@ -23,7 +23,7 @@ const assignedNodes = computed(() => assigned.value.filter((n) => n.kind === "no
 const inputField = ref("");
 
 async function refresh() {
-  await usePyroFetch("notices").then((res) => {
+  await useServersFetch("notices").then((res) => {
     const notices = res as ServerNoticeType[];
     assigned.value = notices.find((n) => n.id === notice.value?.id)?.assigned ?? [];
   });
@@ -33,9 +33,12 @@ async function assign(server: boolean = true) {
   const input = inputField.value.trim();
 
   if (input !== "" && notice.value) {
-    await usePyroFetch(`notices/${notice.value.id}/assign?${server ? "server" : "node"}=${input}`, {
-      method: "PUT",
-    }).catch((err) => {
+    await useServersFetch(
+      `notices/${notice.value.id}/assign?${server ? "server" : "node"}=${input}`,
+      {
+        method: "PUT",
+      },
+    ).catch((err) => {
       app.$notify({
         group: "main",
         title: "Error assigning notice",
@@ -75,9 +78,12 @@ async function unassignDetect() {
 
 async function unassign(id: string, server: boolean = true) {
   if (notice.value) {
-    await usePyroFetch(`notices/${notice.value.id}/unassign?${server ? "server" : "node"}=${id}`, {
-      method: "PUT",
-    }).catch((err) => {
+    await useServersFetch(
+      `notices/${notice.value.id}/unassign?${server ? "server" : "node"}=${id}`,
+      {
+        method: "PUT",
+      },
+    ).catch((err) => {
       app.$notify({
         group: "main",
         title: "Error unassigning notice",

apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue

@@ -2,13 +2,8 @@
 import dayjs from "dayjs";
 import { ButtonStyled, commonMessages, CopyCode, ServerNotice, TagItem } from "@modrinth/ui";
 import { EditIcon, SettingsIcon, TrashIcon } from "@modrinth/assets";
-import { ServerNotice as ServerNoticeType } from "@modrinth/utils";
-import { useRelativeTime } from "@modrinth/ui";
-import {
-  DISMISSABLE,
-  getDismissableMetadata,
-  NOTICE_LEVELS,
-} from "@modrinth/ui/src/utils/notices.ts";
+import type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
+import { useRelativeTime, getDismissableMetadata, NOTICE_LEVELS } from "@modrinth/ui";
 import { useVIntl } from "@vintl/vintl";
 
 const { formatMessage } = useVIntl();

apps/frontend/src/components/ui/servers/scheduling/EditScheduledTaskModal.vue

@@ -0,0 +1,531 @@
+<template>
+  <NewModal
+    ref="modal"
+    :header="isNew ? 'New scheduled task' : 'Editing scheduled task'"
+    @hide="onModalHide"
+  >
+    <div class="modal-content flex flex-col gap-2">
+      <div v-if="error" class="text-sm text-brand-red">
+        {{ error }}
+      </div>
+
+      <div class="flex max-w-md flex-col gap-2">
+        <label for="title">
+          <span class="text-lg font-bold text-contrast">
+            Title <span class="text-brand-red">*</span>
+          </span>
+        </label>
+        <input
+          id="title"
+          v-model="task.title"
+          type="text"
+          maxlength="64"
+          placeholder="Enter task title..."
+          autocomplete="off"
+          class="input input-bordered"
+          required
+        />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label><span class="text-lg font-bold text-contrast">Schedule Type</span></label>
+        <RadioButtons v-model="scheduleType" :items="['daily', 'custom']" class="mb-2">
+          <template #default="{ item }">
+            <span class="flex items-center gap-2">
+              <ClockIcon v-if="item === 'daily'" class="size-5" />
+              <CodeIcon v-else class="size-5" />
+              <span>{{
+                item === "daily" ? "Every X day(s) at specific time" : "Custom cron expression"
+              }}</span>
+            </span>
+          </template>
+        </RadioButtons>
+      </div>
+
+      <div class="card flex h-[140px] items-center overflow-hidden rounded-lg !bg-bg">
+        <Transition
+          name="schedule-content"
+          mode="out-in"
+          enter-active-class="transition-all duration-300 ease-in-out"
+          leave-active-class="transition-all duration-300 ease-in-out"
+          enter-from-class="opacity-0"
+          enter-to-class="opacity-100"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+        >
+          <div v-if="scheduleType === 'daily'" key="daily" class="flex w-full flex-col gap-2">
+            <div class="flex w-full gap-8">
+              <div class="flex flex-col gap-2">
+                <label for="dayInterval" class="text-md font-medium">Every X day(s)</label>
+                <div class="flex items-center gap-2">
+                  <input
+                    id="dayInterval"
+                    v-model="dayInterval"
+                    type="text"
+                    inputmode="numeric"
+                    maxlength="3"
+                    class="input input-bordered w-20"
+                    placeholder="1"
+                    @input="onDayIntervalInput"
+                  />
+                  <span class="text-muted-foreground text-sm">day(s)</span>
+                </div>
+              </div>
+              <div class="flex flex-col gap-2">
+                <label class="text-md font-medium">At time</label>
+                <TimePicker v-model="selectedTime" use-utc-values placeholder="Select time" />
+              </div>
+            </div>
+            <div class="text-xs">
+              {{ humanReadableDescription }}
+            </div>
+          </div>
+          <div v-else key="custom" class="flex w-full flex-col gap-2">
+            <label for="customCron" class="text-md font-medium"
+              >Cron Expression
+              <nuxt-link
+                v-tooltip="
+                  `Click to read more about what cron expressions are, and how to create them.`
+                "
+                class="align-middle text-link"
+                target="_blank"
+                to="https://www.geeksforgeeks.org/writing-cron-expressions-for-scheduling-tasks/"
+                ><UnknownIcon class="size-4" />
+              </nuxt-link>
+            </label>
+            <input
+              id="customCron"
+              v-model="customCron"
+              type="text"
+              class="input input-bordered font-mono"
+              placeholder="0 0 9 * * *"
+            />
+            <div v-if="!isValidCron" class="text-xs text-brand-red">
+              Invalid cron format. Please use 6 space-separated values (e.g.,
+              <code>second minute hour day month day-of-week</code>).
+            </div>
+            <div v-else class="text-xs">
+              {{ humanReadableDescription }}
+            </div>
+          </div>
+        </Transition>
+      </div>
+
+      <div class="flex max-w-md flex-col gap-2">
+        <label for="action_kind"><span class="text-lg font-bold text-contrast">Action</span></label>
+        <RadioButtons v-model="task.action_kind" :items="actionKinds" class="mb-2">
+          <template #default="{ item }">
+            <span>{{ item === "restart" ? "Restart server" : "Run game command" }}</span>
+          </template>
+        </RadioButtons>
+      </div>
+
+      <Transition
+        name="command-section"
+        enter-active-class="transition-all duration-300 ease-in-out"
+        leave-active-class="transition-all duration-300 ease-in-out"
+        enter-from-class="opacity-0 max-h-0 overflow-hidden"
+        enter-to-class="opacity-100 max-h-96 overflow-visible"
+        leave-from-class="opacity-100 max-h-96 overflow-visible"
+        leave-to-class="opacity-0 max-h-0 overflow-hidden"
+      >
+        <div v-if="task.action_kind === 'game-command'" class="flex max-w-lg flex-col gap-4">
+          <label for="command" class="flex flex-col gap-2"
+            ><span class="text-lg font-bold text-contrast">
+              Command <span class="text-brand-red">*</span>
+            </span>
+            <span
+              >The command that will be ran when the task is executed. If the command is invalid
+              nothing will happen.</span
+            ></label
+          >
+          <div class="max-w-md">
+            <input
+              id="command"
+              v-model="commandValue"
+              type="text"
+              maxlength="256"
+              placeholder="Enter command to run..."
+              class="input input-bordered"
+              required
+            />
+          </div>
+        </div>
+      </Transition>
+
+      <div class="flex max-w-lg flex-col gap-4">
+        <label for="warn_msg" class="flex flex-col gap-2"
+          ><span class="text-lg font-bold text-contrast">
+            Warning Command
+            <span
+              v-if="task.warn_intervals && task.warn_intervals.length > 0"
+              class="text-brand-red"
+              >*</span
+            >
+          </span>
+          <span
+            >You can use <code>{}</code> to insert the time until the task is executed. If the
+            command is invalid nothing will happen.</span
+          ></label
+        >
+        <div class="max-w-md">
+          <input
+            id="warn_msg"
+            v-model="task.warn_msg"
+            type="text"
+            maxlength="128"
+            :placeholder="`/tellraw @a \u0022Restarting in {}!\u0022`"
+            class="input input-bordered max-w-md"
+          />
+        </div>
+      </div>
+
+      <div class="flex max-w-lg flex-col gap-4">
+        <label for="warn_msg" class="flex flex-col gap-2"
+          ><span class="text-lg font-bold text-contrast">Warning Intervals</span>
+          <span
+            >When, at the time before the scheduled task is executed, should the warning command be
+            executed?</span
+          ></label
+        >
+        <div class="flex flex-row flex-wrap gap-4">
+          <Chips
+            v-model="task.warn_intervals"
+            :items="[5, 15, 30, 60, 120, 300, 600]"
+            multi
+            :never-empty="false"
+            :format-label="formatWarningIntervalLabel"
+          />
+        </div>
+      </div>
+
+      <div class="mt-2 flex max-w-md gap-2">
+        <ButtonStyled color="brand">
+          <button :disabled="!canSave" @click="saveTask">
+            <SaveIcon />
+            Save
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button :disabled="loading" @click="closeModal">
+            <XIcon />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import type { Schedule, ServerSchedule, ActionKind } from "@modrinth/utils";
+import { ref, computed, watch } from "vue";
+import { RadioButtons, TimePicker, Chips, ButtonStyled, NewModal } from "@modrinth/ui";
+import { ClockIcon, CodeIcon, SaveIcon, XIcon, UnknownIcon } from "@modrinth/assets";
+import { toString as cronToString } from "cronstrue";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+
+const props = defineProps<{ server: ModrinthServer }>();
+
+const modal = ref<InstanceType<typeof NewModal>>();
+const loading = ref(false);
+const error = ref<string | null>(null);
+const task = ref<Partial<ServerSchedule | Schedule>>({});
+const isNew = ref(true);
+const originalTaskId = ref<number | null>(null);
+
+const scheduleType = ref<"daily" | "custom">("daily");
+const dayInterval = ref("1");
+const selectedTime = ref({ hour: "9", minute: "0" });
+const customCron = ref("0 0 9 * * *");
+const actionKinds: ActionKind[] = ["restart", "game-command"];
+
+const commandValue = computed({
+  get() {
+    return task.value.options && "command" in task.value.options ? task.value.options.command : "";
+  },
+  set(val: string) {
+    if (task.value.options && "command" in task.value.options) {
+      task.value.options.command = val;
+    } else if (task.value.action_kind === "game-command") {
+      task.value.options = { command: val };
+    }
+  },
+});
+
+const cronString = computed(() => {
+  if (scheduleType.value === "custom") {
+    return customCron.value.trim();
+  }
+  const minute = selectedTime.value.minute === "" ? "0" : selectedTime.value.minute;
+  const hour = selectedTime.value.hour === "" ? "0" : selectedTime.value.hour;
+  const days = dayInterval.value === "" || Number(dayInterval.value) < 1 ? "1" : dayInterval.value;
+  if (days === "1") {
+    return `0 ${minute} ${hour} * * *`;
+  } else {
+    return `0 ${minute} ${hour} */${days} * *`;
+  }
+});
+
+const CRON_REGEX =
+  /^\s*([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s*$/;
+
+const isValidCron = computed(() => {
+  const cronToTest = scheduleType.value === "custom" ? customCron.value.trim() : cronString.value;
+
+  if (!CRON_REGEX.test(cronToTest)) {
+    return false;
+  }
+
+  if (scheduleType.value === "custom") {
+    try {
+      const parts = cronToTest.split(/\s+/);
+      if (parts.length === 6) {
+        cronToString(parts.slice(1).join(" "));
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  return true;
+});
+
+const isValidGameCommand = computed(() => {
+  if (task.value.action_kind === "game-command") {
+    return commandValue.value && commandValue.value.trim().length > 0;
+  }
+  return true;
+});
+
+const isValidWarningCommand = computed(() => {
+  if (task.value.warn_intervals && task.value.warn_intervals.length > 0) {
+    return task.value.warn_msg && task.value.warn_msg.trim().length > 0;
+  }
+  return true;
+});
+
+const canSave = computed(() => {
+  return (
+    !loading.value &&
+    task.value.title &&
+    task.value.title.trim().length > 0 &&
+    isValidCron.value &&
+    isValidGameCommand.value &&
+    isValidWarningCommand.value
+  );
+});
+
+const humanReadableDescription = computed<string | undefined>(() => {
+  if (!isValidCron.value && scheduleType.value === "custom") return undefined;
+  if (scheduleType.value === "custom") {
+    try {
+      const parts = customCron.value.trim().split(/\s+/);
+      if (parts.length === 6) {
+        return cronToString(parts.slice(1).join(" "));
+      }
+      return "Invalid cron expression";
+    } catch {
+      return "Invalid cron expression";
+    }
+  }
+  const minute = selectedTime.value.minute === "" ? "0" : selectedTime.value.minute;
+  const hour = selectedTime.value.hour === "" ? "0" : selectedTime.value.hour;
+  const daysNum = Number(dayInterval.value || "1");
+  const timeStr = `${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
+  if (daysNum <= 1) {
+    return `Every day at ${timeStr}`;
+  } else {
+    return `Every ${daysNum} days at ${timeStr}`;
+  }
+});
+
+function formatWarningIntervalLabel(seconds: number): string {
+  if (seconds < 60) {
+    return `${seconds}s`;
+  } else {
+    const minutes = Math.floor(seconds / 60);
+    return `${minutes}m`;
+  }
+}
+
+function onDayIntervalInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  let value = input.value.replace(/\D/g, "");
+
+  if (value === "") {
+    dayInterval.value = "";
+    return;
+  }
+
+  if (value.length > 1 && value.startsWith("0")) {
+    value = value.replace(/^0+/, "");
+  }
+
+  const num = parseInt(value);
+
+  if (num < 1) {
+    dayInterval.value = "1";
+  } else if (num > 365) {
+    dayInterval.value = "365";
+  } else {
+    dayInterval.value = String(num);
+  }
+}
+
+function resetForm() {
+  task.value = {
+    title: "",
+    action_kind: "restart",
+    options: {},
+    enabled: true,
+    warn_msg: '/tellraw @a "Restarting in {}!"',
+    warn_intervals: [],
+  };
+  scheduleType.value = "daily";
+  dayInterval.value = "1";
+  selectedTime.value = { hour: "9", minute: "0" };
+  customCron.value = "0 0 9 * * *";
+  isNew.value = true;
+  originalTaskId.value = null;
+  error.value = null;
+  if (isValidCron.value) {
+    task.value.every = cronString.value;
+  }
+}
+
+function loadTaskData(taskData: ServerSchedule | Schedule) {
+  task.value = { ...taskData };
+  isNew.value = false;
+  originalTaskId.value = "id" in taskData ? taskData.id : null;
+
+  if (task.value.every && typeof task.value.every === "string") {
+    const parts = task.value.every.split(/\s+/);
+    if (parts.length === 6) {
+      const second = parts[0];
+      const minute = parts[1];
+      const hour = parts[2];
+      const dayOfMonth = parts[3];
+
+      if (second === "0" && dayOfMonth.startsWith("*/")) {
+        scheduleType.value = "daily";
+        dayInterval.value = dayOfMonth.substring(2);
+        selectedTime.value = { hour, minute };
+      } else if (second === "0" && dayOfMonth === "*" && parts[4] === "*" && parts[5] === "*") {
+        scheduleType.value = "daily";
+        dayInterval.value = "1";
+        selectedTime.value = { hour, minute };
+      } else {
+        scheduleType.value = "custom";
+        customCron.value = task.value.every;
+      }
+    } else if (parts.length === 5) {
+      const minute = parts[0];
+      const hour = parts[1];
+      const dayOfMonth = parts[2];
+
+      if (dayOfMonth.startsWith("*/")) {
+        scheduleType.value = "daily";
+        dayInterval.value = dayOfMonth.substring(2);
+        selectedTime.value = { hour, minute };
+      } else if (dayOfMonth === "*" && parts[3] === "*" && parts[4] === "*") {
+        scheduleType.value = "daily";
+        dayInterval.value = "1";
+        selectedTime.value = { hour, minute };
+      } else {
+        scheduleType.value = "custom";
+        customCron.value = `0 ${task.value.every}`;
+      }
+    } else {
+      scheduleType.value = "custom";
+      customCron.value = task.value.every;
+    }
+  }
+}
+
+function show(taskData?: ServerSchedule | Schedule) {
+  if (taskData) {
+    loadTaskData(taskData);
+  } else {
+    resetForm();
+  }
+  modal.value?.show();
+}
+
+function closeModal() {
+  modal.value?.hide();
+}
+
+function onModalHide() {
+  // Reset form when modal is hidden
+  resetForm();
+}
+
+async function saveTask() {
+  loading.value = true;
+  error.value = null;
+
+  if (isValidCron.value) {
+    task.value.every = cronString.value;
+  } else {
+    error.value = "Cannot save with invalid cron expression.";
+    loading.value = false;
+    return;
+  }
+
+  try {
+    if (isNew.value) {
+      const scheduleToCreate: Schedule = {
+        title: task.value.title || "",
+        every: task.value.every!,
+        action_kind: task.value.action_kind!,
+        options: task.value.options!,
+        enabled: task.value.enabled !== undefined ? task.value.enabled : true,
+        warn_msg: task.value.warn_msg !== undefined ? task.value.warn_msg : "",
+        warn_intervals: task.value.warn_intervals || [],
+      };
+      await props.server.scheduling.createTask(scheduleToCreate);
+      closeModal();
+    } else if (originalTaskId.value != null) {
+      await props.server.scheduling.editTask(originalTaskId.value, task.value);
+      closeModal();
+    }
+  } catch (e) {
+    error.value = (e as Error).message || "Failed to save task.";
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch([cronString, isValidCron], ([cron, valid]) => {
+  if (valid) {
+    task.value.every = cron;
+  }
+});
+
+watch(
+  () => task.value.action_kind,
+  (kind) => {
+    if (kind === "game-command") {
+      if (
+        !task.value.options ||
+        typeof task.value.options !== "object" ||
+        !("command" in task.value.options)
+      ) {
+        task.value.options = { command: "" };
+      }
+    } else {
+      task.value.options = {};
+    }
+  },
+  { immediate: true },
+);
+
+defineExpose({
+  show,
+  hide: closeModal,
+});
+</script>
+
+<style scoped></style>

apps/frontend/src/components/ui/thread/ConversationThread.vue

@@ -214,7 +214,7 @@
 </template>
 
 <script setup>
-import { OverflowMenu, MarkdownEditor } from "@modrinth/ui";
+import { CopyCode, OverflowMenu, MarkdownEditor } from "@modrinth/ui";
 import {
   DropdownIcon,
   ReplyIcon,
@@ -226,7 +226,6 @@ import {
   ScaleIcon,
 } from "@modrinth/assets";
 import { useImageUpload } from "~/composables/image-upload.ts";
-import CopyCode from "~/components/ui/CopyCode.vue";
 import ThreadMessage from "~/components/ui/thread/ThreadMessage.vue";
 import { isStaff } from "~/helpers/users.js";
 import { isApproved, isRejected } from "~/helpers/projects.js";

apps/frontend/src/components/ui/thread/ThreadMessage.vue

@@ -103,10 +103,8 @@ import {
   ModrinthIcon,
   ScaleIcon,
 } from "@modrinth/assets";
-import { AutoLink, OverflowMenu, useRelativeTime } from "@modrinth/ui";
+import { AutoLink, Avatar, Badge, OverflowMenu, useRelativeTime } from "@modrinth/ui";
 import { renderString } from "@modrinth/utils";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
 import { isStaff } from "~/helpers/users.js";
 
 const props = defineProps({

apps/frontend/src/composables/image-upload.ts

@@ -19,7 +19,7 @@ export const useImageUpload = async (file: File, ctx: ImageUploadContext) => {
 
   // Make sure file is less than 1MB
   if (file.size > 1024 * 1024) {
-    throw new Error("File is too large");
+    throw new Error("File exceeds the 1MiB size limit");
   }
 
   const qs = new URLSearchParams();

apps/frontend/src/composables/pyroFetch.ts

@@ -1,112 +0,0 @@
-import { $fetch, FetchError } from "ofetch";
-
-interface PyroFetchOptions {
-  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
-  contentType?: string;
-  body?: Record<string, any>;
-  version?: number;
-  override?: {
-    url?: string;
-    token?: string;
-  };
-  retry?: boolean;
-  bypassAuth?: boolean;
-}
-
-export class PyroFetchError extends Error {
-  constructor(
-    message: string,
-    public statusCode?: number,
-    public originalError?: Error,
-  ) {
-    super(message);
-    this.name = "PyroFetchError";
-  }
-}
-
-export async function usePyroFetch<T>(path: string, options: PyroFetchOptions = {}): Promise<T> {
-  const config = useRuntimeConfig();
-  const auth = await useAuth();
-  const authToken = auth.value?.token;
-
-  if (!authToken && !options.bypassAuth) {
-    throw new PyroFetchError("Cannot pyrofetch without auth", 10000);
-  }
-
-  const { method = "GET", contentType = "application/json", body, version = 0, override } = options;
-
-  const base = (import.meta.server ? config.pyroBaseUrl : config.public.pyroBaseUrl)?.replace(
-    /\/$/,
-    "",
-  );
-
-  if (!base) {
-    throw new PyroFetchError(
-      "Cannot pyrofetch without base url. Make sure to set a PYRO_BASE_URL in environment variables",
-      10001,
-    );
-  }
-
-  const fullUrl = override?.url
-    ? `https://${override.url}/${path.replace(/^\//, "")}`
-    : version === 0
-      ? `${base}/modrinth/v${version}/${path.replace(/^\//, "")}`
-      : `${base}/v${version}/${path.replace(/^\//, "")}`;
-
-  type HeadersRecord = Record<string, string>;
-
-  const authHeader: HeadersRecord = options.bypassAuth
-    ? {}
-    : {
-        Authorization: `Bearer ${override?.token ?? authToken}`,
-        "Access-Control-Allow-Headers": "Authorization",
-      };
-
-  const headers: HeadersRecord = {
-    ...authHeader,
-    "User-Agent": "Pyro/1.0 (https://pyro.host)",
-    Vary: "Accept, Origin",
-    "Content-Type": contentType,
-  };
-
-  if (import.meta.client && typeof window !== "undefined") {
-    headers.Origin = window.location.origin;
-  }
-
-  try {
-    const response = await $fetch<T>(fullUrl, {
-      method,
-      headers,
-      body: body && contentType === "application/json" ? JSON.stringify(body) : body ?? undefined,
-      timeout: 10000,
-      retry: options.retry !== false ? (method === "GET" ? 3 : 0) : 0,
-    });
-    return response;
-  } catch (error) {
-    console.error("Fetch error:", error);
-    if (error instanceof FetchError) {
-      const statusCode = error.response?.status;
-      const statusText = error.response?.statusText || "Unknown error";
-      const errorMessages: { [key: number]: string } = {
-        400: "Bad Request",
-        401: "Unauthorized",
-        403: "Forbidden",
-        404: "Not Found",
-        405: "Method Not Allowed",
-        429: "Too Many Requests",
-        500: "Internal Server Error",
-        502: "Bad Gateway",
-      };
-      const message =
-        statusCode && statusCode in errorMessages
-          ? errorMessages[statusCode]
-          : `HTTP Error: ${statusCode || "unknown"} ${statusText}`;
-      throw new PyroFetchError(`[PYROFETCH][PYRO] ${message}`, statusCode, error);
-    }
-    throw new PyroFetchError(
-      "[PYROFETCH][PYRO] An unexpected error occurred during the fetch operation.",
-      undefined,
-      error as Error,
-    );
-  }
-}

apps/frontend/src/composables/servers/modrinth-servers.ts

@@ -0,0 +1,296 @@
+import { ModrinthServerError } from "@modrinth/utils";
+import type { JWTAuth, ModuleError, ModuleName } from "@modrinth/utils";
+import { useServersFetch } from "./servers-fetch.ts";
+
+import {
+  GeneralModule,
+  ContentModule,
+  BackupsModule,
+  NetworkModule,
+  StartupModule,
+  WSModule,
+  FSModule,
+} from "./modules/index.ts";
+import { SchedulingModule } from "./modules/scheduling.ts";
+
+export function handleError(err: any) {
+  if (err instanceof ModrinthServerError && err.v1Error) {
+    addNotification({
+      title: err.v1Error?.context ?? `An error occurred`,
+      type: "error",
+      text: err.v1Error.description,
+      errorCode: err.v1Error.error,
+    });
+  } else {
+    addNotification({
+      title: "An error occurred",
+      type: "error",
+      text: err.message ?? (err.data ? err.data.description : err),
+    });
+  }
+}
+
+export class ModrinthServer {
+  readonly serverId: string;
+  private errors: Partial<Record<ModuleName, ModuleError>> = {};
+
+  readonly general: GeneralModule;
+  readonly content: ContentModule;
+  readonly backups: BackupsModule;
+  readonly network: NetworkModule;
+  readonly startup: StartupModule;
+  readonly ws: WSModule;
+  readonly fs: FSModule;
+  readonly scheduling: SchedulingModule;
+
+  constructor(serverId: string) {
+    this.serverId = serverId;
+
+    this.general = new GeneralModule(this);
+    this.content = new ContentModule(this);
+    this.backups = new BackupsModule(this);
+    this.network = new NetworkModule(this);
+    this.startup = new StartupModule(this);
+    this.ws = new WSModule(this);
+    this.fs = new FSModule(this);
+    this.scheduling = new SchedulingModule(this);
+  }
+
+  async createMissingFolders(path: string): Promise<void> {
+    if (path.startsWith("/")) {
+      path = path.substring(1);
+    }
+    const folders = path.split("/");
+    let currentPath = "";
+
+    for (const folder of folders) {
+      currentPath += "/" + folder;
+      try {
+        await this.fs.createFileOrFolder(currentPath, "directory");
+      } catch {
+        // Folder might already exist, ignore error
+      }
+    }
+  }
+
+  async fetchConfigFile(fileName: string): Promise<any> {
+    return await useServersFetch(`servers/${this.serverId}/config/${fileName}`);
+  }
+
+  constructServerProperties(properties: any): string {
+    let fileContent = `#Minecraft server properties\n#${new Date().toUTCString()}\n`;
+
+    for (const [key, value] of Object.entries(properties)) {
+      if (typeof value === "object") {
+        fileContent += `${key}=${JSON.stringify(value)}\n`;
+      } else if (typeof value === "boolean") {
+        fileContent += `${key}=${value ? "true" : "false"}\n`;
+      } else {
+        fileContent += `${key}=${value}\n`;
+      }
+    }
+
+    return fileContent;
+  }
+
+  async processImage(iconUrl: string | undefined): Promise<string | undefined> {
+    const sharedImage = useState<string | undefined>(`server-icon-${this.serverId}`);
+
+    if (sharedImage.value) {
+      return sharedImage.value;
+    }
+
+    try {
+      const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/fs`);
+      try {
+        const fileData = await useServersFetch(`/download?path=/server-icon-original.png`, {
+          override: auth,
+          retry: false,
+        });
+
+        if (fileData instanceof Blob && import.meta.client) {
+          const dataURL = await new Promise<string>((resolve) => {
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            const img = new Image();
+            img.onload = () => {
+              canvas.width = 512;
+              canvas.height = 512;
+              ctx?.drawImage(img, 0, 0, 512, 512);
+              const dataURL = canvas.toDataURL("image/png");
+              sharedImage.value = dataURL;
+              resolve(dataURL);
+              URL.revokeObjectURL(img.src);
+            };
+            img.src = URL.createObjectURL(fileData);
+          });
+          return dataURL;
+        }
+      } catch (error) {
+        if (error instanceof ModrinthServerError && error.statusCode === 404) {
+          if (iconUrl) {
+            try {
+              const response = await fetch(iconUrl);
+              if (!response.ok) throw new Error("Failed to fetch icon");
+              const file = await response.blob();
+              const originalFile = new File([file], "server-icon-original.png", {
+                type: "image/png",
+              });
+
+              if (import.meta.client) {
+                const dataURL = await new Promise<string>((resolve) => {
+                  const canvas = document.createElement("canvas");
+                  const ctx = canvas.getContext("2d");
+                  const img = new Image();
+                  img.onload = () => {
+                    canvas.width = 64;
+                    canvas.height = 64;
+                    ctx?.drawImage(img, 0, 0, 64, 64);
+                    canvas.toBlob(async (blob) => {
+                      if (blob) {
+                        const scaledFile = new File([blob], "server-icon.png", {
+                          type: "image/png",
+                        });
+                        await useServersFetch(`/create?path=/server-icon.png&type=file`, {
+                          method: "POST",
+                          contentType: "application/octet-stream",
+                          body: scaledFile,
+                          override: auth,
+                        });
+                        await useServersFetch(`/create?path=/server-icon-original.png&type=file`, {
+                          method: "POST",
+                          contentType: "application/octet-stream",
+                          body: originalFile,
+                          override: auth,
+                        });
+                      }
+                    }, "image/png");
+                    const dataURL = canvas.toDataURL("image/png");
+                    sharedImage.value = dataURL;
+                    resolve(dataURL);
+                    URL.revokeObjectURL(img.src);
+                  };
+                  img.src = URL.createObjectURL(file);
+                });
+                return dataURL;
+              }
+            } catch (externalError: any) {
+              console.debug("Could not process external icon:", externalError.message);
+            }
+          }
+        } else {
+          throw error;
+        }
+      }
+    } catch (error: any) {
+      console.debug("Icon processing failed:", error.message);
+    }
+
+    sharedImage.value = undefined;
+    return undefined;
+  }
+
+  async refresh(
+    modules: ModuleName[] = [],
+    options?: {
+      preserveConnection?: boolean;
+      preserveInstallState?: boolean;
+    },
+  ): Promise<void> {
+    const modulesToRefresh =
+      modules.length > 0
+        ? modules
+        : ([
+            "general",
+            "content",
+            "backups",
+            "network",
+            "startup",
+            "ws",
+            "fs",
+            "scheduling",
+          ] as ModuleName[]);
+
+    for (const module of modulesToRefresh) {
+      try {
+        switch (module) {
+          case "general": {
+            if (options?.preserveConnection) {
+              const currentImage = this.general.image;
+              const currentMotd = this.general.motd;
+              const currentStatus = this.general.status;
+
+              await this.general.fetch();
+
+              if (currentImage) {
+                this.general.image = currentImage;
+              }
+              if (currentMotd) {
+                this.general.motd = currentMotd;
+              }
+              if (options.preserveInstallState && currentStatus === "installing") {
+                this.general.status = "installing";
+              }
+            } else {
+              await this.general.fetch();
+            }
+            break;
+          }
+          case "content":
+            await this.content.fetch();
+            break;
+          case "backups":
+            await this.backups.fetch();
+            break;
+          case "network":
+            await this.network.fetch();
+            break;
+          case "startup":
+            await this.startup.fetch();
+            break;
+          case "ws":
+            await this.ws.fetch();
+            break;
+          case "fs":
+            await this.fs.fetch();
+            break;
+          case "scheduling":
+            await this.scheduling.fetch();
+        }
+      } catch (error) {
+        if (error instanceof ModrinthServerError) {
+          if (error.statusCode === 404 && ["fs", "content"].includes(module)) {
+            console.debug(`Optional ${module} resource not found:`, error.message);
+            continue;
+          }
+
+          if (error.statusCode === 503) {
+            console.debug(`Temporary ${module} unavailable:`, error.message);
+            continue;
+          }
+        }
+
+        this.errors[module] = {
+          error:
+            error instanceof ModrinthServerError
+              ? error
+              : new ModrinthServerError("Unknown error", undefined, error as Error),
+          timestamp: Date.now(),
+        };
+      }
+    }
+  }
+
+  get moduleErrors() {
+    return this.errors;
+  }
+}
+
+export const useModrinthServers = async (
+  serverId: string,
+  includedModules: ModuleName[] = ["general"],
+) => {
+  const server = new ModrinthServer(serverId);
+  await server.refresh(includedModules);
+  return reactive(server);
+};

apps/frontend/src/composables/servers/modules/backups.ts

@@ -0,0 +1,79 @@
+import type { Backup, AutoBackupSettings } from "@modrinth/utils";
+import { useServersFetch } from "../servers-fetch.ts";
+import { ServerModule } from "./base.ts";
+
+export class BackupsModule extends ServerModule {
+  data: Backup[] = [];
+
+  async fetch(): Promise<void> {
+    this.data = await useServersFetch<Backup[]>(`servers/${this.serverId}/backups`, {}, "backups");
+  }
+
+  async create(backupName: string): Promise<string> {
+    const response = await useServersFetch<{ id: string }>(`servers/${this.serverId}/backups`, {
+      method: "POST",
+      body: { name: backupName },
+    });
+    await this.fetch(); // Refresh this module
+    return response.id;
+  }
+
+  async rename(backupId: string, newName: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/backups/${backupId}/rename`, {
+      method: "POST",
+      body: { name: newName },
+    });
+    await this.fetch(); // Refresh this module
+  }
+
+  async delete(backupId: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/backups/${backupId}`, {
+      method: "DELETE",
+    });
+    await this.fetch(); // Refresh this module
+  }
+
+  async restore(backupId: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/backups/${backupId}/restore`, {
+      method: "POST",
+    });
+    await this.fetch(); // Refresh this module
+  }
+
+  async prepare(backupId: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/backups/${backupId}/prepare-download`, {
+      method: "POST",
+    });
+  }
+
+  async lock(backupId: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/backups/${backupId}/lock`, {
+      method: "POST",
+    });
+    await this.fetch(); // Refresh this module
+  }
+
+  async unlock(backupId: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/backups/${backupId}/unlock`, {
+      method: "POST",
+    });
+    await this.fetch(); // Refresh this module
+  }
+
+  async retry(backupId: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/backups/${backupId}/retry`, {
+      method: "POST",
+    });
+  }
+
+  async updateAutoBackup(autoBackup: "enable" | "disable", interval: number): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/autobackup`, {
+      method: "POST",
+      body: { set: autoBackup, interval },
+    });
+  }
+
+  async getAutoBackup(): Promise<AutoBackupSettings> {
+    return await useServersFetch(`servers/${this.serverId}/autobackup`);
+  }
+}

apps/frontend/src/composables/servers/modules/base.ts

@@ -0,0 +1,15 @@
+import type { ModrinthServer } from "../modrinth-servers.ts";
+
+export abstract class ServerModule {
+  protected server: ModrinthServer;
+
+  constructor(server: ModrinthServer) {
+    this.server = server;
+  }
+
+  protected get serverId(): string {
+    return this.server.serverId;
+  }
+
+  abstract fetch(): Promise<void>;
+}

apps/frontend/src/composables/servers/modules/content.ts

@@ -0,0 +1,36 @@
+import type { Mod, ContentType } from "@modrinth/utils";
+import { useServersFetch } from "../servers-fetch.ts";
+import { ServerModule } from "./base.ts";
+
+export class ContentModule extends ServerModule {
+  data: Mod[] = [];
+
+  async fetch(): Promise<void> {
+    const mods = await useServersFetch<Mod[]>(`servers/${this.serverId}/mods`, {}, "content");
+    this.data = mods.sort((a, b) => (a?.name ?? "").localeCompare(b?.name ?? ""));
+  }
+
+  async install(contentType: ContentType, projectId: string, versionId: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/mods`, {
+      method: "POST",
+      body: {
+        rinth_ids: { project_id: projectId, version_id: versionId },
+        install_as: contentType,
+      },
+    });
+  }
+
+  async remove(path: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/deleteMod`, {
+      method: "POST",
+      body: { path },
+    });
+  }
+
+  async reinstall(replace: string, projectId: string, versionId: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/mods/update`, {
+      method: "POST",
+      body: { replace, project_id: projectId, version_id: versionId },
+    });
+  }
+}

apps/frontend/src/composables/servers/modules/fs.ts

@@ -0,0 +1,224 @@
+import type {
+  FileUploadQuery,
+  JWTAuth,
+  DirectoryResponse,
+  FilesystemOp,
+  FSQueuedOp,
+} from "@modrinth/utils";
+import { ModrinthServerError } from "@modrinth/utils";
+import { useServersFetch } from "../servers-fetch.ts";
+import { ServerModule } from "./base.ts";
+
+export class FSModule extends ServerModule {
+  auth!: JWTAuth;
+  ops: FilesystemOp[] = [];
+  queuedOps: FSQueuedOp[] = [];
+  opsQueuedForModification: string[] = [];
+
+  async fetch(): Promise<void> {
+    this.auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/fs`, {}, "fs");
+    this.ops = [];
+    this.queuedOps = [];
+    this.opsQueuedForModification = [];
+  }
+
+  private async retryWithAuth<T>(requestFn: () => Promise<T>): Promise<T> {
+    try {
+      return await requestFn();
+    } catch (error) {
+      if (error instanceof ModrinthServerError && error.statusCode === 401) {
+        await this.fetch(); // Refresh auth
+        return await requestFn();
+      }
+      throw error;
+    }
+  }
+
+  listDirContents(path: string, page: number, pageSize: number): Promise<DirectoryResponse> {
+    return this.retryWithAuth(async () => {
+      const encodedPath = encodeURIComponent(path);
+      return await useServersFetch(`/list?path=${encodedPath}&page=${page}&page_size=${pageSize}`, {
+        override: this.auth,
+        retry: false,
+      });
+    });
+  }
+
+  createFileOrFolder(path: string, type: "file" | "directory"): Promise<void> {
+    return this.retryWithAuth(async () => {
+      const encodedPath = encodeURIComponent(path);
+      await useServersFetch(`/create?path=${encodedPath}&type=${type}`, {
+        method: "POST",
+        contentType: "application/octet-stream",
+        override: this.auth,
+      });
+    });
+  }
+
+  uploadFile(path: string, file: File): FileUploadQuery {
+    const encodedPath = encodeURIComponent(path);
+    const progressSubject = new EventTarget();
+    const abortController = new AbortController();
+
+    const uploadPromise = new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+
+      xhr.upload.addEventListener("progress", (e) => {
+        if (e.lengthComputable) {
+          const progress = (e.loaded / e.total) * 100;
+          progressSubject.dispatchEvent(
+            new CustomEvent("progress", {
+              detail: { loaded: e.loaded, total: e.total, progress },
+            }),
+          );
+        }
+      });
+
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve(xhr.response);
+        } else {
+          reject(new Error(`Upload failed with status ${xhr.status}`));
+        }
+      };
+
+      xhr.onerror = () => reject(new Error("Upload failed"));
+      xhr.onabort = () => reject(new Error("Upload cancelled"));
+
+      xhr.open("POST", `https://${this.auth.url}/create?path=${encodedPath}&type=file`);
+      xhr.setRequestHeader("Authorization", `Bearer ${this.auth.token}`);
+      xhr.setRequestHeader("Content-Type", "application/octet-stream");
+      xhr.send(file);
+
+      abortController.signal.addEventListener("abort", () => xhr.abort());
+    });
+
+    return {
+      promise: uploadPromise,
+      onProgress: (
+        callback: (progress: { loaded: number; total: number; progress: number }) => void,
+      ) => {
+        progressSubject.addEventListener("progress", ((e: CustomEvent) => {
+          callback(e.detail);
+        }) as EventListener);
+      },
+      cancel: () => abortController.abort(),
+    } as FileUploadQuery;
+  }
+
+  renameFileOrFolder(path: string, name: string): Promise<void> {
+    const pathName = path.split("/").slice(0, -1).join("/") + "/" + name;
+    return this.retryWithAuth(async () => {
+      await useServersFetch(`/move`, {
+        method: "POST",
+        override: this.auth,
+        body: { source: path, destination: pathName },
+      });
+    });
+  }
+
+  updateFile(path: string, content: string): Promise<void> {
+    const octetStream = new Blob([content], { type: "application/octet-stream" });
+    return this.retryWithAuth(async () => {
+      await useServersFetch(`/update?path=${path}`, {
+        method: "PUT",
+        contentType: "application/octet-stream",
+        body: octetStream,
+        override: this.auth,
+      });
+    });
+  }
+
+  moveFileOrFolder(path: string, newPath: string): Promise<void> {
+    return this.retryWithAuth(async () => {
+      await this.server.createMissingFolders(newPath.substring(0, newPath.lastIndexOf("/")));
+      await useServersFetch(`/move`, {
+        method: "POST",
+        override: this.auth,
+        body: { source: path, destination: newPath },
+      });
+    });
+  }
+
+  deleteFileOrFolder(path: string, recursive: boolean): Promise<void> {
+    const encodedPath = encodeURIComponent(path);
+    return this.retryWithAuth(async () => {
+      await useServersFetch(`/delete?path=${encodedPath}&recursive=${recursive}`, {
+        method: "DELETE",
+        override: this.auth,
+      });
+    });
+  }
+
+  downloadFile(path: string, raw?: boolean): Promise<any> {
+    return this.retryWithAuth(async () => {
+      const encodedPath = encodeURIComponent(path);
+      const fileData = await useServersFetch(`/download?path=${encodedPath}`, {
+        override: this.auth,
+      });
+
+      if (fileData instanceof Blob) {
+        return raw ? fileData : await fileData.text();
+      }
+      return fileData;
+    });
+  }
+
+  extractFile(
+    path: string,
+    override = true,
+    dry = false,
+    silentQueue = false,
+  ): Promise<{ modpack_name: string | null; conflicting_files: string[] }> {
+    return this.retryWithAuth(async () => {
+      const encodedPath = encodeURIComponent(path);
+
+      if (!silentQueue) {
+        this.queuedOps.push({ op: "unarchive", src: path });
+        setTimeout(() => this.removeQueuedOp("unarchive", path), 4000);
+      }
+
+      try {
+        return await useServersFetch(
+          `/unarchive?src=${encodedPath}&trg=/&override=${override}&dry=${dry}`,
+          {
+            method: "POST",
+            override: this.auth,
+            version: 1,
+          },
+          undefined,
+          "Error extracting file",
+        );
+      } catch (err) {
+        this.removeQueuedOp("unarchive", path);
+        throw err;
+      }
+    });
+  }
+
+  modifyOp(id: string, action: "dismiss" | "cancel"): Promise<void> {
+    return this.retryWithAuth(async () => {
+      await useServersFetch(
+        `/ops/${action}?id=${id}`,
+        {
+          method: "POST",
+          override: this.auth,
+          version: 1,
+        },
+        undefined,
+        `Error ${action === "dismiss" ? "dismissing" : "cancelling"} filesystem operation`,
+      );
+
+      this.opsQueuedForModification = this.opsQueuedForModification.filter((x: string) => x !== id);
+      this.ops = this.ops.filter((x: FilesystemOp) => x.id !== id);
+    });
+  }
+
+  removeQueuedOp(op: FSQueuedOp["op"], src: string): void {
+    this.queuedOps = this.queuedOps.filter((x: FSQueuedOp) => x.op !== op || x.src !== src);
+  }
+
+  clearQueuedOps(): void {
+    this.queuedOps = [];
+  }
+}

apps/frontend/src/composables/servers/modules/general.ts

@@ -0,0 +1,179 @@
+import { $fetch } from "ofetch";
+import type { ServerGeneral, Project, PowerAction, JWTAuth } from "@modrinth/utils";
+import { useServersFetch } from "../servers-fetch.ts";
+import { ServerModule } from "./base.ts";
+
+export class GeneralModule extends ServerModule implements ServerGeneral {
+  server_id!: string;
+  name!: string;
+  net!: { ip: string; port: number; domain: string };
+  game!: string;
+  backup_quota!: number;
+  used_backup_quota!: number;
+  status!: string;
+  suspension_reason!: string;
+  loader!: string;
+  loader_version!: string;
+  mc_version!: string;
+  upstream!: {
+    kind: "modpack" | "mod" | "resourcepack";
+    version_id: string;
+    project_id: string;
+  } | null;
+
+  motd?: string;
+  image?: string;
+  project?: Project;
+  sftp_username!: string;
+  sftp_password!: string;
+  sftp_host!: string;
+  datacenter?: string;
+  notices?: any[];
+  node!: { token: string; instance: string };
+  flows?: { intro?: boolean };
+
+  async fetch(): Promise<void> {
+    const data = await useServersFetch<ServerGeneral>(`servers/${this.serverId}`, {}, "general");
+
+    if (data.upstream?.project_id) {
+      const project = await $fetch(
+        `https://api.modrinth.com/v2/project/${data.upstream.project_id}`,
+      );
+      data.project = project as Project;
+    }
+
+    if (import.meta.client) {
+      data.image = (await this.server.processImage(data.project?.icon_url)) ?? undefined;
+    }
+
+    const motd = await this.getMotd();
+    if (motd === "A Minecraft Server") {
+      await this.setMotd(
+        `§b${data.project?.title || data.loader + " " + data.mc_version} §f♦ §aModrinth Servers`,
+      );
+    }
+    data.motd = motd;
+
+    // Copy data to this module
+    Object.assign(this, data);
+  }
+
+  async updateName(newName: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/name`, {
+      method: "POST",
+      body: { name: newName },
+    });
+  }
+
+  async power(action: PowerAction): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/power`, {
+      method: "POST",
+      body: { action },
+    });
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    await this.fetch(); // Refresh this module
+  }
+
+  async reinstall(
+    loader: boolean,
+    projectId: string,
+    versionId?: string,
+    loaderVersionId?: string,
+    hardReset: boolean = false,
+  ): Promise<void> {
+    const hardResetParam = hardReset ? "true" : "false";
+    if (loader) {
+      if (projectId.toLowerCase() === "neoforge") {
+        projectId = "NeoForge";
+      }
+      await useServersFetch(`servers/${this.serverId}/reinstall?hard=${hardResetParam}`, {
+        method: "POST",
+        body: { loader: projectId, loader_version: loaderVersionId, game_version: versionId },
+      });
+    } else {
+      await useServersFetch(`servers/${this.serverId}/reinstall?hard=${hardResetParam}`, {
+        method: "POST",
+        body: { project_id: projectId, version_id: versionId },
+      });
+    }
+  }
+
+  async reinstallFromMrpack(mrpack: File, hardReset: boolean = false): Promise<void> {
+    const hardResetParam = hardReset ? "true" : "false";
+    const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/reinstallFromMrpack`);
+
+    const formData = new FormData();
+    formData.append("file", mrpack);
+
+    const response = await fetch(
+      `https://${auth.url}/reinstallMrpackMultiparted?hard=${hardResetParam}`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${auth.token}`,
+        },
+        body: formData,
+        signal: AbortSignal.timeout(30 * 60 * 1000),
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`[pyroservers] native fetch err status: ${response.status}`);
+    }
+  }
+
+  async suspend(status: boolean): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/suspend`, {
+      method: "POST",
+      body: { suspended: status },
+    });
+  }
+
+  async endIntro(): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/flows/intro`, {
+      method: "DELETE",
+      version: 1,
+    });
+    await this.fetch(); // Refresh this module
+  }
+
+  async getMotd(): Promise<string | undefined> {
+    try {
+      const props = await this.server.fs.downloadFile("/server.properties");
+      if (props) {
+        const lines = props.split("\n");
+        for (const line of lines) {
+          if (line.startsWith("motd=")) {
+            return line.slice(5);
+          }
+        }
+      }
+    } catch {
+      return undefined;
+    }
+    return undefined;
+  }
+
+  async setMotd(motd: string): Promise<void> {
+    try {
+      const props = (await this.server.fetchConfigFile("ServerProperties")) as any;
+      if (props) {
+        props.motd = motd;
+        const newProps = this.server.constructServerProperties(props);
+        const octetStream = new Blob([newProps], { type: "application/octet-stream" });
+        const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/fs`);
+
+        await useServersFetch(`/update?path=/server.properties`, {
+          method: "PUT",
+          contentType: "application/octet-stream",
+          body: octetStream,
+          override: auth,
+        });
+      }
+    } catch {
+      console.error(
+        "[Modrinth Servers] [General] Failed to set MOTD due to lack of server properties file.",
+      );
+    }
+  }
+}

apps/frontend/src/composables/servers/modules/index.ts

@@ -0,0 +1,8 @@
+export * from "./base.ts";
+export * from "./backups.ts";
+export * from "./content.ts";
+export * from "./fs.ts";
+export * from "./general.ts";
+export * from "./network.ts";
+export * from "./startup.ts";
+export * from "./ws.ts";

apps/frontend/src/composables/servers/modules/network.ts

@@ -0,0 +1,47 @@
+import type { Allocation } from "@modrinth/utils";
+import { useServersFetch } from "../servers-fetch.ts";
+import { ServerModule } from "./base.ts";
+
+export class NetworkModule extends ServerModule {
+  allocations: Allocation[] = [];
+
+  async fetch(): Promise<void> {
+    this.allocations = await useServersFetch<Allocation[]>(
+      `servers/${this.serverId}/allocations`,
+      {},
+      "network",
+    );
+  }
+
+  async reserveAllocation(name: string): Promise<Allocation> {
+    return await useServersFetch<Allocation>(`servers/${this.serverId}/allocations?name=${name}`, {
+      method: "POST",
+    });
+  }
+
+  async updateAllocation(port: number, name: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/allocations/${port}?name=${name}`, {
+      method: "PUT",
+    });
+  }
+
+  async deleteAllocation(port: number): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/allocations/${port}`, {
+      method: "DELETE",
+    });
+  }
+
+  async checkSubdomainAvailability(subdomain: string): Promise<boolean> {
+    const result = (await useServersFetch(`subdomains/${subdomain}/isavailable`)) as {
+      available: boolean;
+    };
+    return result.available;
+  }
+
+  async changeSubdomain(subdomain: string): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/subdomain`, {
+      method: "POST",
+      body: { subdomain },
+    });
+  }
+}

apps/frontend/src/composables/servers/modules/scheduling.ts

@@ -0,0 +1,80 @@
+import type { Schedule, ServerSchedule } from "@modrinth/utils";
+import { useServersFetch } from "../servers-fetch.ts";
+import { ServerModule } from "./base.ts";
+
+export class SchedulingModule extends ServerModule {
+  tasks: ServerSchedule[] = [];
+
+  private optimisticUpdate(action: () => void): () => void {
+    const originalTasks = [...this.tasks];
+    action();
+    return () => {
+      this.tasks = originalTasks;
+    };
+  }
+
+  async fetch(): Promise<void> {
+    const response = await useServersFetch<{ schedules: { quota: 32; items: ServerSchedule[] } }>(
+      `servers/${this.serverId}/options`,
+      { version: 1 },
+    );
+    this.tasks = response.schedules.items;
+  }
+
+  async deleteTask(task: ServerSchedule): Promise<void> {
+    const rollback = this.optimisticUpdate(() => {
+      this.tasks = this.tasks.filter((t) => t.id !== task.id);
+    });
+
+    try {
+      await useServersFetch(`servers/${this.serverId}/options/schedules/${task.id}`, {
+        method: "DELETE",
+        version: 1,
+      });
+    } catch (error) {
+      rollback();
+      throw error;
+    }
+  }
+
+  async createTask(task: Schedule): Promise<number> {
+    const rollback = this.optimisticUpdate(() => {});
+
+    try {
+      const response = await useServersFetch<{ id: number }>(
+        `servers/${this.serverId}/options/schedules`,
+        {
+          method: "POST",
+          body: task,
+          version: 1,
+        },
+      );
+
+      this.tasks.push({ ...task, id: response.id } as ServerSchedule);
+      return response.id;
+    } catch (error) {
+      rollback();
+      throw error;
+    }
+  }
+
+  async editTask(taskId: number, updatedTask: Partial<Schedule>): Promise<void> {
+    const rollback = this.optimisticUpdate(() => {
+      const taskIndex = this.tasks.findIndex((t) => t.id === taskId);
+      if (taskIndex !== -1) {
+        this.tasks[taskIndex] = { ...this.tasks[taskIndex], ...updatedTask };
+      }
+    });
+
+    try {
+      await useServersFetch(`servers/${this.serverId}/options/schedules/${taskId}`, {
+        method: "PATCH",
+        body: updatedTask,
+        version: 1,
+      });
+    } catch (error) {
+      rollback();
+      throw error;
+    }
+  }
+}

apps/frontend/src/composables/servers/modules/startup.ts

@@ -0,0 +1,26 @@
+import type { Startup, JDKVersion, JDKBuild } from "@modrinth/utils";
+import { useServersFetch } from "../servers-fetch.ts";
+import { ServerModule } from "./base.ts";
+
+export class StartupModule extends ServerModule implements Startup {
+  invocation!: string;
+  original_invocation!: string;
+  jdk_version!: JDKVersion;
+  jdk_build!: JDKBuild;
+
+  async fetch(): Promise<void> {
+    const data = await useServersFetch<Startup>(`servers/${this.serverId}/startup`, {}, "startup");
+    Object.assign(this, data);
+  }
+
+  async update(invocation: string, jdkVersion: JDKVersion, jdkBuild: JDKBuild): Promise<void> {
+    await useServersFetch(`servers/${this.serverId}/startup`, {
+      method: "POST",
+      body: {
+        invocation: invocation || null,
+        jdk_version: jdkVersion || null,
+        jdk_build: jdkBuild || null,
+      },
+    });
+  }
+}

apps/frontend/src/composables/servers/modules/ws.ts

@@ -0,0 +1,13 @@
+import type { JWTAuth } from "@modrinth/utils";
+import { useServersFetch } from "../servers-fetch.ts";
+import { ServerModule } from "./base.ts";
+
+export class WSModule extends ServerModule implements JWTAuth {
+  url!: string;
+  token!: string;
+
+  async fetch(): Promise<void> {
+    const data = await useServersFetch<JWTAuth>(`servers/${this.serverId}/ws`, {}, "ws");
+    Object.assign(this, data);
+  }
+}

apps/frontend/src/composables/servers/servers-fetch.ts

@@ -0,0 +1,188 @@
+import { $fetch, FetchError } from "ofetch";
+import { ModrinthServerError, ModrinthServersFetchError } from "@modrinth/utils";
+import type { V1ErrorInfo } from "@modrinth/utils";
+
+export interface ServersFetchOptions {
+  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+  contentType?: string;
+  body?: Record<string, any>;
+  version?: number;
+  override?: {
+    url?: string;
+    token?: string;
+  };
+  retry?: number | boolean;
+  bypassAuth?: boolean;
+}
+
+export async function useServersFetch<T>(
+  path: string,
+  options: ServersFetchOptions = {},
+  module?: string,
+  errorContext?: string,
+): Promise<T> {
+  const config = useRuntimeConfig();
+  const auth = await useAuth();
+  const authToken = auth.value?.token;
+
+  if (!authToken && !options.bypassAuth) {
+    const error = new ModrinthServersFetchError(
+      "[Modrinth Servers] Cannot fetch without auth",
+      10000,
+    );
+    throw new ModrinthServerError("Missing auth token", 401, error, module);
+  }
+
+  const {
+    method = "GET",
+    contentType = "application/json",
+    body,
+    version = 0,
+    override,
+    retry = method === "GET" ? 3 : 0,
+  } = options;
+
+  const base = (import.meta.server ? config.pyroBaseUrl : config.public.pyroBaseUrl)?.replace(
+    /\/$/,
+    "",
+  );
+
+  if (!base) {
+    const error = new ModrinthServersFetchError(
+      "[Modrinth Servers] Cannot fetch without base url. Make sure to set a PYRO_BASE_URL in environment variables",
+      10001,
+    );
+    throw new ModrinthServerError("Configuration error: Missing PYRO_BASE_URL", 500, error, module);
+  }
+
+  const versionString = `v${version}`;
+  let newOverrideUrl = override?.url;
+  if (newOverrideUrl && newOverrideUrl.includes("v0") && version !== 0) {
+    newOverrideUrl = newOverrideUrl.replace("v0", versionString);
+  }
+
+  const fullUrl = newOverrideUrl
+    ? `https://${newOverrideUrl}/${path.replace(/^\//, "")}`
+    : version === 0
+      ? `${base}/modrinth/v${version}/${path.replace(/^\//, "")}`
+      : `${base}/v${version}/${path.replace(/^\//, "")}`;
+
+  const headers: Record<string, string> = {
+    "User-Agent": "Modrinth/1.0 (https://modrinth.com)",
+    Vary: "Accept, Origin",
+  };
+
+  if (!options.bypassAuth) {
+    headers.Authorization = `Bearer ${override?.token ?? authToken}`;
+    headers["Access-Control-Allow-Headers"] = "Authorization";
+  }
+
+  if (contentType !== "none") {
+    headers["Content-Type"] = contentType;
+  }
+
+  if (import.meta.client && typeof window !== "undefined") {
+    headers.Origin = window.location.origin;
+  }
+
+  let attempts = 0;
+  const maxAttempts = (typeof retry === "boolean" ? (retry ? 3 : 1) : retry) + 1;
+  let lastError: Error | null = null;
+
+  while (attempts < maxAttempts) {
+    try {
+      const response = await $fetch<T>(fullUrl, {
+        method,
+        headers,
+        body: body && contentType === "application/json" ? JSON.stringify(body) : body ?? undefined,
+        timeout: 10000,
+      });
+
+      return response;
+    } catch (error) {
+      lastError = error as Error;
+      attempts++;
+
+      if (error instanceof FetchError) {
+        const statusCode = error.response?.status;
+        const statusText = error.response?.statusText || "Unknown error";
+
+        let v1Error: V1ErrorInfo | undefined;
+        if (error.data?.error && error.data?.description) {
+          v1Error = {
+            context: errorContext,
+            ...error.data,
+          };
+        }
+
+        const errorMessages: { [key: number]: string } = {
+          400: "Bad Request",
+          401: "Unauthorized",
+          403: "Forbidden",
+          404: "Not Found",
+          405: "Method Not Allowed",
+          408: "Request Timeout",
+          429: "Too Many Requests",
+          500: "Internal Server Error",
+          502: "Bad Gateway",
+          503: "Service Unavailable",
+          504: "Gateway Timeout",
+        };
+
+        const message =
+          statusCode && statusCode in errorMessages
+            ? errorMessages[statusCode]
+            : `HTTP Error: ${statusCode || "unknown"} ${statusText}`;
+
+        const isRetryable = statusCode ? [408, 429, 500, 502, 504].includes(statusCode) : true;
+
+        if (!isRetryable || attempts >= maxAttempts) {
+          console.error("Fetch error:", error);
+
+          const fetchError = new ModrinthServersFetchError(
+            `[Modrinth Servers] ${message}`,
+            statusCode,
+            error,
+          );
+          throw new ModrinthServerError(error.message, statusCode, fetchError, module, v1Error);
+        }
+
+        const delay = Math.min(1000 * Math.pow(2, attempts - 1) + Math.random() * 1000, 10000);
+        console.warn(`Retrying request in ${delay}ms (attempt ${attempts}/${maxAttempts - 1})`);
+        await new Promise((resolve) => setTimeout(resolve, delay));
+        continue;
+      }
+
+      console.error("Unexpected fetch error:", error);
+      const fetchError = new ModrinthServersFetchError(
+        "[Modrinth Servers] An unexpected error occurred during the fetch operation.",
+        undefined,
+        error as Error,
+      );
+      throw new ModrinthServerError(
+        "Unexpected error during fetch operation",
+        undefined,
+        fetchError,
+        module,
+      );
+    }
+  }
+
+  console.error("All retry attempts failed:", lastError);
+  if (lastError instanceof FetchError) {
+    const statusCode = lastError.response?.status;
+    const pyroError = new ModrinthServersFetchError(
+      "Maximum retry attempts reached",
+      statusCode,
+      lastError,
+    );
+    throw new ModrinthServerError("Maximum retry attempts reached", statusCode, pyroError, module);
+  }
+
+  const fetchError = new ModrinthServersFetchError(
+    "Maximum retry attempts reached",
+    undefined,
+    lastError || undefined,
+  );
+  throw new ModrinthServerError("Maximum retry attempts reached", undefined, fetchError, module);
+}

apps/frontend/src/pages/[type]/[id].vue

@@ -32,7 +32,7 @@
             <h1 class="wrap-as-needed">
               {{ project.title }}
             </h1>
-            <Badge :type="project.status" />
+            <ProjectStatusBadge :status="project.status" />
           </div>
         </div>
         <h2>Project settings</h2>
@@ -870,6 +870,7 @@ import {
   ProjectSidebarCreators,
   ProjectSidebarDetails,
   ProjectSidebarLinks,
+  ProjectStatusBadge,
   ScrollablePanel,
   useRelativeTime,
 } from "@modrinth/ui";
@@ -880,7 +881,6 @@ import dayjs from "dayjs";
 import Accordion from "~/components/ui/Accordion.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 import AutomaticAccordion from "~/components/ui/AutomaticAccordion.vue";
-import Badge from "~/components/ui/Badge.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import MessageBanner from "~/components/ui/MessageBanner.vue";

apps/frontend/src/pages/[type]/[id]/settings/index.vue

@@ -242,8 +242,7 @@
 import { formatProjectStatus } from "@modrinth/utils";
 import { UploadIcon, SaveIcon, TrashIcon, XIcon, IssuesIcon, CheckIcon } from "@modrinth/assets";
 import { Multiselect } from "vue-multiselect";
-import { ConfirmModal } from "@modrinth/ui";
-import Avatar from "~/components/ui/Avatar.vue";
+import { ConfirmModal, Avatar } from "@modrinth/ui";
 import FileInput from "~/components/ui/FileInput.vue";
 
 const props = defineProps({

apps/frontend/src/pages/[type]/[id]/version/[version].vue

@@ -630,7 +630,15 @@
   </div>
 </template>
 <script>
-import { ButtonStyled, ConfirmModal, MarkdownEditor } from "@modrinth/ui";
+import {
+  Avatar,
+  Badge,
+  CopyCode,
+  Checkbox,
+  ButtonStyled,
+  ConfirmModal,
+  MarkdownEditor,
+} from "@modrinth/ui";
 import {
   FileIcon,
   TrashIcon,
@@ -656,13 +664,9 @@ import { renderHighlightedString } from "~/helpers/highlight.js";
 import { reportVersion } from "~/utils/report-helpers.ts";
 import { useImageUpload } from "~/composables/image-upload.ts";
 
-import Avatar from "~/components/ui/Avatar.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
-import Badge from "~/components/ui/Badge.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
 import Categories from "~/components/ui/search/Categories.vue";
-import Checkbox from "~/components/ui/Checkbox.vue";
 import FileInput from "~/components/ui/FileInput.vue";
 import Modal from "~/components/ui/Modal.vue";
 

apps/frontend/src/pages/admin/servers/notices.vue

@@ -275,7 +275,7 @@ import { useVIntl } from "@vintl/vintl";
 import type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
 import { computed } from "vue";
 import { NOTICE_LEVELS } from "@modrinth/ui/src/utils/notices.ts";
-import { usePyroFetch } from "~/composables/pyroFetch.ts";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 import AssignNoticeModal from "~/components/ui/servers/notice/AssignNoticeModal.vue";
 
 const { formatMessage } = useVIntl();
@@ -290,7 +290,7 @@ const assignNoticeModal = ref<InstanceType<typeof AssignNoticeModal>>();
 await refreshNotices();
 
 async function refreshNotices() {
-  await usePyroFetch("notices").then((res) => {
+  await useServersFetch("notices").then((res) => {
     notices.value = res as ServerNoticeType[];
     notices.value.sort((a, b) => {
       const dateDiff = dayjs(b.announce_at).diff(dayjs(a.announce_at));
@@ -347,7 +347,7 @@ function startEditing(notice: ServerNoticeType, assignments: boolean = false) {
 }
 
 async function deleteNotice(notice: ServerNoticeType) {
-  await usePyroFetch(`notices/${notice.id}`, {
+  await useServersFetch(`notices/${notice.id}`, {
     method: "DELETE",
   })
     .then(() => {
@@ -401,7 +401,7 @@ async function saveChanges() {
     return;
   }
 
-  await usePyroFetch(`notices/${editingNotice.value?.id}`, {
+  await useServersFetch(`notices/${editingNotice.value?.id}`, {
     method: "PATCH",
     body: {
       message: newNoticeMessage.value,
@@ -432,7 +432,7 @@ async function createNotice() {
     return;
   }
 
-  await usePyroFetch("notices", {
+  await useServersFetch("notices", {
     method: "POST",
     body: {
       message: newNoticeMessage.value,

apps/frontend/src/pages/app.vue

@@ -8,13 +8,11 @@ import {
   DownloadIcon,
   LinkIcon,
 } from "@modrinth/assets";
-import Avatar from "~/components/ui/Avatar.vue";
+import { Avatar, Checkbox, Badge } from "@modrinth/ui";
 import LogoAnimated from "~/components/brand/LogoAnimated.vue";
-import Badge from "~/components/ui/Badge.vue";
 import PrismIcon from "~/assets/images/external/prism.svg?component";
 import ATLauncher from "~/assets/images/external/atlauncher.svg?component";
 import CurseForge from "~/assets/images/external/curseforge.svg?component";
-import Checkbox from "~/components/ui/Checkbox.vue";
 
 import { homePageProjects } from "~/generated/state.json";
 

apps/frontend/src/pages/dashboard/index.vue

@@ -97,7 +97,7 @@
 </template>
 <script setup>
 import { ChevronRightIcon, HistoryIcon } from "@modrinth/assets";
-import Avatar from "~/components/ui/Avatar.vue";
+import { Avatar } from "@modrinth/ui";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
 import { fetchExtraNotificationData, groupNotifications } from "~/helpers/notifications.ts";
 

apps/frontend/src/pages/dashboard/notifications.vue

@@ -49,12 +49,14 @@
         />
       </template>
       <p v-else>You don't have any unread notifications.</p>
-      <Pagination :page="page" :count="pages" @switch-page="changePage" />
+      <div class="flex justify-end">
+        <Pagination :page="page" :count="pages" @switch-page="changePage" />
+      </div>
     </section>
   </div>
 </template>
 <script setup>
-import { Button, Chips } from "@modrinth/ui";
+import { Button, Pagination, Chips } from "@modrinth/ui";
 import { HistoryIcon, CheckCheckIcon } from "@modrinth/assets";
 import {
   fetchExtraNotificationData,
@@ -63,7 +65,6 @@ import {
 } from "~/helpers/notifications.ts";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
-import Pagination from "~/components/ui/Pagination.vue";
 
 useHead({
   title: "Notifications - Modrinth",

apps/frontend/src/pages/dashboard/organizations.vue

@@ -14,7 +14,7 @@
       <template v-if="orgs?.length > 0">
         <div class="orgs-grid">
           <nuxt-link
-            v-for="org in orgs"
+            v-for="org in sortedOrgs"
             :key="org.id"
             :to="`/organization/${org.slug}`"
             class="universal-card button-base recessed org"
@@ -67,6 +67,8 @@ const { data: orgs, error } = useAsyncData("organizations", () => {
   });
 });
 
+const sortedOrgs = computed(() => orgs.value.sort((a, b) => a.name.localeCompare(b.name)));
+
 const onlyAcceptedMembers = (members) => members.filter((member) => member?.accepted);
 
 if (error.value) {

apps/frontend/src/pages/dashboard/projects.vue

@@ -279,18 +279,19 @@
             </div>
 
             <div>
-              <Badge v-if="project.status" :type="project.status" class="status" />
+              <ProjectStatusBadge v-if="project.status" :status="project.status" />
             </div>
 
             <div>
-              <nuxt-link
-                class="square-button"
-                :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
-                  project.slug ? project.slug : project.id
-                }/settings`"
-              >
-                <SettingsIcon />
-              </nuxt-link>
+              <ButtonStyled circular>
+                <nuxt-link
+                  :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
+                    project.slug ? project.slug : project.id
+                  }/settings`"
+                >
+                  <SettingsIcon />
+                </nuxt-link>
+              </ButtonStyled>
             </div>
           </div>
         </div>
@@ -312,19 +313,23 @@ import {
   SortAscendingIcon as AscendingIcon,
   SortDescendingIcon as DescendingIcon,
 } from "@modrinth/assets";
-import { commonMessages } from "@modrinth/ui";
+import {
+  Avatar,
+  ButtonStyled,
+  Checkbox,
+  CopyCode,
+  ProjectStatusBadge,
+  commonMessages,
+} from "@modrinth/ui";
 
-import Badge from "~/components/ui/Badge.vue";
-import Checkbox from "~/components/ui/Checkbox.vue";
 import Modal from "~/components/ui/Modal.vue";
-import Avatar from "~/components/ui/Avatar.vue";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
 
 export default defineNuxtComponent({
   components: {
     Avatar,
-    Badge,
+    ButtonStyled,
+    ProjectStatusBadge,
     SettingsIcon,
     TrashIcon,
     Checkbox,

apps/frontend/src/pages/index.vue

@@ -527,7 +527,7 @@
 </template>
 <script setup>
 import { Multiselect } from "vue-multiselect";
-import { ButtonStyled, useRelativeTime } from "@modrinth/ui";
+import { Avatar, ButtonStyled, useRelativeTime } from "@modrinth/ui";
 import {
   CompassIcon,
   LogInIcon,
@@ -539,7 +539,6 @@ import {
 } from "@modrinth/assets";
 import PrismLauncherLogo from "~/assets/images/external/prism.svg?component";
 import ATLauncherLogo from "~/assets/images/external/atlauncher.svg?component";
-import Avatar from "~/components/ui/Avatar.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 
 import { homePageProjects, homePageSearch, homePageNotifs } from "~/generated/state.json";

apps/frontend/src/pages/moderation/review.vue

@@ -81,7 +81,9 @@
         </div>
         <div class="mobile-row">
           is requesting to be
-          <Badge :type="project.requested_status ? project.requested_status : 'approved'" />
+          <ProjectStatusBadge
+            :status="project.requested_status ? project.requested_status : 'approved'"
+          />
         </div>
       </div>
       <div class="input-group">
@@ -103,7 +105,7 @@
 </template>
 
 <script setup>
-import { Chips, useRelativeTime } from "@modrinth/ui";
+import { Avatar, ProjectStatusBadge, Chips, useRelativeTime } from "@modrinth/ui";
 import {
   UnknownIcon,
   EyeIcon,
@@ -112,9 +114,8 @@ import {
   IssuesIcon,
   ScaleIcon,
 } from "@modrinth/assets";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
 import { formatProjectType } from "~/plugins/shorthands.js";
+import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
 
 useHead({
   title: "Review projects - Modrinth",
@@ -170,28 +171,6 @@ const projectTypes = computed(() => {
   return [...set];
 });
 
-function segmentData(data, segmentSize = 800) {
-  return data.reduce((acc, curr, index) => {
-    const segment = Math.floor(index / segmentSize);
-
-    if (!acc[segment]) {
-      acc[segment] = [];
-    }
-    acc[segment].push(curr);
-    return acc;
-  }, []);
-}
-
-function fetchSegmented(data, createUrl, options = {}) {
-  return Promise.all(segmentData(data).map((ids) => useBaseFetch(createUrl(ids), options))).then(
-    (results) => results.flat(),
-  );
-}
-
-function asEncodedJsonArray(data) {
-  return encodeURIComponent(JSON.stringify(data));
-}
-
 if (projects.value) {
   const teamIds = projects.value.map((x) => x.team_id);
   const orgIds = projects.value.filter((x) => x.organization).map((x) => x.organization);

apps/frontend/src/pages/search/[searchProjectType].vue

@@ -334,6 +334,7 @@ import {
   ImageIcon,
 } from "@modrinth/assets";
 import { computed } from "vue";
+import { useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 import LogoAnimated from "~/components/brand/LogoAnimated.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
@@ -388,7 +389,7 @@ async function updateServerContext() {
     if (!auth.value.user) {
       router.push("/auth/sign-in?redirect=" + encodeURIComponent(route.fullPath));
     } else if (route.query.sid !== null) {
-      server.value = await usePyroServer(route.query.sid, ["general", "content"], {
+      server.value = await useModrinthServers(route.query.sid, ["general", "content"], {
         waitForModules: true,
       });
     }
@@ -519,7 +520,6 @@ async function serverInstall(project) {
 
     if (projectType.value.id === "modpack") {
       await server.value.general.reinstall(
-        server.value.serverId,
         false,
         project.project_id,
         version.id,

apps/frontend/src/pages/servers/index.vue

@@ -623,6 +623,7 @@ import {
   ServerIcon,
 } from "@modrinth/assets";
 import { products } from "~/generated/state.json";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
 import ServerPlanSelector from "~/components/ui/servers/marketing/ServerPlanSelector.vue";
 import OptionGroup from "~/components/ui/OptionGroup.vue";
@@ -674,7 +675,7 @@ const outOfStockUrl = "https://discord.modrinth.com";
 const { data: hasServers } = await useAsyncData("ServerListCountCheck", async () => {
   try {
     if (!auth.value.user) return false;
-    const response = await usePyroFetch("servers");
+    const response = await useServersFetch("servers");
     return response.servers && response.servers.length > 0;
   } catch {
     return false;
@@ -682,7 +683,7 @@ const { data: hasServers } = await useAsyncData("ServerListCountCheck", async ()
 });
 
 function fetchStock(region, request) {
-  return usePyroFetch(`stock?region=${region.shortcode}`, {
+  return useServersFetch(`stock?region=${region.shortcode}`, {
     method: "POST",
     body: {
       ...request,
@@ -702,7 +703,7 @@ async function fetchCapacityStatuses(customProduct = null) {
           ),
         ];
     const capacityChecks = productsToCheck.map((product) =>
-      usePyroFetch("stock", {
+      useServersFetch("stock", {
         method: "POST",
         body: {
           cpu: product.metadata.cpu,
@@ -892,7 +893,7 @@ const regions = ref([]);
 const regionPings = ref([]);
 
 function pingRegions() {
-  usePyroFetch("regions", {
+  useServersFetch("regions", {
     method: "GET",
     version: 1,
     bypassAuth: true,

apps/frontend/src/pages/servers/manage/[id].vue

@@ -18,160 +18,96 @@
     v-if="serverData?.status === 'suspended' && serverData.suspension_reason === 'upgrading'"
     class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
   >
-    <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
-      <div class="flex flex-col items-center text-center">
-        <div class="flex flex-col items-center gap-4">
-          <div class="grid place-content-center rounded-full bg-bg-blue p-4">
-            <TransferIcon class="size-12 text-blue" />
-          </div>
-          <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Server upgrading</h1>
-        </div>
-        <p class="text-lg text-secondary">
-          Your server's hardware is currently being upgraded and will be back online shortly!
-        </p>
-      </div>
-    </div>
+    <ErrorInformationCard
+      title="Server upgrading"
+      description="Your server's hardware is currently being upgraded and will be back online shortly!"
+      :icon="TransferIcon"
+      icon-color="blue"
+      :action="generalErrorAction"
+    />
   </div>
   <div
     v-else-if="serverData?.status === 'suspended'"
     class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
   >
-    <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
-      <div class="flex flex-col items-center text-center">
-        <div class="flex flex-col items-center gap-4">
-          <div class="grid place-content-center rounded-full bg-bg-orange p-4">
-            <LockIcon class="size-12 text-orange" />
-          </div>
-          <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Server suspended</h1>
-        </div>
-        <p class="text-lg text-secondary">
-          {{
-            serverData.suspension_reason === "cancelled"
-              ? "Your subscription has been cancelled."
-              : serverData.suspension_reason
-                ? `Your server has been suspended: ${serverData.suspension_reason}`
-                : "Your server has been suspended."
-          }}
-          <br />
-          Contact Modrinth Support if you believe this is an error.
-        </p>
-      </div>
-      <ButtonStyled size="large" color="brand" @click="() => router.push('/settings/billing')">
-        <button class="mt-6 !w-full">Go to billing settings</button>
-      </ButtonStyled>
-    </div>
+    <ErrorInformationCard
+      title="Server suspended"
+      :description="suspendedDescription"
+      :icon="LockIcon"
+      icon-color="orange"
+      :action="suspendedAction"
+    />
   </div>
   <div
     v-else-if="
-      server.general?.error?.error.statusCode === 403 ||
-      server.general?.error?.error.statusCode === 404
+      server.moduleErrors?.general?.error.statusCode === 403 ||
+      server.moduleErrors?.general?.error.statusCode === 404
     "
     class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
   >
-    <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
-      <div class="flex flex-col items-center text-center">
-        <div class="flex flex-col items-center gap-4">
-          <div class="grid place-content-center rounded-full bg-bg-orange p-4">
-            <TransferIcon class="size-12 text-orange" />
-          </div>
-          <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Server not found</h1>
-        </div>
-        <p class="text-lg text-secondary">
-          You don't have permission to view this server or it no longer exists. If you believe this
-          is an error, please contact Modrinth Support.
-        </p>
-      </div>
-      <UiCopyCode :text="JSON.stringify(server.general?.error)" />
-
-      <ButtonStyled size="large" color="brand" @click="() => router.push('/servers/manage')">
-        <button class="mt-6 !w-full">Go back to all servers</button>
-      </ButtonStyled>
-    </div>
+    <ErrorInformationCard
+      title="An error occured."
+      description="Please contact Modrinth Support."
+      :icon="TransferIcon"
+      icon-color="orange"
+      :error-details="generalErrorDetails"
+      :action="generalErrorAction"
+    />
   </div>
   <div
-    v-else-if="server.general?.error?.error.statusCode === 503"
+    v-else-if="server.moduleErrors?.general?.error.statusCode === 503"
     class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
   >
-    <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
-      <div class="flex flex-col items-center text-center">
-        <div class="flex flex-col items-center gap-4">
-          <div class="grid place-content-center rounded-full bg-bg-red p-4">
-            <UiServersIconsPanelErrorIcon class="size-12 text-red" />
-          </div>
-          <h1 class="m-0 mb-4 w-fit text-4xl font-bold">Server Node Unavailable</h1>
+    <ErrorInformationCard
+      title="Server Node Unavailable"
+      :icon="PanelErrorIcon"
+      icon-color="red"
+      :action="nodeUnavailableAction"
+      :error-details="nodeUnavailableDetails"
+    >
+      <template #description>
+        <div class="text-md space-y-4">
+          <p class="leading-[170%] text-secondary">
+            Your server's node, where your Modrinth Server is physically hosted, is experiencing
+            issues. We are working with our datacenter to resolve the issue as quickly as possible.
+          </p>
+          <p class="leading-[170%] text-secondary">
+            Your data is safe and will not be lost, and your server will be back online as soon as
+            the issue is resolved.
+          </p>
+          <p class="leading-[170%] text-secondary">
+            For updates, please join the Modrinth Discord or contact Modrinth Support via the chat
+            bubble in the bottom right corner and we'll be happy to help.
+          </p>
         </div>
-        <p class="m-0 mb-4 leading-[170%] text-secondary">
-          Your server's node, where your Modrinth Server is physically hosted, is experiencing
-          issues. We are working with our datacenter to resolve the issue as quickly as possible.
-        </p>
-        <p class="m-0 mb-4 leading-[170%] text-secondary">
-          Your data is safe and will not be lost, and your server will be back online as soon as the
-          issue is resolved.
-        </p>
-        <p class="m-0 mb-4 leading-[170%] text-secondary">
-          For updates, please join the Modrinth Discord or contact Modrinth Support via the chat
-          bubble in the bottom right corner and we'll be happy to help.
-        </p>
-
-        <div class="flex flex-col gap-2">
-          <UiCopyCode :text="'Server ID: ' + server.serverId" />
-          <UiCopyCode :text="'Node: ' + server.general?.datacenter" />
-        </div>
-      </div>
-      <ButtonStyled
-        size="large"
-        color="standard"
-        @click="
-          () =>
-            navigateTo('https://discord.modrinth.com', {
-              external: true,
-            })
-        "
-      >
-        <button class="mt-6 !w-full">Join Modrinth Discord</button>
-      </ButtonStyled>
-      <ButtonStyled
-        :disabled="formattedTime !== '00'"
-        size="large"
-        color="standard"
-        @click="() => reloadNuxtApp()"
-      >
-        <button class="mt-3 !w-full">Reload</button>
-      </ButtonStyled>
-    </div>
+      </template>
+    </ErrorInformationCard>
   </div>
   <div
-    v-else-if="server.general?.error"
+    v-else-if="server.moduleErrors?.general?.error"
     class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
   >
-    <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
-      <div class="flex flex-col items-center text-center">
-        <div class="flex flex-col items-center gap-4">
-          <div class="grid place-content-center rounded-full bg-bg-orange p-4">
-            <TransferIcon class="size-12 text-orange" />
-          </div>
-          <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Connection lost</h1>
+    <ErrorInformationCard
+      title="Connection lost"
+      description=""
+      :icon="TransferIcon"
+      icon-color="orange"
+      :action="connectionLostAction"
+    >
+      <template #description>
+        <div class="space-y-4">
           <div class="text-center text-secondary">
             {{
               formattedTime == "00" ? "Reconnecting..." : `Retrying in ${formattedTime} seconds...`
             }}
           </div>
+          <p class="text-lg text-secondary">
+            Something went wrong, and we couldn't connect to your server. This is likely due to a
+            temporary network issue. You'll be reconnected automatically.
+          </p>
         </div>
-        <p class="text-lg text-secondary">
-          Something went wrong, and we couldn't connect to your server. This is likely due to a
-          temporary network issue. You'll be reconnected automatically.
-        </p>
-      </div>
-      <UiCopyCode :text="JSON.stringify(server.general?.error)" />
-      <ButtonStyled
-        :disabled="formattedTime !== '00'"
-        size="large"
-        color="brand"
-        @click="() => reloadNuxtApp()"
-      >
-        <button class="mt-6 !w-full">Reload</button>
-      </ButtonStyled>
-    </div>
+      </template>
+    </ErrorInformationCard>
   </div>
   <!-- SERVER START -->
   <div
@@ -252,7 +188,7 @@
         </h2>
 
         <ServerInstallation
-          :server="server"
+          :server="server as ModrinthServer"
           :backup-in-progress="backupInProgress"
           ignore-current-installation
           @reinstall="onReinstall"
@@ -419,7 +355,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch, type Reactive } from "vue";
 import {
   SettingsIcon,
   CopyIcon,
@@ -432,15 +368,23 @@ import {
   LockIcon,
 } from "@modrinth/assets";
 import DOMPurify from "dompurify";
-import { ButtonStyled, ServerNotice } from "@modrinth/ui";
+import { ButtonStyled, ErrorInformationCard, ServerNotice } from "@modrinth/ui";
 import { Intercom, shutdown } from "@intercom/messenger-js-sdk";
-import { reloadNuxtApp, navigateTo } from "#app";
 import type { MessageDescriptor } from "@vintl/vintl";
-import type { ServerState, Stats, WSEvent, WSInstallationResultEvent } from "~/types/servers";
-import { usePyroConsole } from "~/store/console.ts";
-import { type Backup } from "~/composables/pyroServers.ts";
-import { usePyroFetch } from "~/composables/pyroFetch.ts";
+import type {
+  ServerState,
+  Stats,
+  WSEvent,
+  WSInstallationResultEvent,
+  Backup,
+  PowerAction,
+} from "@modrinth/utils";
+import { reloadNuxtApp, navigateTo } from "#app";
+import { useModrinthServersConsole } from "~/store/console.ts";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+import { ModrinthServer, useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
 import ServerInstallation from "~/components/ui/servers/ServerInstallation.vue";
+import PanelErrorIcon from "~/components/ui/servers/icons/PanelErrorIcon.vue";
 
 const app = useNuxtApp() as unknown as { $notify: any };
 
@@ -467,19 +411,19 @@ const route = useNativeRoute();
 const router = useRouter();
 const serverId = route.params.id as string;
 
-const server = await usePyroServer(serverId, ["general", "ws"]);
+const server: Reactive<ModrinthServer> = await useModrinthServers(serverId, ["general", "ws"]);
 
 const loadModulesPromise = Promise.resolve().then(() => {
   if (server.general?.status === "suspended") {
     return;
   }
-  return server.loadModules(["content", "backups", "network", "startup", "fs"]);
+  return server.refresh(["content", "backups", "network", "startup", "fs", "scheduling"]);
 });
 
 provide("modulesLoaded", loadModulesPromise);
 
 watch(
-  () => [server.general?.error, server.ws?.error],
+  () => [server.moduleErrors?.general, server.moduleErrors?.ws],
   ([generalError, wsError]) => {
     if (server.general?.status === "suspended") return;
 
@@ -497,7 +441,7 @@ const errorLogFile = ref("");
 const serverData = computed(() => server.general);
 const isConnected = ref(false);
 const isWSAuthIncorrect = ref(false);
-const pyroConsole = usePyroConsole();
+const modrinthServersConsole = useModrinthServersConsole();
 const cpuData = ref<number[]>([]);
 const ramData = ref<number[]>([]);
 const isActioning = ref(false);
@@ -671,7 +615,7 @@ const connectWebSocket = () => {
         return;
       }
 
-      pyroConsole.clear();
+      modrinthServersConsole.clear();
       socket.value?.send(JSON.stringify({ event: "auth", jwt: wsAuth.value?.token }));
       isConnected.value = true;
       isReconnecting.value = false;
@@ -679,7 +623,7 @@ const connectWebSocket = () => {
 
       if (firstConnect.value) {
         for (let i = 0; i < initialConsoleMessage.length; i++) {
-          pyroConsole.addLine(initialConsoleMessage[i]);
+          modrinthServersConsole.addLine(initialConsoleMessage[i]);
         }
       }
 
@@ -702,7 +646,9 @@ const connectWebSocket = () => {
 
     socket.value.onclose = () => {
       if (isMounted.value) {
-        pyroConsole.addLine("\nSomething went wrong with the connection, we're reconnecting...");
+        modrinthServersConsole.addLine(
+          "\nSomething went wrong with the connection, we're reconnecting...",
+        );
         isConnected.value = false;
         scheduleReconnect();
       }
@@ -751,7 +697,7 @@ const startUptimeUpdates = () => {
 const stopUptimeUpdates = () => {
   if (uptimeIntervalId) {
     clearInterval(uptimeIntervalId);
-    intervalId = null;
+    pollingIntervalId = null;
   }
 };
 
@@ -760,7 +706,7 @@ const handleWebSocketMessage = (data: WSEvent) => {
     case "log":
       // eslint-disable-next-line no-case-declarations
       const log = data.message.split("\n").filter((l) => l.trim());
-      pyroConsole.addLines(log);
+      modrinthServersConsole.addLines(log);
       break;
     case "stats":
       updateStats(data);
@@ -1021,11 +967,11 @@ const toAdverb = (word: string) => {
   return word + "ing";
 };
 
-const sendPowerAction = async (action: "restart" | "start" | "stop" | "kill") => {
+const sendPowerAction = async (action: PowerAction) => {
   const actionName = action.charAt(0).toUpperCase() + action.slice(1);
   try {
     isActioning.value = true;
-    await server.general?.power(actionName);
+    await server.general?.power(action);
   } catch (error) {
     console.error(`Error ${toAdverb(actionName)} server:`, error);
     notifyError(
@@ -1046,7 +992,7 @@ const notifyError = (title: string, text: string) => {
   });
 };
 
-let intervalId: ReturnType<typeof setInterval> | null = null;
+let pollingIntervalId: ReturnType<typeof setInterval> | null = null;
 const countdown = ref(15);
 
 const formattedTime = computed(() => {
@@ -1090,23 +1036,142 @@ const backupInProgress = computed(() => {
 });
 
 const stopPolling = () => {
-  if (intervalId) {
-    clearInterval(intervalId);
-    intervalId = null;
+  if (pollingIntervalId) {
+    clearTimeout(pollingIntervalId);
+    pollingIntervalId = null;
   }
 };
 
 const startPolling = () => {
-  countdown.value = 15;
-  intervalId = setInterval(() => {
-    if (countdown.value <= 0) {
-      reloadNuxtApp();
-    } else {
-      countdown.value--;
+  stopPolling();
+
+  let retryCount = 0;
+  const maxRetries = 10;
+
+  const poll = async () => {
+    try {
+      await server.refresh(["general", "ws"]);
+
+      if (!server.moduleErrors?.general?.error) {
+        stopPolling();
+        connectWebSocket();
+        return;
+      }
+
+      retryCount++;
+      if (retryCount >= maxRetries) {
+        console.error("Max retries reached, stopping polling");
+        stopPolling();
+        return;
+      }
+
+      // Exponential backoff: 3s, 6s, 12s, 24s, etc.
+      const delay = Math.min(3000 * Math.pow(2, retryCount - 1), 60000);
+
+      pollingIntervalId = setTimeout(poll, delay);
+    } catch (error) {
+      console.error("Polling failed:", error);
+      retryCount++;
+
+      if (retryCount < maxRetries) {
+        const delay = Math.min(3000 * Math.pow(2, retryCount - 1), 60000);
+        pollingIntervalId = setTimeout(poll, delay);
+      }
     }
-  }, 1000);
+  };
+
+  poll();
 };
 
+const nodeUnavailableDetails = computed(() => [
+  {
+    label: "Server ID",
+    value: server.serverId,
+    type: "inline" as const,
+  },
+  {
+    label: "Node",
+    value: server.general?.datacenter ?? "Unknown! Please contact support!",
+    type: "inline" as const,
+  },
+]);
+
+const suspendedDescription = computed(() => {
+  if (serverData.value?.suspension_reason === "cancelled") {
+    return "Your subscription has been cancelled.\nContact Modrinth Support if you believe this is an error.";
+  }
+  if (serverData.value?.suspension_reason) {
+    return `Your server has been suspended: ${serverData.value.suspension_reason}\nContact Modrinth Support if you believe this is an error.`;
+  }
+  return "Your server has been suspended.\nContact Modrinth Support if you believe this is an error.";
+});
+
+const generalErrorDetails = computed(() => [
+  {
+    label: "Server ID",
+    value: server.serverId,
+    type: "inline" as const,
+  },
+  {
+    label: "Timestamp",
+    value: String(server.moduleErrors?.general?.timestamp),
+    type: "inline" as const,
+  },
+  {
+    label: "Error Name",
+    value: server.moduleErrors?.general?.error.name,
+    type: "inline" as const,
+  },
+  {
+    label: "Error Message",
+    value: server.moduleErrors?.general?.error.message,
+    type: "block" as const,
+  },
+  ...(server.moduleErrors?.general?.error.originalError
+    ? [
+        {
+          label: "Original Error",
+          value: String(server.moduleErrors.general.error.originalError),
+          type: "hidden" as const,
+        },
+      ]
+    : []),
+  ...(server.moduleErrors?.general?.error.stack
+    ? [
+        {
+          label: "Stack Trace",
+          value: server.moduleErrors.general.error.stack,
+          type: "hidden" as const,
+        },
+      ]
+    : []),
+]);
+
+const suspendedAction = computed(() => ({
+  label: "Go to billing settings",
+  onClick: () => router.push("/settings/billing"),
+  color: "brand" as const,
+}));
+
+const generalErrorAction = computed(() => ({
+  label: "Go back to all servers",
+  onClick: () => router.push("/servers/manage"),
+  color: "brand" as const,
+}));
+
+const nodeUnavailableAction = computed(() => ({
+  label: "Join Modrinth Discord",
+  onClick: () => navigateTo("https://discord.modrinth.com", { external: true }),
+  color: "standard" as const,
+}));
+
+const connectionLostAction = computed(() => ({
+  label: "Reload",
+  onClick: () => reloadNuxtApp(),
+  color: "brand" as const,
+  disabled: formattedTime.value !== "00",
+}));
+
 const copyServerDebugInfo = () => {
   const debugInfo = `Server ID: ${serverData.value?.server_id}\nError: ${errorMessage.value}\nKind: ${serverData.value?.upstream?.kind}\nProject ID: ${serverData.value?.upstream?.project_id}\nVersion ID: ${serverData.value?.upstream?.version_id}\nLog: ${errorLog.value}`;
   navigator.clipboard.writeText(debugInfo);
@@ -1158,7 +1223,7 @@ const cleanup = () => {
 };
 
 async function dismissNotice(noticeId: number) {
-  await usePyroFetch(`servers/${serverId}/notices/${noticeId}/dismiss`, {
+  await useServersFetch(`servers/${serverId}/notices/${noticeId}/dismiss`, {
     method: "POST",
   }).catch((err) => {
     app.$notify({
@@ -1177,8 +1242,8 @@ onMounted(() => {
     isLoading.value = false;
     return;
   }
-  if (server.error) {
-    if (!server.error.message.includes("Forbidden")) {
+  if (server.moduleErrors.general?.error) {
+    if (!server.moduleErrors.general?.error?.message?.includes("Forbidden")) {
       startPolling();
     }
   } else {

apps/frontend/src/pages/servers/manage/[id]/backups.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="server.backups?.error"
+    v-if="server.moduleErrors.backups"
     class="flex w-full flex-col items-center justify-center gap-4 p-4"
   >
     <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
@@ -15,7 +15,9 @@
           We couldn't load your server's backups. Here's what went wrong:
         </p>
         <p>
-          <span class="break-all font-mono">{{ JSON.stringify(server.backups.error) }}</span>
+          <span class="break-all font-mono">{{
+            JSON.stringify(server.moduleErrors.backups.error)
+          }}</span>
         </p>
         <ButtonStyled size="large" color="brand" @click="() => server.refresh(['backups'])">
           <button class="mt-6 !w-full">Retry</button>
@@ -152,16 +154,17 @@ import { ButtonStyled, TagItem } from "@modrinth/ui";
 import { useStorage } from "@vueuse/core";
 import { SpinnerIcon, PlusIcon, DownloadIcon, SettingsIcon, IssuesIcon } from "@modrinth/assets";
 import { ref, computed } from "vue";
-import type { Server } from "~/composables/pyroServers";
+import type { Backup } from "@modrinth/utils";
 import BackupItem from "~/components/ui/servers/BackupItem.vue";
 import BackupRenameModal from "~/components/ui/servers/BackupRenameModal.vue";
 import BackupCreateModal from "~/components/ui/servers/BackupCreateModal.vue";
 import BackupRestoreModal from "~/components/ui/servers/BackupRestoreModal.vue";
 import BackupDeleteModal from "~/components/ui/servers/BackupDeleteModal.vue";
 import BackupSettingsModal from "~/components/ui/servers/BackupSettingsModal.vue";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
   isServerRunning: boolean;
 }>();
 

apps/frontend/src/pages/servers/manage/[id]/content.vue

@@ -5,12 +5,12 @@
 </template>
 
 <script setup lang="ts">
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const route = useNativeRoute();
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();
 
 const data = computed(() => props.server.general);

apps/frontend/src/pages/servers/manage/[id]/content/index.vue

@@ -11,7 +11,7 @@
   />
 
   <div
-    v-if="server.content?.error"
+    v-if="server.moduleErrors.content"
     class="flex w-full flex-col items-center justify-center gap-4 p-4"
   >
     <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
@@ -24,7 +24,9 @@
         </div>
         <p class="text-lg text-secondary">
           We couldn't load your server's {{ type.toLowerCase() }}s. Here's what we know:
-          <span class="break-all font-mono">{{ JSON.stringify(server.content.error) }}</span>
+          <span class="break-all font-mono">{{
+            JSON.stringify(server.moduleErrors.content.error)
+          }}</span>
         </p>
         <ButtonStyled size="large" color="brand" @click="() => server.refresh(['content'])">
           <button class="mt-6 !w-full">Retry</button>
@@ -349,13 +351,14 @@ import {
 } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
 import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+import type { Mod } from "@modrinth/utils";
 import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
 import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
-import type { Server } from "~/composables/pyroServers";
 import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();
 
 const type = computed(() => {

apps/frontend/src/pages/servers/manage/[id]/files.vue

@@ -278,16 +278,11 @@ import {
 } from "@modrinth/assets";
 import { computed } from "vue";
 import { ButtonStyled, ProgressBar } from "@modrinth/ui";
-import { formatBytes } from "@modrinth/utils";
-import {
-  type DirectoryResponse,
-  type DirectoryItem,
-  type Server,
-  handleError,
-} from "~/composables/pyroServers.ts";
+import { formatBytes, ModrinthServersFetchError } from "@modrinth/utils";
+import type { FilesystemOp, FSQueuedOp, DirectoryItem, DirectoryResponse } from "@modrinth/utils";
+import { handleError, ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
 import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
-import type { FilesystemOp, FSQueuedOp } from "~/types/servers.ts";
 import FilesUploadZipUrlModal from "~/components/ui/servers/FilesUploadZipUrlModal.vue";
 import FilesUploadConflictModal from "~/components/ui/servers/FilesUploadConflictModal.vue";
 
@@ -316,7 +311,7 @@ interface RenameOperation extends BaseOperation {
 type Operation = MoveOperation | RenameOperation;
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();
 
 const modulesLoaded = inject<Promise<void>>("modulesLoaded");
@@ -402,7 +397,7 @@ const fetchDirectoryContents = async (): Promise<DirectoryResponse> => {
     };
   } catch (error) {
     console.error("Error fetching directory contents:", error);
-    if (error instanceof PyroFetchError && error.statusCode === 400) {
+    if (error instanceof ModrinthServersFetchError && error.statusCode === 400) {
       return directoryData.value || { items: [], total: 0 };
     }
     throw error;
@@ -561,7 +556,7 @@ const handleRenameItem = async (newName: string) => {
     });
   } catch (error) {
     console.error("Error renaming item:", error);
-    if (error instanceof PyroFetchError) {
+    if (error instanceof ModrinthServersFetchError) {
       if (error.statusCode === 400) {
         addNotification({
           group: "files",
@@ -719,7 +714,7 @@ const showDeleteModal = (item: any) => {
 
 const handleCreateError = (error: any) => {
   console.error("Error creating item:", error);
-  if (error instanceof PyroFetchError) {
+  if (error instanceof ModrinthServersFetchError) {
     if (error.statusCode === 400) {
       addNotification({
         group: "files",

apps/frontend/src/pages/servers/manage/[id]/index.vue

@@ -1,11 +1,7 @@
 <template>
-  <div
-    v-if="isConnected && !isWsAuthIncorrect"
-    class="relative flex select-none flex-col gap-6"
-    data-pyro-server-manager-root
-  >
+  <div class="relative flex select-none flex-col gap-6" data-pyro-server-manager-root>
     <div
-      v-if="inspectingError"
+      v-if="inspectingError && isConnected && !isWsAuthIncorrect"
       data-pyro-servers-inspecting-error
       class="flex justify-between rounded-2xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
     >
@@ -77,26 +73,34 @@
         </ButtonStyled>
       </div>
     </div>
+
     <div class="flex flex-col-reverse gap-6 md:flex-col">
-      <UiServersServerStats :data="stats" />
+      <UiServersServerStats
+        :data="isConnected && !isWsAuthIncorrect ? stats : undefined"
+        :loading="!isConnected || isWsAuthIncorrect"
+      />
+
       <div
         class="relative flex h-[700px] w-full flex-col gap-3 overflow-hidden rounded-2xl border border-divider bg-bg-raised p-4 transition-all duration-300 ease-in-out md:p-8"
+        :class="{ 'border-0': !isConnected || isWsAuthIncorrect }"
       >
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-4">
             <h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
-
-            <UiServersPanelServerStatus :state="serverPowerState" />
+            <UiServersPanelServerStatus
+              v-if="isConnected && !isWsAuthIncorrect"
+              :state="serverPowerState"
+            />
           </div>
         </div>
-        <!-- <div class="flex flex-row items-center gap-2 text-sm font-medium">
-          <InfoIcon class="hidden sm:block" />
-          Click and drag to select lines, then CMD+C to copy
-        </div> -->
-        <UiServersPanelTerminal :full-screen="fullScreen">
+
+        <UiServersPanelTerminal
+          :full-screen="fullScreen"
+          :loading="!isConnected || isWsAuthIncorrect"
+        >
           <div class="relative w-full px-4 pt-4">
             <ul
-              v-if="suggestions.length"
+              v-if="suggestions.length && isConnected && !isWsAuthIncorrect"
               id="command-suggestions"
               ref="suggestionsList"
               class="mt-1 max-h-60 w-full list-none overflow-auto rounded-md border border-divider bg-bg-raised p-0 shadow-lg"
@@ -120,7 +124,7 @@
             </ul>
             <div class="relative flex items-center">
               <span
-                v-if="bestSuggestion"
+                v-if="bestSuggestion && isConnected && !isWsAuthIncorrect"
                 class="pointer-events-none absolute left-[26px] transform select-none text-gray-400"
               >
                 <span class="ml-[23.5px] whitespace-pre">{{
@@ -142,7 +146,7 @@
                 <TerminalSquareIcon class="ml-3 h-5 w-5" />
               </div>
               <input
-                v-if="isServerRunning"
+                v-if="isServerRunning && isConnected && !isWsAuthIncorrect"
                 v-model="commandInput"
                 type="text"
                 placeholder="Send a command"
@@ -168,29 +172,25 @@
         </UiServersPanelTerminal>
       </div>
     </div>
-  </div>
-  <UiServersOverviewLoading v-else-if="!isConnected && !isWsAuthIncorrect" />
-  <div v-else-if="isWsAuthIncorrect" class="flex flex-col">
-    <h2>Could not connect to the server.</h2>
-    <p>
-      An error occurred while attempting to connect to your server. Please try refreshing the page.
-      (WebSocket Authentication Failed)
-    </p>
-  </div>
-  <div v-else class="flex flex-col">
-    <h2>Could not connect to the server.</h2>
-    <p>
-      An error occurred while attempting to connect to your server. Please try refreshing the page.
-      (No further information)
-    </p>
+
+    <div
+      v-if="isWsAuthIncorrect"
+      class="absolute inset-0 flex flex-col items-center justify-center bg-bg"
+    >
+      <h2>Could not connect to the server.</h2>
+      <p>
+        An error occurred while attempting to connect to your server. Please try refreshing the
+        page. (WebSocket Authentication Failed)
+      </p>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { TerminalSquareIcon, XIcon, IssuesIcon } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
-import type { ServerState, Stats } from "~/types/servers";
-import type { Server } from "~/composables/pyroServers";
+import type { ServerState, Stats } from "@modrinth/utils";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 type ServerProps = {
   socket: WebSocket | null;
@@ -203,7 +203,7 @@ type ServerProps = {
     exit_code?: number;
   };
   isServerRunning: boolean;
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 };
 
 const props = defineProps<ServerProps>();

apps/frontend/src/pages/servers/manage/[id]/options.vue

@@ -16,15 +16,16 @@ import {
   CardIcon,
   UserIcon,
   WrenchIcon,
+  CalendarSyncIcon,
 } from "@modrinth/assets";
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
 
 const route = useRoute();
 const serverId = route.params.id as string;
 
 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
   backupInProgress?: BackupInProgressReason;
 }>();
 
@@ -35,6 +36,11 @@ useHead({
 const navLinks = [
   { icon: SettingsIcon, label: "General", href: `/servers/manage/${serverId}/options` },
   { icon: WrenchIcon, label: "Platform", href: `/servers/manage/${serverId}/options/loader` },
+  {
+    icon: CalendarSyncIcon,
+    label: "Task Scheduling",
+    href: `/servers/manage/${serverId}/options/scheduling`,
+  },
   { icon: TextQuoteIcon, label: "Startup", href: `/servers/manage/${serverId}/options/startup` },
   { icon: VersionIcon, label: "Network", href: `/servers/manage/${serverId}/options/network` },
   { icon: ListIcon, label: "Properties", href: `/servers/manage/${serverId}/options/properties` },