refactor: Huge pyro servers composable cleanup (#3745)

* refactor: start refactor of pyro servers module-based class * refactor: finish modules * refactor: start on type checking + matching api * refactor: finish pyro servers composable refactor * refactor: pyro -> modrinth * fix: import not refactored * fix: broken power action enums * fix: remove pyro mentions * fix: lint * refactor: fix option pages * fix: error renames * remove empty pyro-servers.ts file --------- Signed-off-by: IMB11 <hendersoncal117@gmail.com> Co-authored-by: Prospector <prospectordev@gmail.com>
2025-06-11 23:32:39 +01:00
parent 6955731def
commit 1b1d41605b
77 changed files with 1791 additions and 2513 deletions
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/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,
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/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,
--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -63,8 +63,8 @@
  </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"
  >
@@ -81,7 +81,7 @@
          is an error, please contact Modrinth Support.
        </p>
      </div>
-      <UiCopyCode :text="JSON.stringify(server.general?.error)" />
+      <UiCopyCode :text="JSON.stringify(server.moduleErrors?.general?.error)" />

      <ButtonStyled size="large" color="brand" @click="() => router.push('/servers/manage')">
        <button class="mt-6 !w-full">Go back to all servers</button>
@@ -89,7 +89,7 @@
    </div>
  </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">
@@ -141,7 +141,7 @@
    </div>
  </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">
@@ -162,7 +162,7 @@
          temporary network issue. You'll be reconnected automatically.
        </p>
      </div>
-      <UiCopyCode :text="JSON.stringify(server.general?.error)" />
+      <UiCopyCode :text="JSON.stringify(server.moduleErrors?.general?.error)" />
      <ButtonStyled
        :disabled="formattedTime !== '00'"
        size="large"
@@ -252,7 +252,7 @@
        </h2>

        <ServerInstallation
-          :server="server"
+          :server="server as ModrinthServer"
          :backup-in-progress="backupInProgress"
          ignore-current-installation
          @reinstall="onReinstall"
@@ -419,7 +419,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,
@@ -434,12 +434,19 @@ import {
 import DOMPurify from "dompurify";
 import { ButtonStyled, 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";

 const app = useNuxtApp() as unknown as { $notify: any };
@@ -467,19 +474,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"]);
 });

 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 +504,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 +678,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 +686,7 @@ const connectWebSocket = () => {

      if (firstConnect.value) {
        for (let i = 0; i < initialConsoleMessage.length; i++) {
-          pyroConsole.addLine(initialConsoleMessage[i]);
+          modrinthServersConsole.addLine(initialConsoleMessage[i]);
        }
      }

@@ -702,7 +709,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();
      }
@@ -760,7 +769,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 +1030,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(
@@ -1158,7 +1167,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 +1186,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 {
--- a/apps/frontend/src/pages/servers/manage/[id]/backups.vue
+++ b/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;
 }>();

--- a/apps/frontend/src/pages/servers/manage/[id]/content.vue
+++ b/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);
--- a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
+++ b/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(() => {
--- a/apps/frontend/src/pages/servers/manage/[id]/files.vue
+++ b/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",
--- a/apps/frontend/src/pages/servers/manage/[id]/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/index.vue
@@ -189,8 +189,8 @@
 <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>();
--- a/apps/frontend/src/pages/servers/manage/[id]/options.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options.vue
@@ -17,14 +17,14 @@ import {
  UserIcon,
  WrenchIcon,
 } 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;
 }>();

--- a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
@@ -114,11 +114,10 @@
 <script setup lang="ts">
 import { EditIcon, TransferIcon } from "@modrinth/assets";
 import ButtonStyled from "@modrinth/ui/src/components/base/ButtonStyled.vue";
-
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();

 const data = computed(() => props.server.general);
--- a/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
@@ -117,13 +117,13 @@
 <script setup lang="ts">
 import { ButtonStyled } from "@modrinth/ui";
 import { CopyIcon, ExternalIcon, EyeIcon, EyeOffIcon } from "@modrinth/assets";
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

 const route = useNativeRoute();
 const serverId = route.params.id as string;

 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();

 const data = computed(() => props.server.general);
--- a/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
@@ -7,12 +7,12 @@
 </template>

 <script setup lang="ts">
-import type { Server } from "~/composables/pyroServers";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
 import ServerInstallation from "~/components/ui/servers/ServerInstallation.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;
 }>();

--- a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
@@ -60,7 +60,7 @@

    <div class="relative h-full w-full overflow-y-auto">
      <div
-        v-if="server.network?.error"
+        v-if="server.moduleErrors.network"
        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">
@@ -73,7 +73,9 @@
            </div>
            <p class="text-lg text-secondary">
              We couldn't load your server's network settings. Here's what we know:
-              <span class="break-all font-mono">{{ JSON.stringify(server.network.error) }}</span>
+              <span class="break-all font-mono">{{
+                JSON.stringify(server.moduleErrors.network.error)
+              }}</span>
            </p>
            <ButtonStyled size="large" color="brand" @click="() => server.refresh(['network'])">
              <button class="mt-6 !w-full">Retry</button>
@@ -273,10 +275,10 @@ import {
 } from "@modrinth/assets";
 import { ButtonStyled, NewModal, ConfirmModal } from "@modrinth/ui";
 import { ref, computed, nextTick } from "vue";
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();

 const isUpdating = ref(false);
--- a/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
@@ -43,13 +43,13 @@

 <script setup lang="ts">
 import { useStorage } from "@vueuse/core";
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

 const route = useNativeRoute();
 const serverId = route.params.id as string;

 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();

 const preferences = {
--- a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
@@ -1,6 +1,9 @@
 <template>
  <div class="relative h-full w-full select-none overflow-y-auto">
-    <div v-if="server.fs?.error" class="flex w-full flex-col items-center justify-center gap-4 p-4">
+    <div
+      v-if="server.moduleErrors.fs"
+      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">
        <div class="flex flex-col items-center text-center">
          <div class="flex flex-col items-center gap-4">
@@ -11,7 +14,9 @@
          </div>
          <p class="text-lg text-secondary">
            We couldn't access your server's properties. Here's what we know:
-            <span class="break-all font-mono">{{ JSON.stringify(server.fs.error) }}</span>
+            <span class="break-all font-mono">{{
+              JSON.stringify(server.moduleErrors.fs.error)
+            }}</span>
          </p>
          <ButtonStyled size="large" color="brand" @click="() => server.refresh(['fs'])">
            <button class="mt-6 !w-full">Retry</button>
@@ -141,10 +146,10 @@
 import { ref, watch, computed, inject } from "vue";
 import { EyeIcon, SearchIcon, IssuesIcon } from "@modrinth/assets";
 import Fuse from "fuse.js";
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();

 const tags = useTags();
--- a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="relative h-full w-full">
    <div
-      v-if="server.startup?.error"
+      v-if="server.moduleErrors.startup"
      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">
@@ -16,7 +16,9 @@
            We couldn't load your server's startup settings. Here's what we know:
          </p>
          <p>
-            <span class="break-all font-mono">{{ JSON.stringify(server.startup.error) }}</span>
+            <span class="break-all font-mono">{{
+              JSON.stringify(server.moduleErrors.startup.error)
+            }}</span>
          </p>
          <ButtonStyled size="large" color="brand" @click="() => server.refresh(['startup'])">
            <button class="mt-6 !w-full">Retry</button>
@@ -112,10 +114,10 @@
 <script setup lang="ts">
 import { UpdatedIcon, IssuesIcon } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
-import type { Server } from "~/composables/pyroServers";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

 const props = defineProps<{
-  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  server: ModrinthServer;
 }>();

 const data = computed(() => props.server.general);
--- a/apps/frontend/src/pages/servers/manage/index.vue
+++ b/apps/frontend/src/pages/servers/manage/index.vue
@@ -36,7 +36,7 @@
            <li v-if="fetchError" class="text-red">
              <p>Error details:</p>
              <UiCopyCode
-                :text="(fetchError as PyroFetchError).message || 'Unknown error'"
+                :text="(fetchError as ModrinthServersFetchError).message || 'Unknown error'"
                :copyable="false"
                :selectable="false"
                :language="'json'"
@@ -121,9 +121,9 @@ import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import Fuse from "fuse.js";
 import { HammerIcon, PlusIcon, SearchIcon } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
+import type { Server, ModrinthServersFetchError } from "@modrinth/utils";
 import { reloadNuxtApp } from "#app";
-import type { PyroFetchError } from "~/composables/pyroFetch";
-import type { Server } from "~/types/servers";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";

 definePageMeta({
  middleware: "auth",
@@ -146,7 +146,9 @@ const {
  data: serverResponse,
  error: fetchError,
  refresh,
-} = await useAsyncData<ServerResponse>("ServerList", () => usePyroFetch<ServerResponse>("servers"));
+} = await useAsyncData<ServerResponse>("ServerList", () =>
+  useServersFetch<ServerResponse>("servers"),
+);

 watch([fetchError, serverResponse], ([error, response]) => {
  hasError.value = !!error || !response;
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -592,6 +592,7 @@ import {
 } from "@modrinth/assets";
 import { calculateSavings, formatPrice, getCurrency } from "@modrinth/utils";
 import { ref, computed } from "vue";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 import { products } from "~/generated/state.json";

 definePageMeta({
@@ -744,7 +745,7 @@ const [
    useBaseFetch("billing/subscriptions", { internal: true }),
  ),
  useAsyncData("billing/products", () => useBaseFetch("billing/products", { internal: true })),
-  useAsyncData("servers", () => usePyroFetch("servers")),
+  useAsyncData("servers", () => useServersFetch("servers")),
 ]);

 const midasProduct = ref(products.find((x) => x.metadata?.type === "midas"));
@@ -984,7 +985,7 @@ async function fetchCapacityStatuses(serverId, product) {
  if (product) {
    try {
      return {
-        custom: await usePyroFetch(`servers/${serverId}/upgrade-stock`, {
+        custom: await useServersFetch(`servers/${serverId}/upgrade-stock`, {
          method: "POST",
          body: {
            cpu: product.metadata.cpu,