From 43dccec5687b3d071494e0c86dbc965d9558b622 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 13:16:31 -0400
Subject: [PATCH 01/21] feat: add dialog component

---
 api/dev/Unraid.net/myservers.cfg              |  2 +-
 .../src/components/common/dialog/Dialog.vue   | 14 +++++
 .../components/common/dialog/DialogClose.vue  | 11 ++++
 .../common/dialog/DialogContent.vue           | 50 ++++++++++++++++
 .../common/dialog/DialogDescription.vue       | 21 +++++++
 .../components/common/dialog/DialogFooter.vue | 19 ++++++
 .../components/common/dialog/DialogHeader.vue | 16 +++++
 .../common/dialog/DialogScrollContent.vue     | 56 ++++++++++++++++++
 .../components/common/dialog/DialogTitle.vue  | 26 ++++++++
 .../common/dialog/DialogTrigger.vue           | 11 ++++
 .../src/components/common/dialog/index.ts     |  9 +++
 web/components/ApiKey/ApiKeyCreate.vue        | 14 ++---
 web/components/ApiKey/ApiKeyModal.vue         | 59 +++++++++++++++++++
 .../ConnectSettings/ConnectSettings.ce.vue    | 13 ++++
 web/components/Modals.ce.vue                  |  8 +++
 web/pages/index.vue                           |  2 +
 web/store/modal.ts                            | 16 ++++-
 17 files changed, 336 insertions(+), 11 deletions(-)
 create mode 100644 unraid-ui/src/components/common/dialog/Dialog.vue
 create mode 100644 unraid-ui/src/components/common/dialog/DialogClose.vue
 create mode 100644 unraid-ui/src/components/common/dialog/DialogContent.vue
 create mode 100644 unraid-ui/src/components/common/dialog/DialogDescription.vue
 create mode 100644 unraid-ui/src/components/common/dialog/DialogFooter.vue
 create mode 100644 unraid-ui/src/components/common/dialog/DialogHeader.vue
 create mode 100644 unraid-ui/src/components/common/dialog/DialogScrollContent.vue
 create mode 100644 unraid-ui/src/components/common/dialog/DialogTitle.vue
 create mode 100644 unraid-ui/src/components/common/dialog/DialogTrigger.vue
 create mode 100644 unraid-ui/src/components/common/dialog/index.ts
 create mode 100644 web/components/ApiKey/ApiKeyModal.vue

diff --git a/api/dev/Unraid.net/myservers.cfg b/api/dev/Unraid.net/myservers.cfg
index 1c664dad22..1f8d0bb030 100644
--- a/api/dev/Unraid.net/myservers.cfg
+++ b/api/dev/Unraid.net/myservers.cfg
@@ -1,5 +1,5 @@
 [api]
-version="4.4.1"
+version="4.8.0"
 extraOrigins="https://google.com,https://test.com"
 [local]
 sandbox="yes"
diff --git a/unraid-ui/src/components/common/dialog/Dialog.vue b/unraid-ui/src/components/common/dialog/Dialog.vue
new file mode 100644
index 0000000000..9fc9c7d10f
--- /dev/null
+++ b/unraid-ui/src/components/common/dialog/Dialog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/unraid-ui/src/components/common/dialog/DialogClose.vue b/unraid-ui/src/components/common/dialog/DialogClose.vue
new file mode 100644
index 0000000000..ba036b5163
--- /dev/null
+++ b/unraid-ui/src/components/common/dialog/DialogClose.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/unraid-ui/src/components/common/dialog/DialogContent.vue b/unraid-ui/src/components/common/dialog/DialogContent.vue
new file mode 100644
index 0000000000..e3d1469461
--- /dev/null
+++ b/unraid-ui/src/components/common/dialog/DialogContent.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+import useTeleport from '@/composables/useTeleport'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const { teleportTarget } = useTeleport()
+</script>
+
+<template>
+  <DialogPortal :to="teleportTarget">
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+      >
+        <X class="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/unraid-ui/src/components/common/dialog/DialogDescription.vue b/unraid-ui/src/components/common/dialog/DialogDescription.vue
new file mode 100644
index 0000000000..949331fee1
--- /dev/null
+++ b/unraid-ui/src/components/common/dialog/DialogDescription.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/unraid-ui/src/components/common/dialog/DialogFooter.vue b/unraid-ui/src/components/common/dialog/DialogFooter.vue
new file mode 100644
index 0000000000..ac2d0c18b6
--- /dev/null
+++ b/unraid-ui/src/components/common/dialog/DialogFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/unraid-ui/src/components/common/dialog/DialogHeader.vue b/unraid-ui/src/components/common/dialog/DialogHeader.vue
new file mode 100644
index 0000000000..b2c9085d82
--- /dev/null
+++ b/unraid-ui/src/components/common/dialog/DialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/unraid-ui/src/components/common/dialog/DialogScrollContent.vue b/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
new file mode 100644
index 0000000000..693c9019fb
--- /dev/null
+++ b/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/unraid-ui/src/components/common/dialog/DialogTitle.vue b/unraid-ui/src/components/common/dialog/DialogTitle.vue
new file mode 100644
index 0000000000..916b1a3c46
--- /dev/null
+++ b/unraid-ui/src/components/common/dialog/DialogTitle.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/unraid-ui/src/components/common/dialog/DialogTrigger.vue b/unraid-ui/src/components/common/dialog/DialogTrigger.vue
new file mode 100644
index 0000000000..2984f37125
--- /dev/null
+++ b/unraid-ui/src/components/common/dialog/DialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/unraid-ui/src/components/common/dialog/index.ts b/unraid-ui/src/components/common/dialog/index.ts
new file mode 100644
index 0000000000..e924dd4b7f
--- /dev/null
+++ b/unraid-ui/src/components/common/dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';
diff --git a/web/components/ApiKey/ApiKeyCreate.vue b/web/components/ApiKey/ApiKeyCreate.vue
index 32331b3b7d..c7d81cc594 100644
--- a/web/components/ApiKey/ApiKeyCreate.vue
+++ b/web/components/ApiKey/ApiKeyCreate.vue
@@ -110,6 +110,13 @@ async function createKey() {
     newKeyPermissions.value = [];
   }, 1000);
 }
+
+defineExpose({
+  createKey,
+  loading,
+  postCreateLoading,
+  error
+});
 </script>
 <template>
   <div class="mb-4 p-4 border rounded bg-muted">
@@ -169,13 +176,6 @@ async function createKey() {
         </AccordionItem>
       </Accordion>
     </div>
-    <div class="flex gap-2 mt-2">
-      <Button variant="primary" :disabled="loading || postCreateLoading" @click="createKey">
-        <span v-if="loading || postCreateLoading">Creating...</span>
-        <span v-else>Create</span>
-      </Button>
-      <Button variant="secondary" @click="$emit('cancel')">Cancel</Button>
-    </div>
     <div v-if="error" class="text-red-500 mt-2 text-sm">
       {{ error.message }}
     </div>
diff --git a/web/components/ApiKey/ApiKeyModal.vue b/web/components/ApiKey/ApiKeyModal.vue
new file mode 100644
index 0000000000..0b67b2e188
--- /dev/null
+++ b/web/components/ApiKey/ApiKeyModal.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuery } from '@vue/apollo-composable';
+
+import {
+  Button,
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogScrollContent,
+  DialogTitle,
+} from '@unraid/ui';
+
+import { GET_API_KEY_META } from '~/components/ApiKey/apikey.query';
+import ApiKeyCreate from '~/components/ApiKey/ApiKeyCreate.vue';
+
+const { t } = useI18n();
+const props = defineProps<{ open: boolean }>();
+const emit = defineEmits(['close']);
+const close = () => {
+  emit('close');
+};
+
+const { result: apiKeyMetaResult } = useQuery(GET_API_KEY_META);
+const possibleRoles = computed(() => apiKeyMetaResult.value?.apiKeyPossibleRoles || []);
+const possiblePermissions = computed(() => apiKeyMetaResult.value?.apiKeyPossiblePermissions || []);
+
+const apiKeyCreateRef = ref();
+</script>
+
+<template>
+  <Dialog :open="props.open" @close="close">
+    <DialogScrollContent class="max-w-800px">
+      <DialogHeader>
+        <DialogTitle>{{ t('Create API Key') }}</DialogTitle>
+      </DialogHeader>
+      <DialogDescription>
+        <ApiKeyCreate
+          ref="apiKeyCreateRef"
+          :possible-roles="possibleRoles"
+          :possible-permissions="possiblePermissions"
+        />
+      </DialogDescription>
+      <DialogFooter>
+        <Button variant="secondary" @click="close">Cancel</Button>
+        <Button
+          variant="primary"
+          :disabled="apiKeyCreateRef?.loading || apiKeyCreateRef?.postCreateLoading"
+          @click="apiKeyCreateRef?.createKey()"
+        >
+          <span v-if="apiKeyCreateRef?.loading || apiKeyCreateRef?.postCreateLoading">Creating...</span>
+          <span v-else>Create</span>
+        </Button>
+      </DialogFooter>
+    </DialogScrollContent>
+  </Dialog>
+</template>
diff --git a/web/components/ConnectSettings/ConnectSettings.ce.vue b/web/components/ConnectSettings/ConnectSettings.ce.vue
index 8c00381c77..9d98320e36 100644
--- a/web/components/ConnectSettings/ConnectSettings.ce.vue
+++ b/web/components/ConnectSettings/ConnectSettings.ce.vue
@@ -4,6 +4,7 @@
 // const { t } = useI18n();
 
 import { useMutation, useQuery } from '@vue/apollo-composable';
+import { useModalStore } from '~/store/modal';
 
 import { BrandButton, jsonFormsRenderers, Label } from '@unraid/ui';
 import { JsonForms } from '@jsonforms/vue';
@@ -84,6 +85,8 @@ const jsonFormsConfig = {
 
 const renderers = [...jsonFormsRenderers];
 
+const modalStore = useModalStore();
+
 /** Called when the user clicks the "Apply" button */
 const submitSettingsUpdate = async () => {
   console.log('[ConnectSettings] trying to update settings to', formState.value);
@@ -112,6 +115,16 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
         '<unraid-i18n-host><unraid-download-api-logs></unraid-download-api-logs></unraid-i18n-host>'
       "
     ></div>
+    <Label>Create API Key:</Label>
+    <BrandButton
+      variant="outline-primary"
+      padding="lean"
+      size="12px"
+      class="leading-normal"
+      @click="modalStore.apiKeyModalShow"
+    >
+      Create API Key
+    </BrandButton>
   </div>
   <!-- auto-generated settings form -->
   <div class="mt-6 pl-3 [&_.vertical-layout]:space-y-6">
diff --git a/web/components/Modals.ce.vue b/web/components/Modals.ce.vue
index bb51670d00..c5ebed46ce 100644
--- a/web/components/Modals.ce.vue
+++ b/web/components/Modals.ce.vue
@@ -5,12 +5,16 @@ import { storeToRefs } from 'pinia';
 import { useCallbackActionsStore } from '~/store/callbackActions';
 import { useTrialStore } from '~/store/trial';
 import { useUpdateOsStore } from '~/store/updateOs';
+import { useModalStore } from '~/store/modal';
+import ApiKeyModal from '~/components/ApiKey/ApiKeyModal.vue';
 
 const { t } = useI18n();
 
 const { callbackStatus } = storeToRefs(useCallbackActionsStore());
 const { trialModalVisible } = storeToRefs(useTrialStore());
 const { updateOsModalVisible, changelogModalVisible } = storeToRefs(useUpdateOsStore());
+const { apiKeyModalVisible } = storeToRefs(useModalStore());
+const modalStore = useModalStore();
 </script>
 
 <template>
@@ -20,6 +24,10 @@ const { updateOsModalVisible, changelogModalVisible } = storeToRefs(useUpdateOsS
     <UpdateOsCheckUpdateResponseModal :t="t" :open="updateOsModalVisible" />
     <UpdateOsChangelogModal :t="t" :open="changelogModalVisible" />
     <ActivationModal :t="t" />
+    <ApiKeyModal
+      :open="apiKeyModalVisible"
+      @close="modalStore.apiKeyModalHide"
+    />
   </div>
 </template>
 
diff --git a/web/pages/index.vue b/web/pages/index.vue
index e091083024..cf0df5a897 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -9,6 +9,8 @@ import type { SendPayloads } from '@unraid/shared-callbacks';
 import LogViewerCe from '~/components/Logs/LogViewer.ce.vue';
 import SsoButtonCe from '~/components/SsoButton.ce.vue';
 import { useThemeStore } from '~/store/theme';
+import ModalsCe from '~/components/Modals.ce.vue';
+import ConnectSettingsCe from '~/components/ConnectSettings/ConnectSettings.ce.vue';
 
 const serverStore = useDummyServerStore();
 const { serverState } = storeToRefs(serverStore);
diff --git a/web/store/modal.ts b/web/store/modal.ts
index 8895fb8df4..cc8d8689bd 100644
--- a/web/store/modal.ts
+++ b/web/store/modal.ts
@@ -1,4 +1,3 @@
-import { ref } from 'vue';
 import { createPinia, defineStore, setActivePinia } from 'pinia';
 import { useToggle } from '@vueuse/core';
 
@@ -9,7 +8,8 @@ import { useToggle } from '@vueuse/core';
 setActivePinia(createPinia());
 
 export const useModalStore = defineStore('modal', () => {
-  const modalVisible = ref<boolean>(true);
+  const [modalVisible, modalToggle] = useToggle(true);
+  const [apiKeyModalVisible, apiKeyModalToggle] = useToggle(false);
 
   const modalHide = () => {
     modalVisible.value = false;
@@ -17,12 +17,22 @@ export const useModalStore = defineStore('modal', () => {
   const modalShow = () => {
     modalVisible.value = true;
   };
-  const modalToggle = useToggle(modalVisible);
+
+  const apiKeyModalShow = () => {
+    apiKeyModalVisible.value = true;
+  };
+  const apiKeyModalHide = () => {
+    apiKeyModalVisible.value = false;
+  };
 
   return {
     modalVisible,
     modalHide,
     modalShow,
     modalToggle,
+    apiKeyModalVisible,
+    apiKeyModalShow,
+    apiKeyModalHide,
+    apiKeyModalToggle,
   };
 });

From bd6cc3859c11d8a562e5a4c9d4e9f15697dd14bb Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 14:41:43 -0400
Subject: [PATCH 02/21] fix: api key creation now updates when created

---
 api/generated-schema.graphql                  |  11 +
 api/src/unraid-api/auth/api-key.service.ts    |  38 ++++
 .../graph/resolvers/api-key/api-key.model.ts  |  52 ++++-
 .../resolvers/api-key/api-key.mutation.ts     |  24 +++
 .../graph/resolvers/validation.utils.ts       |  31 ++-
 .../src/components/common/dialog/Dialog.vue   |   8 +-
 .../components/common/dialog/DialogClose.vue  |   4 +-
 .../common/dialog/DialogContent.vue           |  31 +--
 .../common/dialog/DialogDescription.vue       |  19 +-
 .../components/common/dialog/DialogFooter.vue |  15 +-
 .../components/common/dialog/DialogHeader.vue |  14 +-
 .../common/dialog/DialogScrollContent.vue     |  41 ++--
 .../components/common/dialog/DialogTitle.vue  |  21 +-
 .../common/dialog/DialogTrigger.vue           |   4 +-
 web/components/ApiKey/ApiKeyCreate.vue        | 202 +++++++++++++-----
 web/components/ApiKey/ApiKeyManager.vue       | 187 ++++++++++------
 web/components/ApiKey/ApiKeyModal.vue         |  41 +++-
 web/components/ApiKey/PermissionCounter.vue   |  36 ++++
 web/components/ApiKey/apikey.query.ts         |  59 +++--
 web/composables/gql/gql.ts                    |  30 ++-
 web/composables/gql/graphql.ts                |  39 +++-
 web/pages/apikey.vue                          |   5 +-
 22 files changed, 665 insertions(+), 247 deletions(-)
 create mode 100644 web/components/ApiKey/PermissionCounter.vue

diff --git a/api/generated-schema.graphql b/api/generated-schema.graphql
index 9b8328f874..3b9b8df3f8 100644
--- a/api/generated-schema.graphql
+++ b/api/generated-schema.graphql
@@ -756,6 +756,9 @@ type ApiKeyMutations {
 
   """Delete one or more API keys"""
   delete(input: DeleteApiKeyInput!): Boolean!
+
+  """Update an API key"""
+  update(input: UpdateApiKeyInput!): ApiKeyWithSecret!
 }
 
 input CreateApiKeyInput {
@@ -789,6 +792,14 @@ input DeleteApiKeyInput {
   ids: [PrefixedID!]!
 }
 
+input UpdateApiKeyInput {
+  id: PrefixedID!
+  name: String
+  description: String
+  roles: [Role!]
+  permissions: [AddPermissionInput!]
+}
+
 """
 Parity check related mutations, WIP, response types and functionaliy will change
 """
diff --git a/api/src/unraid-api/auth/api-key.service.ts b/api/src/unraid-api/auth/api-key.service.ts
index bbf72ce458..e76f06f17e 100644
--- a/api/src/unraid-api/auth/api-key.service.ts
+++ b/api/src/unraid-api/auth/api-key.service.ts
@@ -157,6 +157,8 @@ export class ApiKeyService implements OnModuleInit {
 
         await this.saveApiKey(apiKey as ApiKeyWithSecret);
 
+        this.memoryApiKeys.push(apiKey as ApiKeyWithSecret);
+
         return apiKey as ApiKeyWithSecret;
     }
 
@@ -374,4 +376,40 @@ export class ApiKeyService implements OnModuleInit {
             throw errors;
         }
     }
+
+    async update({
+        id,
+        name,
+        description,
+        roles,
+        permissions,
+    }: {
+        id: string;
+        name?: string;
+        description?: string;
+        roles?: Role[];
+        permissions?: Permission[] | AddPermissionInput[];
+    }): Promise<ApiKeyWithSecret> {
+        const apiKey = this.findByIdWithSecret(id);
+        if (!apiKey) {
+            throw new GraphQLError('API key not found');
+        }
+        if (name) {
+            apiKey.name = this.sanitizeName(name.trim());
+        }
+        if (description !== undefined) {
+            apiKey.description = description;
+        }
+        if (roles) {
+            if (roles.some((role) => !ApiKeyService.validRoles.has(role))) {
+                throw new GraphQLError('Invalid role specified');
+            }
+            apiKey.roles = roles;
+        }
+        if (permissions) {
+            apiKey.permissions = permissions;
+        }
+        await this.saveApiKey(apiKey);
+        return apiKey;
+    }
 }
diff --git a/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts b/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts
index 7bae69d099..181c928326 100644
--- a/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts
+++ b/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts
@@ -1,5 +1,7 @@
 import { Field, InputType, ObjectType } from '@nestjs/graphql';
 
+
+
 import { Node, Resource, Role } from '@unraid/shared/graphql.model.js';
 import { PrefixedID } from '@unraid/shared/prefixed-id-scalar.js';
 import { Transform, Type } from 'class-transformer';
@@ -14,6 +16,14 @@ import {
     ValidateNested,
 } from 'class-validator';
 
+
+
+import { AtLeastOneOf } from '@unraid/shared/validation.utils.js';
+
+
+
+
+
 @ObjectType()
 export class Permission {
     @Field(() => Resource)
@@ -108,6 +118,46 @@ export class CreateApiKeyInput {
     @IsBoolean()
     @IsOptional()
     overwrite?: boolean;
+
+    @AtLeastOneOf(['roles', 'permissions'], {
+        message: 'At least one role or one permission is required to create an API key.',
+    })
+    _atLeastOne!: any;
+}
+
+@InputType()
+export class UpdateApiKeyInput {
+    @Field(() => PrefixedID)
+    @IsString()
+    id!: string;
+
+    @Field({ nullable: true })
+    @IsString()
+    @IsOptional()
+    name?: string;
+
+    @Field({ nullable: true })
+    @IsString()
+    @IsOptional()
+    description?: string;
+
+    @Field(() => [Role], { nullable: true })
+    @IsArray()
+    @IsEnum(Role, { each: true })
+    @IsOptional()
+    roles?: Role[];
+
+    @Field(() => [AddPermissionInput], { nullable: true })
+    @IsArray()
+    @ValidateNested({ each: true })
+    @Type(() => AddPermissionInput)
+    @IsOptional()
+    permissions?: AddPermissionInput[];
+
+    @AtLeastOneOf(['roles', 'permissions'], {
+        message: 'At least one role or one permission is required to update an API key.',
+    })
+    _atLeastOne!: any;
 }
 
 @InputType()
@@ -138,4 +188,4 @@ export class DeleteApiKeyInput {
     @IsArray()
     @IsString({ each: true })
     ids!: string[];
-}
+}
\ No newline at end of file
diff --git a/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.ts b/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.ts
index 5927229992..e5807ee474 100644
--- a/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.ts
+++ b/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.ts
@@ -15,6 +15,7 @@ import {
     CreateApiKeyInput,
     DeleteApiKeyInput,
     RemoveRoleFromApiKeyInput,
+    UpdateApiKeyInput,
 } from '@app/unraid-api/graph/resolvers/api-key/api-key.model.js';
 import { ApiKeyMutations } from '@app/unraid-api/graph/resolvers/mutation/mutation.model.js';
 import { validateObject } from '@app/unraid-api/graph/resolvers/validation.utils.js';
@@ -34,6 +35,11 @@ export class ApiKeyMutationsResolver {
     @ResolveField(() => ApiKeyWithSecret, { description: 'Create an API key' })
     async create(@Args('input') unvalidatedInput: CreateApiKeyInput): Promise<ApiKeyWithSecret> {
         const input = await validateObject(CreateApiKeyInput, unvalidatedInput);
+        const hasRoles = Array.isArray(input.roles) && input.roles.length > 0;
+        const hasPermissions = Array.isArray(input.permissions) && input.permissions.length > 0;
+        if (!hasRoles && !hasPermissions) {
+            throw new Error('At least one role or one permission is required to create an API key.');
+        }
         const apiKey = await this.apiKeyService.create({
             name: input.name,
             description: input.description ?? undefined,
@@ -78,4 +84,22 @@ export class ApiKeyMutationsResolver {
         await this.apiKeyService.deleteApiKeys(validatedInput.ids);
         return true;
     }
+
+    @UsePermissions({
+        action: AuthActionVerb.UPDATE,
+        resource: Resource.API_KEY,
+        possession: AuthPossession.ANY,
+    })
+    @ResolveField(() => ApiKeyWithSecret, { description: 'Update an API key' })
+    async update(@Args('input') unvalidatedInput: UpdateApiKeyInput): Promise<ApiKeyWithSecret> {
+        const input = await validateObject(UpdateApiKeyInput, unvalidatedInput);
+        const hasRoles = Array.isArray(input.roles) && input.roles.length > 0;
+        const hasPermissions = Array.isArray(input.permissions) && input.permissions.length > 0;
+        if (!hasRoles && !hasPermissions) {
+            throw new Error('At least one role or one permission is required to update an API key.');
+        }
+        const apiKey = await this.apiKeyService.update(input);
+        await this.authService.syncApiKeyRoles(apiKey.id, apiKey.roles);
+        return apiKey;
+    }
 }
diff --git a/api/src/unraid-api/graph/resolvers/validation.utils.ts b/api/src/unraid-api/graph/resolvers/validation.utils.ts
index c807ac51cd..547d8d33b9 100644
--- a/api/src/unraid-api/graph/resolvers/validation.utils.ts
+++ b/api/src/unraid-api/graph/resolvers/validation.utils.ts
@@ -1,7 +1,13 @@
 import 'reflect-metadata';
 
 import { plainToClass } from 'class-transformer';
-import { validate, ValidationError } from 'class-validator';
+import {
+    registerDecorator,
+    validate,
+    ValidationArguments,
+    ValidationError,
+    ValidationOptions,
+} from 'class-validator';
 
 /**
  * Validates an object against a class using class-validator
@@ -32,3 +38,26 @@ export async function validateObject<T extends object>(type: new () => T, object
 
     return instance;
 }
+
+/**
+ * Custom validator to ensure at least one of the given properties is a non-empty array
+ */
+export function AtLeastOneOf(properties: string[], validationOptions?: ValidationOptions) {
+    return function (object: object, propertyName: string) {
+        registerDecorator({
+            name: 'atLeastOneOf',
+            target: object.constructor,
+            propertyName: propertyName,
+            options: validationOptions,
+            validator: {
+                validate(_: any, args: ValidationArguments) {
+                    const obj = args.object as any;
+                    return properties.some((prop) => Array.isArray(obj[prop]) && obj[prop].length > 0);
+                },
+                defaultMessage(args: ValidationArguments) {
+                    return `At least one of the following must be a non-empty array: ${properties.join(', ')}`;
+                },
+            },
+        });
+    };
+}
diff --git a/unraid-ui/src/components/common/dialog/Dialog.vue b/unraid-ui/src/components/common/dialog/Dialog.vue
index 9fc9c7d10f..0bab92b4a6 100644
--- a/unraid-ui/src/components/common/dialog/Dialog.vue
+++ b/unraid-ui/src/components/common/dialog/Dialog.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'reka-ui';
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/unraid-ui/src/components/common/dialog/DialogClose.vue b/unraid-ui/src/components/common/dialog/DialogClose.vue
index ba036b5163..cfdda3a700 100644
--- a/unraid-ui/src/components/common/dialog/DialogClose.vue
+++ b/unraid-ui/src/components/common/dialog/DialogClose.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'reka-ui'
+import { DialogClose, type DialogCloseProps } from 'reka-ui';
 
-const props = defineProps<DialogCloseProps>()
+const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
diff --git a/unraid-ui/src/components/common/dialog/DialogContent.vue b/unraid-ui/src/components/common/dialog/DialogContent.vue
index e3d1469461..6718b4f97a 100644
--- a/unraid-ui/src/components/common/dialog/DialogContent.vue
+++ b/unraid-ui/src/components/common/dialog/DialogContent.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { X } from 'lucide-vue-next'
+import useTeleport from '@/composables/useTeleport';
+import { cn } from '@/lib/utils';
+import { reactiveOmit } from '@vueuse/core';
+import { X } from 'lucide-vue-next';
 import {
   DialogClose,
   DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
-import useTeleport from '@/composables/useTeleport'
+  type DialogContentEmits,
+  type DialogContentProps,
+} from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const { teleportTarget } = useTeleport()
+const { teleportTarget } = useTeleport();
 </script>
 
 <template>
@@ -34,8 +34,9 @@ const { teleportTarget } = useTeleport()
       :class="
         cn(
           'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          props.class,
-        )"
+          props.class
+        )
+      "
     >
       <slot />
 
diff --git a/unraid-ui/src/components/common/dialog/DialogDescription.vue b/unraid-ui/src/components/common/dialog/DialogDescription.vue
index 949331fee1..22a417d618 100644
--- a/unraid-ui/src/components/common/dialog/DialogDescription.vue
+++ b/unraid-ui/src/components/common/dialog/DialogDescription.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogDescription, useForwardProps, type DialogDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DialogDescription
-    v-bind="forwardedProps"
-    :class="cn('text-sm text-muted-foreground', props.class)"
-  >
+  <DialogDescription v-bind="forwardedProps" :class="cn('text-sm text-muted-foreground', props.class)">
     <slot />
   </DialogDescription>
 </template>
diff --git a/unraid-ui/src/components/common/dialog/DialogFooter.vue b/unraid-ui/src/components/common/dialog/DialogFooter.vue
index ac2d0c18b6..4ee0475c11 100644
--- a/unraid-ui/src/components/common/dialog/DialogFooter.vue
+++ b/unraid-ui/src/components/common/dialog/DialogFooter.vue
@@ -1,19 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-  <div
-    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
-    "
-  >
+  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/unraid-ui/src/components/common/dialog/DialogHeader.vue b/unraid-ui/src/components/common/dialog/DialogHeader.vue
index b2c9085d82..135cc89c80 100644
--- a/unraid-ui/src/components/common/dialog/DialogHeader.vue
+++ b/unraid-ui/src/components/common/dialog/DialogHeader.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div
-    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
-  >
-    <slot />
+  <div :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)">
+  <slot />
   </div>
 </template>
diff --git a/unraid-ui/src/components/common/dialog/DialogScrollContent.vue b/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
index 693c9019fb..dfb5a4358f 100644
--- a/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
+++ b/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { X } from 'lucide-vue-next'
+import { cn } from '@/lib/utils';
+import { reactiveOmit } from '@vueuse/core';
+import { X } from 'lucide-vue-next';
 import {
   DialogClose,
   DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
+  type DialogContentEmits,
+  type DialogContentProps,
+} from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -30,17 +30,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         :class="
           cn(
             'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-            props.class,
+            props.class
           )
         "
         v-bind="forwarded"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
+        @pointer-down-outside="
+          (event) => {
+            const originalEvent = event.detail.originalEvent;
+            const target = originalEvent.target as HTMLElement;
+            if (
+              originalEvent.offsetX > target.clientWidth ||
+              originalEvent.offsetY > target.clientHeight
+            ) {
+              event.preventDefault();
+            }
           }
-        }"
+        "
       >
         <slot />
 
diff --git a/unraid-ui/src/components/common/dialog/DialogTitle.vue b/unraid-ui/src/components/common/dialog/DialogTitle.vue
index 916b1a3c46..01f4262ed0 100644
--- a/unraid-ui/src/components/common/dialog/DialogTitle.vue
+++ b/unraid-ui/src/components/common/dialog/DialogTitle.vue
@@ -1,25 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle, useForwardProps, type DialogTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <DialogTitle
     v-bind="forwardedProps"
-    :class="
-      cn(
-        'text-lg font-semibold leading-none tracking-tight',
-        props.class,
-      )
-    "
+    :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
   >
     <slot />
   </DialogTitle>
diff --git a/unraid-ui/src/components/common/dialog/DialogTrigger.vue b/unraid-ui/src/components/common/dialog/DialogTrigger.vue
index 2984f37125..152a211cf8 100644
--- a/unraid-ui/src/components/common/dialog/DialogTrigger.vue
+++ b/unraid-ui/src/components/common/dialog/DialogTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui';
 
-const props = defineProps<DialogTriggerProps>()
+const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>
diff --git a/web/components/ApiKey/ApiKeyCreate.vue b/web/components/ApiKey/ApiKeyCreate.vue
index c7d81cc594..dbf2e3aa9c 100644
--- a/web/components/ApiKey/ApiKeyCreate.vue
+++ b/web/components/ApiKey/ApiKeyCreate.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useMutation } from '@vue/apollo-composable';
+
 import {
   Accordion,
   AccordionContent,
@@ -15,52 +16,89 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@unraid/ui';
-import { CREATE_API_KEY } from './apikey.query';
+
+import type { FragmentType } from '~/composables/gql/fragment-masking';
+import type { ApiKeyFragment, Resource, Role } from '~/composables/gql/graphql';
+
+import { useFragment } from '~/composables/gql/fragment-masking';
+import { API_KEY_FRAGMENT, CREATE_API_KEY, UPDATE_API_KEY } from './apikey.query';
+import type { ApolloError } from '@apollo/client/errors';
+import PermissionCounter from './PermissionCounter.vue';
 
 const props = defineProps<{
-  possibleRoles: string[];
-  possiblePermissions: { resource: string; actions: string[] }[];
+  possibleRoles: Role[];
+  possiblePermissions: { resource: Resource; actions: string[] }[];
+  editingKey?: ApiKeyFragment | null;
 }>();
 const emit = defineEmits(['created', 'cancel']);
 
 const newKeyName = ref('');
 const newKeyDescription = ref('');
-const newKeyRoles = ref<string[]>([]);
-const newKeyPermissions = ref<{ resource: string; actions: string[] }[]>([]);
-const { mutate: createApiKey, loading, error } = useMutation<
-  { apiKey: { create: { key: string } } },
-  { input: { name: string; description?: string; roles?: string[]; permissions?: { resource: string; actions: string[] }[] } }
->(CREATE_API_KEY);
+const newKeyRoles = ref<Role[]>([]);
+const newKeyPermissions = ref<{ resource: Resource; actions: string[] }[]>([]);
+const { mutate: createApiKey, loading: createLoading, error: createError } = useMutation(CREATE_API_KEY);
+const { mutate: updateApiKey, loading: updateLoading, error: updateError } = useMutation(UPDATE_API_KEY);
 const postCreateLoading = ref(false);
 
+const loading = computed<boolean>(() => createLoading.value || updateLoading.value);
+const error = computed<ApolloError | null>(() => createError.value || updateError.value);
+
+// Prefill form fields if editingKey is present
+watch(
+  () => props.editingKey,
+  (key) => {
+    const fragmentKey = key
+      ? useFragment(API_KEY_FRAGMENT, key as FragmentType<typeof API_KEY_FRAGMENT>)
+      : null;
+    if (fragmentKey) {
+      newKeyName.value = fragmentKey.name;
+      newKeyDescription.value = fragmentKey.description || '';
+      newKeyRoles.value = [...fragmentKey.roles];
+      newKeyPermissions.value = fragmentKey.permissions
+        ? fragmentKey.permissions.map((p) => ({
+            resource: p.resource as Resource,
+            actions: [...p.actions],
+          }))
+        : [];
+    } else {
+      newKeyName.value = '';
+      newKeyDescription.value = '';
+      newKeyRoles.value = [];
+      newKeyPermissions.value = [];
+    }
+  },
+  { immediate: true }
+);
+
 function togglePermission(resource: string, action: string, checked: boolean) {
-  const perm = newKeyPermissions.value.find(p => p.resource === resource);
+  const res = resource as Resource;
+  const perm = newKeyPermissions.value.find((p) => p.resource === res);
   if (checked) {
     if (perm) {
       if (!perm.actions.includes(action)) perm.actions.push(action);
     } else {
-      newKeyPermissions.value.push({ resource, actions: [action] });
+      newKeyPermissions.value.push({ resource: res, actions: [action] });
     }
   } else {
     if (perm) {
-      perm.actions = perm.actions.filter(a => a !== action);
+      perm.actions = perm.actions.filter((a) => a !== action);
       if (perm.actions.length === 0) {
-        newKeyPermissions.value = newKeyPermissions.value.filter(p => p.resource !== resource);
+        newKeyPermissions.value = newKeyPermissions.value.filter((p) => p.resource !== res);
       }
     }
   }
 }
 
 function areAllPermissionsSelected() {
-  return props.possiblePermissions.every(perm => {
-    const selected = newKeyPermissions.value.find(p => p.resource === perm.resource)?.actions || [];
-    return perm.actions.every(a => selected.includes(a));
+  return props.possiblePermissions.every((perm) => {
+    const selected = newKeyPermissions.value.find((p) => p.resource === perm.resource)?.actions || [];
+    return perm.actions.every((a) => selected.includes(a));
   });
 }
 
 function selectAllPermissions() {
-  newKeyPermissions.value = props.possiblePermissions.map(perm => ({
-    resource: perm.resource,
+  newKeyPermissions.value = props.possiblePermissions.map((perm) => ({
+    resource: perm.resource as Resource,
     actions: [...perm.actions],
   }));
 }
@@ -70,52 +108,72 @@ function clearAllPermissions() {
 }
 
 function areAllActionsSelected(resource: string) {
-  const perm = props.possiblePermissions.find(p => p.resource === resource);
+  const perm = props.possiblePermissions.find((p) => p.resource === resource);
   if (!perm) return false;
-  const selected = newKeyPermissions.value.find(p => p.resource === resource)?.actions || [];
-  return perm.actions.every(a => selected.includes(a));
+  const selected = newKeyPermissions.value.find((p) => p.resource === resource)?.actions || [];
+  return perm.actions.every((a) => selected.includes(a));
 }
 
 function selectAllActions(resource: string) {
-  const perm = props.possiblePermissions.find(p => p.resource === resource);
+  const res = resource as Resource;
+  const perm = props.possiblePermissions.find((p) => p.resource === res);
   if (!perm) return;
-  const idx = newKeyPermissions.value.findIndex(p => p.resource === resource);
+  const idx = newKeyPermissions.value.findIndex((p) => p.resource === res);
   if (idx !== -1) {
     newKeyPermissions.value[idx].actions = [...perm.actions];
   } else {
-    newKeyPermissions.value.push({ resource, actions: [...perm.actions] });
+    newKeyPermissions.value.push({ resource: res, actions: [...perm.actions] });
   }
 }
 
 function clearAllActions(resource: string) {
-  newKeyPermissions.value = newKeyPermissions.value.filter(p => p.resource !== resource);
+  newKeyPermissions.value = newKeyPermissions.value.filter((p) => p.resource !== resource);
 }
 
-async function createKey() {
-  const res = await createApiKey({
-    input: {
-      name: newKeyName.value,
-      description: newKeyDescription.value,
-      roles: newKeyRoles.value,
-      permissions: newKeyPermissions.value.length ? newKeyPermissions.value : undefined,
-    },
-  });
+async function upsertKey() {
+  const isEdit = !!props.editingKey?.id;
+  let res;
+  if (isEdit) {
+    res = await updateApiKey({
+      input: {
+        id: props.editingKey.id,
+        name: newKeyName.value,
+        description: newKeyDescription.value,
+        roles: newKeyRoles.value,
+        permissions: newKeyPermissions.value.length ? newKeyPermissions.value : undefined,
+      },
+    });
+  } else {
+    res = await createApiKey({
+      input: {
+        name: newKeyName.value,
+        description: newKeyDescription.value,
+        roles: newKeyRoles.value,
+        permissions: newKeyPermissions.value.length ? newKeyPermissions.value : undefined,
+      },
+    });
+  }
   postCreateLoading.value = true;
-  setTimeout(() => {
-    emit('created', res?.data?.apiKey?.create ?? null);
-    postCreateLoading.value = false;
-    newKeyName.value = '';
-    newKeyDescription.value = '';
-    newKeyRoles.value = [];
-    newKeyPermissions.value = [];
-  }, 1000);
+  let createdKey = null;
+  const apiKeyResult = res?.data?.apiKey;
+  if (isEdit && apiKeyResult && 'update' in apiKeyResult) {
+    createdKey = apiKeyResult.update;
+  } else if (!isEdit && apiKeyResult && 'create' in apiKeyResult) {
+    createdKey = apiKeyResult.create;
+  }
+  emit('created', createdKey);
+  postCreateLoading.value = false;
+  newKeyName.value = '';
+  newKeyDescription.value = '';
+  newKeyRoles.value = [];
+  newKeyPermissions.value = [];
 }
 
 defineExpose({
-  createKey,
+  upsertKey,
   loading,
   postCreateLoading,
-  error
+  error,
 });
 </script>
 <template>
@@ -135,28 +193,45 @@ defineExpose({
           <SelectValue placeholder="Select Roles" />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem v-for="role in props.possibleRoles" :key="role" :value="role">{{ role }}</SelectItem>
+          <SelectItem v-for="role in props.possibleRoles" :key="role" :value="role">{{
+            role
+          }}</SelectItem>
         </SelectContent>
       </Select>
     </div>
     <div class="mb-2">
       <Accordion type="single" collapsible class="w-full mt-2">
         <AccordionItem value="permissions">
-          <AccordionTrigger>Permissions</AccordionTrigger>
+          <AccordionTrigger>
+            <PermissionCounter :permissions="newKeyPermissions" :possible-permissions="props.possiblePermissions" label="Permissions" />
+          </AccordionTrigger>
           <AccordionContent>
             <div class="flex flex-row justify-end mb-2">
-              <span class="mr-auto text-sm text-muted-foreground">
-                Selected: {{ newKeyPermissions.reduce((sum, perm) => sum + perm.actions.length, 0) }}
-              </span>
-              <Button size="sm" variant="secondary" @click="areAllPermissionsSelected() ? clearAllPermissions() : selectAllPermissions()">
+              <Button
+                size="sm"
+                variant="secondary"
+                @click="areAllPermissionsSelected() ? clearAllPermissions() : selectAllPermissions()"
+              >
                 {{ areAllPermissionsSelected() ? 'Select None' : 'Select All' }}
               </Button>
             </div>
             <div class="flex flex-col gap-2 mt-1">
-              <div v-for="perm in props.possiblePermissions" :key="perm.resource" class="border rounded p-2">
+              <div
+                v-for="perm in props.possiblePermissions"
+                :key="perm.resource"
+                class="border rounded p-2"
+              >
                 <div class="flex items-center justify-between mb-1">
                   <span class="font-semibold">{{ perm.resource }}</span>
-                  <Button size="sm" variant="secondary" @click="areAllActionsSelected(perm.resource) ? clearAllActions(perm.resource) : selectAllActions(perm.resource)">
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    @click="
+                      areAllActionsSelected(perm.resource)
+                        ? clearAllActions(perm.resource)
+                        : selectAllActions(perm.resource)
+                    "
+                  >
                     {{ areAllActionsSelected(perm.resource) ? 'Select None' : 'Select All' }}
                   </Button>
                 </div>
@@ -164,8 +239,19 @@ defineExpose({
                   <label v-for="action in perm.actions" :key="action" class="flex items-center gap-1">
                     <input
                       type="checkbox"
-                      :checked="!!newKeyPermissions.find(p => p.resource === perm.resource && p.actions.includes(action))"
-                      @change="(e: Event) => togglePermission(perm.resource, action, (e.target as HTMLInputElement)?.checked)"
+                      :checked="
+                        !!newKeyPermissions.find(
+                          (p) => p.resource === perm.resource && p.actions.includes(action)
+                        )
+                      "
+                      @change="
+                        (e: Event) =>
+                          togglePermission(
+                            perm.resource,
+                            action,
+                            (e.target as HTMLInputElement)?.checked
+                          )
+                      "
                     />
                     <span>{{ action }}</span>
                   </label>
@@ -176,8 +262,8 @@ defineExpose({
         </AccordionItem>
       </Accordion>
     </div>
-    <div v-if="error" class="text-red-500 mt-2 text-sm">
-      {{ error.message }}
+    <div v-if="error && ((error as any).graphQLErrors || (error as any).message)" class="text-red-500 mt-2 text-sm">
+      {{ (error as any).graphQLErrors?.[0]?.extensions?.originalError?.message?.[0] || (error as any).message }}
     </div>
   </div>
-</template> 
\ No newline at end of file
+</template>
diff --git a/web/components/ApiKey/ApiKeyManager.vue b/web/components/ApiKey/ApiKeyManager.vue
index ce06a44998..b334a801e6 100644
--- a/web/components/ApiKey/ApiKeyManager.vue
+++ b/web/components/ApiKey/ApiKeyManager.vue
@@ -2,30 +2,34 @@
 import { ref, watchEffect } from 'vue';
 import { useMutation, useQuery } from '@vue/apollo-composable';
 
+import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid';
 import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Badge,
   Button,
   CardWrapper,
+  Input,
   PageContainer,
+  Tooltip,
+  TooltipProvider,
 } from '@unraid/ui';
 
-import { DELETE_API_KEY, GET_API_KEY_META, GET_API_KEYS } from './apikey.query';
-import ApiKeyCreate from './ApiKeyCreate.vue';
-import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid';
+import { useModalStore } from '~/store/modal';
+import { API_KEY_FRAGMENT, DELETE_API_KEY, GET_API_KEY_META, GET_API_KEYS } from './apikey.query';
+import ApiKeyModal from './ApiKeyModal.vue';
+import PermissionCounter from './PermissionCounter.vue';
+import type { ApiKeyFragment } from '~/composables/gql/graphql';
+import { useFragment } from '~/composables/gql/fragment-masking';
 
-interface ApiKey {
-  id: string;
-  name: string;
-  description?: string;
-  createdAt: string;
-  roles: string[];
-  permissions: { resource: string; actions: string[] }[];
-}
 
-const { result, refetch } = useQuery<{ apiKeys: ApiKey[] }>(GET_API_KEYS);
-const apiKeys = ref<ApiKey[]>([]);
+const { result, refetch } = useQuery(GET_API_KEYS);
+const apiKeys = ref<ApiKeyFragment[]>([]);
 
 watchEffect(() => {
-  apiKeys.value = result.value?.apiKeys || [];
+  apiKeys.value = result.value?.apiKeys.map((key) => useFragment(API_KEY_FRAGMENT, key)) || [];
 });
 
 const metaQuery = useQuery(GET_API_KEY_META);
@@ -36,7 +40,9 @@ watchEffect(() => {
   possiblePermissions.value = metaQuery.result.value?.apiKeyPossiblePermissions || [];
 });
 
+const modalStore = useModalStore();
 const showCreate = ref(false);
+const editingKey = ref<ApiKeyFragment | null>(null);
 const createdKey = ref<{ id: string; key: string } | null>(null);
 const showKey = ref(false);
 
@@ -48,78 +54,133 @@ function toggleShowKey() {
   showKey.value = !showKey.value;
 }
 
-function onCreated(key: { id: string; key: string } | null) {
+async function onCreated(key: { id: string; key: string } | null) {
   createdKey.value = key;
-  showCreate.value = false;
-  refetch();
+  modalStore.apiKeyModalHide();
+  editingKey.value = null;
+  await refetch();
 }
 
 async function _deleteKey(_id: string) {
-  if (!window.confirm('Are you sure you want to delete this API key? This action cannot be undone.')) return;
+  if (!window.confirm('Are you sure you want to delete this API key? This action cannot be undone.'))
+    return;
   deleteError.value = null;
   try {
     await deleteKey({ input: { ids: [_id] } });
     await refetch();
   } catch (err: unknown) {
-    if (typeof err === 'object' && err !== null && 'message' in err && typeof (err as { message?: unknown }).message === 'string') {
+    if (
+      typeof err === 'object' &&
+      err !== null &&
+      'message' in err &&
+      typeof (err as { message?: unknown }).message === 'string'
+    ) {
       deleteError.value = (err as { message: string }).message;
     } else {
       deleteError.value = 'Failed to delete API key.';
     }
   }
 }
+
+function openCreateModal(key: ApiKey | null = null) {
+  showCreate.value = true;
+  editingKey.value = key;
+}
+
+function closeCreateModal() {
+  showCreate.value = false;
+  editingKey.value = null;
+}
 </script>
 <template>
   <PageContainer>
-    <CardWrapper>
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-xl font-semibold">API Keys</h2>
-        <Button variant="primary" @click="showCreate = true">Create API Key</Button>
+    <div>
+      <div class="flex items-center justify-between mb-6">
+        <h2 class="text-2xl font-bold tracking-tight">API Keys</h2>
+        <Button variant="primary" @click="() => openCreateModal(null)">Create API Key</Button>
       </div>
-      <div v-if="deleteError" class="mb-2 p-2 bg-red-100 text-red-700 border border-red-300 rounded">
+      <div
+        v-if="deleteError"
+        class="mb-4 p-3 rounded border border-destructive bg-destructive/10 text-destructive"
+      >
         {{ deleteError }}
       </div>
-      <ul v-if="apiKeys.length" class="space-y-2 mb-4">
-        <li
-          v-for="key in apiKeys"
-          :key="key.id"
-          class="flex items-center justify-between p-2 border rounded"
-        >
-          <div>
-            <span class="font-medium">{{ key.name }}</span>
-            <div v-if="key.roles.length" class="mt-1">
-              <span class="font-semibold">Roles:</span>
-              <span>{{ key.roles.join(', ') }}</span>
-            </div>
-            <div v-if="key.permissions.length" class="mt-1">
-              <span class="font-semibold">Permissions:</span>
-              <ul class="ml-2">
-                <li v-for="perm in key.permissions" :key="perm.resource">
-                  <span class="font-medium">{{ perm.resource }}</span>
-                  <span v-if="perm.actions && perm.actions.length"> ({{ perm.actions.join(', ') }})</span>
-                </li>
-              </ul>
+      <ul v-if="apiKeys.length" class="flex flex-col gap-4 mb-6">
+        <CardWrapper v-for="key in apiKeys" :key="key.id">
+          <li
+            class="flex flex-row items-start justify-between gap-4 p-4 list-none"
+          >
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2">
+                <span class="font-semibold text-lg truncate">{{ key.name }}</span>
+                <span v-if="key.description" class="text-muted-foreground text-sm truncate">{{
+                  key.description
+                }}</span>
+              </div>
+              <div v-if="key.roles.length" class="mt-2 flex flex-wrap gap-2 items-center">
+                <span class="font-semibold text-sm">Roles:</span>
+                <Badge v-for="role in key.roles" :key="role" variant="blue" size="sm">{{ role }}</Badge>
+              </div>
+              <div v-if="key.permissions?.length" class="pt-2 w-full">
+                <Accordion type="single" collapsible class="w-full">
+                  <AccordionItem :value="'permissions-' + key.id">
+                    <AccordionTrigger>
+                      <PermissionCounter :permissions="key.permissions" :possible-permissions="possiblePermissions" label="Permissions" />
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <div v-if="key.permissions?.length" class="flex flex-col gap-2">
+                        <div
+                          v-for="perm in key.permissions ?? []"
+                          :key="perm.resource"
+                          class="border rounded p-2"
+                        >
+                          <div class="flex items-center gap-2">
+                            <span class="font-semibold">{{ perm.resource }}</span>
+                            <span
+                              v-if="perm.actions && perm.actions.length"
+                              class="text-xs text-muted-foreground"
+                              >({{ perm.actions.join(', ') }})</span
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+
+              <div
+                v-if="createdKey && createdKey.key && createdKey.id === key.id"
+                class="mt-4 flex items-center gap-2"
+              >
+                <span class="text-green-700 font-medium">API Key created / updated:</span>
+                <Input
+                  :model-value="showKey ? createdKey.key : '••••••••••••••••••••••••••••••••'"
+                  class="w-64 font-mono text-base px-2 py-1 bg-gray-50 border border-gray-200 rounded"
+                  readonly
+                />
+                <TooltipProvider>
+                  <Tooltip :content="showKey ? 'Hide key' : 'Show key'">
+                    <Button variant="ghost" size="icon" @click="toggleShowKey">
+                      <component :is="showKey ? EyeSlashIcon : EyeIcon" class="w-5 h-5 text-gray-500" />
+                    </Button>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
             </div>
-            <div v-if="createdKey && createdKey.key && createdKey.id === key.id" class="mt-2 flex items-center gap-2">
-              <span>API Key created:</span>
-              <b>{{ showKey ? createdKey.key : '••••••••••••••••••••••••••••••••' }}</b>
-              <button type="button" class="focus:outline-none" @click="toggleShowKey">
-                <component :is="showKey ? EyeSlashIcon : EyeIcon" class="w-5 h-5 text-gray-500" />
-              </button>
+            <div class="flex items-stretch gap-2 self-end md:self-center h-10">
+              <Button variant="secondary" size="sm" class="h-full" @click="() => openCreateModal(key)">Edit</Button>
+              <Button variant="destructive" size="sm" class="h-full" @click="_deleteKey(key.id)">Delete</Button>
             </div>
-          </div>
-          <Button variant="destructive" size="sm" @click="_deleteKey(key.id)">Delete</Button>
-        </li>
+          </li>
+        </CardWrapper>
       </ul>
-      <div v-if="showCreate" class="mb-4 p-4 border rounded bg-muted">
-        <ApiKeyCreate
-          v-if="showCreate"
-          :possible-roles="possibleRoles"
-          :possible-permissions="possiblePermissions"
-          @created="onCreated"
-          @cancel="showCreate = false"
-        />
-      </div>
-    </CardWrapper>
+      <ApiKeyModal
+        :open="showCreate"
+        :editing-key="editingKey"
+        @close="closeCreateModal"
+        @created="onCreated"
+      />
+    </div>
   </PageContainer>
 </template>
diff --git a/web/components/ApiKey/ApiKeyModal.vue b/web/components/ApiKey/ApiKeyModal.vue
index 0b67b2e188..662dac7dc4 100644
--- a/web/components/ApiKey/ApiKeyModal.vue
+++ b/web/components/ApiKey/ApiKeyModal.vue
@@ -15,10 +15,12 @@ import {
 
 import { GET_API_KEY_META } from '~/components/ApiKey/apikey.query';
 import ApiKeyCreate from '~/components/ApiKey/ApiKeyCreate.vue';
+import type { ApiKeyFragment } from '~/composables/gql/graphql';
 
 const { t } = useI18n();
-const props = defineProps<{ open: boolean }>();
-const emit = defineEmits(['close']);
+
+const props = defineProps<{ open: boolean; editingKey: ApiKeyFragment | null }>();
+const emit = defineEmits(['close', 'created']);
 const close = () => {
   emit('close');
 };
@@ -28,19 +30,42 @@ const possibleRoles = computed(() => apiKeyMetaResult.value?.apiKeyPossibleRoles
 const possiblePermissions = computed(() => apiKeyMetaResult.value?.apiKeyPossiblePermissions || []);
 
 const apiKeyCreateRef = ref();
+
+const handleCreated = (event: { key: string } | null) => {
+  close();
+  emit('created', event);
+};
 </script>
 
 <template>
-  <Dialog :open="props.open" @close="close">
+  <Dialog
+    :open="props.open"
+    @close="close"
+    @update:open="
+      (v) => {
+        if (!v) close();
+      }
+    "
+  >
     <DialogScrollContent class="max-w-800px">
       <DialogHeader>
-        <DialogTitle>{{ t('Create API Key') }}</DialogTitle>
+        <DialogTitle>{{ props.editingKey ? t('Edit API Key') : t('Create API Key') }}</DialogTitle>
       </DialogHeader>
       <DialogDescription>
         <ApiKeyCreate
           ref="apiKeyCreateRef"
           :possible-roles="possibleRoles"
           :possible-permissions="possiblePermissions"
+          :editing-key="props.editingKey ? {
+            ...props.editingKey,
+            roles: (props.editingKey.roles as any[]).map(r => r as any),
+            permissions: (props.editingKey.permissions as any[]).map(p => ({
+              ...p,
+              resource: p.resource as any,
+              actions: (p.actions as any[]).map(a => a as any),
+            })),
+          } : null"
+          @created="handleCreated"
         />
       </DialogDescription>
       <DialogFooter>
@@ -48,10 +73,12 @@ const apiKeyCreateRef = ref();
         <Button
           variant="primary"
           :disabled="apiKeyCreateRef?.loading || apiKeyCreateRef?.postCreateLoading"
-          @click="apiKeyCreateRef?.createKey()"
+          @click="apiKeyCreateRef?.upsertKey()"
         >
-          <span v-if="apiKeyCreateRef?.loading || apiKeyCreateRef?.postCreateLoading">Creating...</span>
-          <span v-else>Create</span>
+          <span v-if="apiKeyCreateRef?.loading || apiKeyCreateRef?.postCreateLoading">
+            {{ props.editingKey ? 'Saving...' : 'Creating...' }}
+          </span>
+          <span v-else>{{ props.editingKey ? 'Save' : 'Create' }}</span>
         </Button>
       </DialogFooter>
     </DialogScrollContent>
diff --git a/web/components/ApiKey/PermissionCounter.vue b/web/components/ApiKey/PermissionCounter.vue
new file mode 100644
index 0000000000..fd318a3726
--- /dev/null
+++ b/web/components/ApiKey/PermissionCounter.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  permissions: { resource: string; actions: string[] }[];
+  possiblePermissions?: { resource: string; actions: string[] }[];
+  label?: string;
+}>();
+
+const possibleActions = computed(() => {
+  if (!props.possiblePermissions) return [];
+  return Array.from(new Set(props.possiblePermissions.flatMap(p => p.actions)));
+});
+
+const actionCounts = computed(() => {
+  const actions = possibleActions.value;
+  const counts: Record<string, number> = {};
+  for (const action of actions) {
+    counts[action] = props.permissions.reduce(
+      (sum, perm) => sum + perm.actions.filter((a) => a === action).length,
+      0
+    );
+  }
+  return counts;
+});
+</script>
+<template>
+  <div class="flex flex-row items-center gap-1">
+    <span v-if="label">{{ label }}</span>
+    <template v-if="possibleActions.length">
+      (<span v-for="action in possibleActions" :key="action" class="text-xs text-muted-foreground">
+        {{ action }}: {{ actionCounts[action] || 0 }}
+      </span>)
+    </template>
+  </div>
+</template> 
\ No newline at end of file
diff --git a/web/components/ApiKey/apikey.query.ts b/web/components/ApiKey/apikey.query.ts
index db441eef01..8fd2cc5f64 100644
--- a/web/components/ApiKey/apikey.query.ts
+++ b/web/components/ApiKey/apikey.query.ts
@@ -1,18 +1,38 @@
 import { graphql } from '~/composables/gql/gql';
 
+export const API_KEY_FRAGMENT = graphql(/* GraphQL */ `
+  fragment ApiKey on ApiKey {
+    id
+    name
+    description
+    createdAt
+    roles
+    permissions {
+      resource
+      actions
+    }
+  }
+`);
+
+export const API_KEY_FRAGMENT_WITH_KEY = graphql(/* GraphQL */ `
+  fragment ApiKeyWithKey on ApiKeyWithSecret {
+    id
+    key
+    name
+    description
+    createdAt
+    roles
+    permissions {
+      resource
+      actions
+    }
+  }
+`);
 
 export const GET_API_KEYS = graphql(/* GraphQL */ `
   query ApiKeys {
     apiKeys {
-      id
-      name
-      description
-      createdAt
-      roles
-      permissions {
-        resource
-        actions
-      }
+      ...ApiKey
     }
   }
 `);
@@ -21,16 +41,17 @@ export const CREATE_API_KEY = graphql(/* GraphQL */ `
   mutation CreateApiKey($input: CreateApiKeyInput!) {
     apiKey {
       create(input: $input) {
-        id
-        key
-        name
-        description
-        createdAt
-        roles
-        permissions {
-          resource
-          actions
-        }
+        ...ApiKeyWithKey
+      }
+    } 
+  }
+`);
+
+export const UPDATE_API_KEY = graphql(/* GraphQL */ `
+  mutation UpdateApiKey($input: UpdateApiKeyInput!) {
+    apiKey {
+      update(input: $input) {
+        ...ApiKeyWithKey
       }
     }
   }
diff --git a/web/composables/gql/gql.ts b/web/composables/gql/gql.ts
index 6e0514ee01..c1d698db77 100644
--- a/web/composables/gql/gql.ts
+++ b/web/composables/gql/gql.ts
@@ -16,8 +16,11 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
 type Documents = {
     "\n  query PartnerInfo {\n    publicPartnerInfo {\n      hasPartnerLogo\n      partnerName\n      partnerUrl\n      partnerLogoUrl\n    }\n  }\n": typeof types.PartnerInfoDocument,
     "\n  query ActivationCode {\n    vars {\n      regState\n    }\n    customization {\n      activationCode {\n        code\n        partnerName\n        serverName\n        sysModel\n        comment\n        header\n        headermetacolor\n        background\n        showBannerGradient\n        theme\n      }\n      partnerInfo {\n        hasPartnerLogo\n        partnerName\n        partnerUrl\n        partnerLogoUrl\n      }\n    }\n  }\n": typeof types.ActivationCodeDocument,
-    "\n  query ApiKeys {\n    apiKeys {\n      id\n      name\n      description\n      createdAt\n      roles\n      permissions {\n        resource\n        actions\n      }\n    }\n  }\n": typeof types.ApiKeysDocument,
-    "\n  mutation CreateApiKey($input: CreateApiKeyInput!) {\n    apiKey {\n      create(input: $input) {\n        id\n        key\n        name\n        description\n        createdAt\n        roles\n        permissions {\n          resource\n          actions\n        }\n      }\n    }\n  }\n": typeof types.CreateApiKeyDocument,
+    "\n  fragment ApiKey on ApiKey {\n    id\n    name\n    description\n    createdAt\n    roles\n    permissions {\n      resource\n      actions\n    }\n  }\n": typeof types.ApiKeyFragmentDoc,
+    "\n  fragment ApiKeyWithKey on ApiKeyWithSecret {\n    id\n    key\n    name\n    description\n    createdAt\n    roles\n    permissions {\n      resource\n      actions\n    }\n  }\n": typeof types.ApiKeyWithKeyFragmentDoc,
+    "\n  query ApiKeys {\n    apiKeys {\n      ...ApiKey\n    }\n  }\n": typeof types.ApiKeysDocument,
+    "\n  mutation CreateApiKey($input: CreateApiKeyInput!) {\n    apiKey {\n      create(input: $input) {\n        ...ApiKeyWithKey\n      }\n    } \n  }\n": typeof types.CreateApiKeyDocument,
+    "\n  mutation UpdateApiKey($input: UpdateApiKeyInput!) {\n    apiKey {\n      update(input: $input) {\n        ...ApiKeyWithKey\n      }\n    }\n  }\n": typeof types.UpdateApiKeyDocument,
     "\n  mutation DeleteApiKey($input: DeleteApiKeyInput!) {\n    apiKey {\n      delete(input: $input)\n    }\n  }\n": typeof types.DeleteApiKeyDocument,
     "\n  query ApiKeyMeta {\n    apiKeyPossibleRoles\n    apiKeyPossiblePermissions {\n      resource\n      actions\n    }\n  }\n": typeof types.ApiKeyMetaDocument,
     "\n  query Unified {\n    settings {\n      unified {\n        id\n        dataSchema\n        uiSchema\n        values\n      }\n    }\n  }\n": typeof types.UnifiedDocument,
@@ -53,8 +56,11 @@ type Documents = {
 const documents: Documents = {
     "\n  query PartnerInfo {\n    publicPartnerInfo {\n      hasPartnerLogo\n      partnerName\n      partnerUrl\n      partnerLogoUrl\n    }\n  }\n": types.PartnerInfoDocument,
     "\n  query ActivationCode {\n    vars {\n      regState\n    }\n    customization {\n      activationCode {\n        code\n        partnerName\n        serverName\n        sysModel\n        comment\n        header\n        headermetacolor\n        background\n        showBannerGradient\n        theme\n      }\n      partnerInfo {\n        hasPartnerLogo\n        partnerName\n        partnerUrl\n        partnerLogoUrl\n      }\n    }\n  }\n": types.ActivationCodeDocument,
-    "\n  query ApiKeys {\n    apiKeys {\n      id\n      name\n      description\n      createdAt\n      roles\n      permissions {\n        resource\n        actions\n      }\n    }\n  }\n": types.ApiKeysDocument,
-    "\n  mutation CreateApiKey($input: CreateApiKeyInput!) {\n    apiKey {\n      create(input: $input) {\n        id\n        key\n        name\n        description\n        createdAt\n        roles\n        permissions {\n          resource\n          actions\n        }\n      }\n    }\n  }\n": types.CreateApiKeyDocument,
+    "\n  fragment ApiKey on ApiKey {\n    id\n    name\n    description\n    createdAt\n    roles\n    permissions {\n      resource\n      actions\n    }\n  }\n": types.ApiKeyFragmentDoc,
+    "\n  fragment ApiKeyWithKey on ApiKeyWithSecret {\n    id\n    key\n    name\n    description\n    createdAt\n    roles\n    permissions {\n      resource\n      actions\n    }\n  }\n": types.ApiKeyWithKeyFragmentDoc,
+    "\n  query ApiKeys {\n    apiKeys {\n      ...ApiKey\n    }\n  }\n": types.ApiKeysDocument,
+    "\n  mutation CreateApiKey($input: CreateApiKeyInput!) {\n    apiKey {\n      create(input: $input) {\n        ...ApiKeyWithKey\n      }\n    } \n  }\n": types.CreateApiKeyDocument,
+    "\n  mutation UpdateApiKey($input: UpdateApiKeyInput!) {\n    apiKey {\n      update(input: $input) {\n        ...ApiKeyWithKey\n      }\n    }\n  }\n": types.UpdateApiKeyDocument,
     "\n  mutation DeleteApiKey($input: DeleteApiKeyInput!) {\n    apiKey {\n      delete(input: $input)\n    }\n  }\n": types.DeleteApiKeyDocument,
     "\n  query ApiKeyMeta {\n    apiKeyPossibleRoles\n    apiKeyPossiblePermissions {\n      resource\n      actions\n    }\n  }\n": types.ApiKeyMetaDocument,
     "\n  query Unified {\n    settings {\n      unified {\n        id\n        dataSchema\n        uiSchema\n        values\n      }\n    }\n  }\n": types.UnifiedDocument,
@@ -113,11 +119,23 @@ export function graphql(source: "\n  query ActivationCode {\n    vars {\n      r
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query ApiKeys {\n    apiKeys {\n      id\n      name\n      description\n      createdAt\n      roles\n      permissions {\n        resource\n        actions\n      }\n    }\n  }\n"): (typeof documents)["\n  query ApiKeys {\n    apiKeys {\n      id\n      name\n      description\n      createdAt\n      roles\n      permissions {\n        resource\n        actions\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment ApiKey on ApiKey {\n    id\n    name\n    description\n    createdAt\n    roles\n    permissions {\n      resource\n      actions\n    }\n  }\n"): (typeof documents)["\n  fragment ApiKey on ApiKey {\n    id\n    name\n    description\n    createdAt\n    roles\n    permissions {\n      resource\n      actions\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  mutation CreateApiKey($input: CreateApiKeyInput!) {\n    apiKey {\n      create(input: $input) {\n        id\n        key\n        name\n        description\n        createdAt\n        roles\n        permissions {\n          resource\n          actions\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation CreateApiKey($input: CreateApiKeyInput!) {\n    apiKey {\n      create(input: $input) {\n        id\n        key\n        name\n        description\n        createdAt\n        roles\n        permissions {\n          resource\n          actions\n        }\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment ApiKeyWithKey on ApiKeyWithSecret {\n    id\n    key\n    name\n    description\n    createdAt\n    roles\n    permissions {\n      resource\n      actions\n    }\n  }\n"): (typeof documents)["\n  fragment ApiKeyWithKey on ApiKeyWithSecret {\n    id\n    key\n    name\n    description\n    createdAt\n    roles\n    permissions {\n      resource\n      actions\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query ApiKeys {\n    apiKeys {\n      ...ApiKey\n    }\n  }\n"): (typeof documents)["\n  query ApiKeys {\n    apiKeys {\n      ...ApiKey\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  mutation CreateApiKey($input: CreateApiKeyInput!) {\n    apiKey {\n      create(input: $input) {\n        ...ApiKeyWithKey\n      }\n    } \n  }\n"): (typeof documents)["\n  mutation CreateApiKey($input: CreateApiKeyInput!) {\n    apiKey {\n      create(input: $input) {\n        ...ApiKeyWithKey\n      }\n    } \n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  mutation UpdateApiKey($input: UpdateApiKeyInput!) {\n    apiKey {\n      update(input: $input) {\n        ...ApiKeyWithKey\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation UpdateApiKey($input: UpdateApiKeyInput!) {\n    apiKey {\n      update(input: $input) {\n        ...ApiKeyWithKey\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/web/composables/gql/graphql.ts b/web/composables/gql/graphql.ts
index e217c2eca3..e3a221c92f 100644
--- a/web/composables/gql/graphql.ts
+++ b/web/composables/gql/graphql.ts
@@ -163,6 +163,8 @@ export type ApiKeyMutations = {
   delete: Scalars['Boolean']['output'];
   /** Remove a role from an API key */
   removeRole: Scalars['Boolean']['output'];
+  /** Update an API key */
+  update: ApiKeyWithSecret;
 };
 
 
@@ -189,6 +191,12 @@ export type ApiKeyMutationsRemoveRoleArgs = {
   input: RemoveRoleFromApiKeyInput;
 };
 
+
+/** API Key related mutations */
+export type ApiKeyMutationsUpdateArgs = {
+  input: UpdateApiKeyInput;
+};
+
 export type ApiKeyResponse = {
   __typename?: 'ApiKeyResponse';
   error?: Maybe<Scalars['String']['output']>;
@@ -1983,17 +1991,37 @@ export type ActivationCodeQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type ActivationCodeQuery = { __typename?: 'Query', vars: { __typename?: 'Vars', regState?: RegistrationState | null }, customization?: { __typename?: 'Customization', activationCode?: { __typename?: 'ActivationCode', code?: string | null, partnerName?: string | null, serverName?: string | null, sysModel?: string | null, comment?: string | null, header?: string | null, headermetacolor?: string | null, background?: string | null, showBannerGradient?: boolean | null, theme?: string | null } | null, partnerInfo?: { __typename?: 'PublicPartnerInfo', hasPartnerLogo: boolean, partnerName?: string | null, partnerUrl?: string | null, partnerLogoUrl?: string | null } | null } | null };
 
+export type ApiKeyFragment = { __typename?: 'ApiKey', id: string, name: string, description?: string | null, createdAt: string, roles: Array<Role>, permissions: Array<{ __typename?: 'Permission', resource: Resource, actions: Array<string> }> } & { ' $fragmentName'?: 'ApiKeyFragment' };
+
+export type ApiKeyWithKeyFragment = { __typename?: 'ApiKeyWithSecret', id: string, key: string, name: string, description?: string | null, createdAt: string, roles: Array<Role>, permissions: Array<{ __typename?: 'Permission', resource: Resource, actions: Array<string> }> } & { ' $fragmentName'?: 'ApiKeyWithKeyFragment' };
+
 export type ApiKeysQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type ApiKeysQuery = { __typename?: 'Query', apiKeys: Array<{ __typename?: 'ApiKey', id: string, name: string, description?: string | null, createdAt: string, roles: Array<Role>, permissions: Array<{ __typename?: 'Permission', resource: Resource, actions: Array<string> }> }> };
+export type ApiKeysQuery = { __typename?: 'Query', apiKeys: Array<(
+    { __typename?: 'ApiKey' }
+    & { ' $fragmentRefs'?: { 'ApiKeyFragment': ApiKeyFragment } }
+  )> };
 
 export type CreateApiKeyMutationVariables = Exact<{
   input: CreateApiKeyInput;
 }>;
 
 
-export type CreateApiKeyMutation = { __typename?: 'Mutation', apiKey: { __typename?: 'ApiKeyMutations', create: { __typename?: 'ApiKeyWithSecret', id: string, key: string, name: string, description?: string | null, createdAt: string, roles: Array<Role>, permissions: Array<{ __typename?: 'Permission', resource: Resource, actions: Array<string> }> } } };
+export type CreateApiKeyMutation = { __typename?: 'Mutation', apiKey: { __typename?: 'ApiKeyMutations', create: (
+      { __typename?: 'ApiKeyWithSecret' }
+      & { ' $fragmentRefs'?: { 'ApiKeyWithKeyFragment': ApiKeyWithKeyFragment } }
+    ) } };
+
+export type UpdateApiKeyMutationVariables = Exact<{
+  input: UpdateApiKeyInput;
+}>;
+
+
+export type UpdateApiKeyMutation = { __typename?: 'Mutation', apiKey: { __typename?: 'ApiKeyMutations', update: (
+      { __typename?: 'ApiKeyWithSecret' }
+      & { ' $fragmentRefs'?: { 'ApiKeyWithKeyFragment': ApiKeyWithKeyFragment } }
+    ) } };
 
 export type DeleteApiKeyMutationVariables = Exact<{
   input: DeleteApiKeyInput;
@@ -2194,13 +2222,16 @@ export type SetupRemoteAccessMutationVariables = Exact<{
 
 export type SetupRemoteAccessMutation = { __typename?: 'Mutation', setupRemoteAccess: boolean };
 
+export const ApiKeyFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ApiKey"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ApiKey"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"roles"}},{"kind":"Field","name":{"kind":"Name","value":"permissions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"}},{"kind":"Field","name":{"kind":"Name","value":"actions"}}]}}]}}]} as unknown as DocumentNode<ApiKeyFragment, unknown>;
+export const ApiKeyWithKeyFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ApiKeyWithKey"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ApiKeyWithSecret"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"roles"}},{"kind":"Field","name":{"kind":"Name","value":"permissions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"}},{"kind":"Field","name":{"kind":"Name","value":"actions"}}]}}]}}]} as unknown as DocumentNode<ApiKeyWithKeyFragment, unknown>;
 export const NotificationFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"NotificationFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Notification"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"subject"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"importance"}},{"kind":"Field","name":{"kind":"Name","value":"link"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"timestamp"}},{"kind":"Field","name":{"kind":"Name","value":"formattedTimestamp"}}]}}]} as unknown as DocumentNode<NotificationFragmentFragment, unknown>;
 export const NotificationCountFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"NotificationCountFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"NotificationCounts"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}},{"kind":"Field","name":{"kind":"Name","value":"info"}},{"kind":"Field","name":{"kind":"Name","value":"warning"}},{"kind":"Field","name":{"kind":"Name","value":"alert"}}]}}]} as unknown as DocumentNode<NotificationCountFragmentFragment, unknown>;
 export const PartialCloudFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PartialCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]} as unknown as DocumentNode<PartialCloudFragment, unknown>;
 export const PartnerInfoDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"PartnerInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"publicPartnerInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hasPartnerLogo"}},{"kind":"Field","name":{"kind":"Name","value":"partnerName"}},{"kind":"Field","name":{"kind":"Name","value":"partnerUrl"}},{"kind":"Field","name":{"kind":"Name","value":"partnerLogoUrl"}}]}}]}}]} as unknown as DocumentNode<PartnerInfoQuery, PartnerInfoQueryVariables>;
 export const ActivationCodeDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ActivationCode"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"vars"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regState"}}]}},{"kind":"Field","name":{"kind":"Name","value":"customization"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"activationCode"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"partnerName"}},{"kind":"Field","name":{"kind":"Name","value":"serverName"}},{"kind":"Field","name":{"kind":"Name","value":"sysModel"}},{"kind":"Field","name":{"kind":"Name","value":"comment"}},{"kind":"Field","name":{"kind":"Name","value":"header"}},{"kind":"Field","name":{"kind":"Name","value":"headermetacolor"}},{"kind":"Field","name":{"kind":"Name","value":"background"}},{"kind":"Field","name":{"kind":"Name","value":"showBannerGradient"}},{"kind":"Field","name":{"kind":"Name","value":"theme"}}]}},{"kind":"Field","name":{"kind":"Name","value":"partnerInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hasPartnerLogo"}},{"kind":"Field","name":{"kind":"Name","value":"partnerName"}},{"kind":"Field","name":{"kind":"Name","value":"partnerUrl"}},{"kind":"Field","name":{"kind":"Name","value":"partnerLogoUrl"}}]}}]}}]}}]} as unknown as DocumentNode<ActivationCodeQuery, ActivationCodeQueryVariables>;
-export const ApiKeysDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ApiKeys"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiKeys"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"roles"}},{"kind":"Field","name":{"kind":"Name","value":"permissions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"}},{"kind":"Field","name":{"kind":"Name","value":"actions"}}]}}]}}]}}]} as unknown as DocumentNode<ApiKeysQuery, ApiKeysQueryVariables>;
-export const CreateApiKeyDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateApiKey"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateApiKeyInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"create"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"roles"}},{"kind":"Field","name":{"kind":"Name","value":"permissions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"}},{"kind":"Field","name":{"kind":"Name","value":"actions"}}]}}]}}]}}]}}]} as unknown as DocumentNode<CreateApiKeyMutation, CreateApiKeyMutationVariables>;
+export const ApiKeysDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ApiKeys"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiKeys"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ApiKey"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ApiKey"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ApiKey"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"roles"}},{"kind":"Field","name":{"kind":"Name","value":"permissions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"}},{"kind":"Field","name":{"kind":"Name","value":"actions"}}]}}]}}]} as unknown as DocumentNode<ApiKeysQuery, ApiKeysQueryVariables>;
+export const CreateApiKeyDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateApiKey"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateApiKeyInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"create"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ApiKeyWithKey"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ApiKeyWithKey"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ApiKeyWithSecret"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"roles"}},{"kind":"Field","name":{"kind":"Name","value":"permissions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"}},{"kind":"Field","name":{"kind":"Name","value":"actions"}}]}}]}}]} as unknown as DocumentNode<CreateApiKeyMutation, CreateApiKeyMutationVariables>;
+export const UpdateApiKeyDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateApiKey"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateApiKeyInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"update"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ApiKeyWithKey"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ApiKeyWithKey"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ApiKeyWithSecret"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"roles"}},{"kind":"Field","name":{"kind":"Name","value":"permissions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"}},{"kind":"Field","name":{"kind":"Name","value":"actions"}}]}}]}}]} as unknown as DocumentNode<UpdateApiKeyMutation, UpdateApiKeyMutationVariables>;
 export const DeleteApiKeyDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteApiKey"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"DeleteApiKeyInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"delete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]}}]} as unknown as DocumentNode<DeleteApiKeyMutation, DeleteApiKeyMutationVariables>;
 export const ApiKeyMetaDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ApiKeyMeta"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiKeyPossibleRoles"}},{"kind":"Field","name":{"kind":"Name","value":"apiKeyPossiblePermissions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"}},{"kind":"Field","name":{"kind":"Name","value":"actions"}}]}}]}}]} as unknown as DocumentNode<ApiKeyMetaQuery, ApiKeyMetaQueryVariables>;
 export const UnifiedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Unified"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"settings"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unified"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"dataSchema"}},{"kind":"Field","name":{"kind":"Name","value":"uiSchema"}},{"kind":"Field","name":{"kind":"Name","value":"values"}}]}}]}}]}}]} as unknown as DocumentNode<UnifiedQuery, UnifiedQueryVariables>;
diff --git a/web/pages/apikey.vue b/web/pages/apikey.vue
index 573afe1715..8ede0a61b3 100644
--- a/web/pages/apikey.vue
+++ b/web/pages/apikey.vue
@@ -3,8 +3,5 @@ import ApiKeyManager from '~/components/ApiKey/ApiKeyManager.vue';
 </script>
 
 <template>
-  <div>
-    <h1>API Key</h1>
-    <ApiKeyManager />
-  </div>
+  <ApiKeyManager />
 </template>

From abdc679d5badd978bcb48b0b1f1b2d93f2a550a4 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 14:47:21 -0400
Subject: [PATCH 03/21] feat: add page file to manage API keys

---
 .../plugins/dynamix.my.servers/ApiKeys.page   |  8 +++++
 .../components/common/dialog/DialogHeader.vue |  2 +-
 web/components/ApiKey/ApiKeyManager.vue       | 30 +++++++++++--------
 web/components/ApiKeyPage.ce.vue              | 11 +++++++
 web/components/Modals.ce.vue                  |  8 -----
 web/nuxt.config.ts                            |  4 +++
 web/store/modal.ts                            | 12 --------
 7 files changed, 41 insertions(+), 34 deletions(-)
 create mode 100644 plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/ApiKeys.page
 create mode 100644 web/components/ApiKeyPage.ce.vue

diff --git a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/ApiKeys.page b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/ApiKeys.page
new file mode 100644
index 0000000000..ff68d529c5
--- /dev/null
+++ b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/ApiKeys.page
@@ -0,0 +1,8 @@
+Menu="ManagementAccess:150"
+Title="API Keys"
+Icon="icon-u-key"
+Tag="key"
+---
+<unraid-i18n-host>
+    <unraid-api-key-manager />
+</unraid-i18n-host>
diff --git a/unraid-ui/src/components/common/dialog/DialogHeader.vue b/unraid-ui/src/components/common/dialog/DialogHeader.vue
index 135cc89c80..a13a3fcfc4 100644
--- a/unraid-ui/src/components/common/dialog/DialogHeader.vue
+++ b/unraid-ui/src/components/common/dialog/DialogHeader.vue
@@ -9,6 +9,6 @@ const props = defineProps<{
 
 <template>
   <div :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)">
-  <slot />
+    <slot />
   </div>
 </template>
diff --git a/web/components/ApiKey/ApiKeyManager.vue b/web/components/ApiKey/ApiKeyManager.vue
index b334a801e6..613fcea812 100644
--- a/web/components/ApiKey/ApiKeyManager.vue
+++ b/web/components/ApiKey/ApiKeyManager.vue
@@ -17,13 +17,12 @@ import {
   TooltipProvider,
 } from '@unraid/ui';
 
-import { useModalStore } from '~/store/modal';
+import type { ApiKeyFragment } from '~/composables/gql/graphql';
+
+import { useFragment } from '~/composables/gql/fragment-masking';
 import { API_KEY_FRAGMENT, DELETE_API_KEY, GET_API_KEY_META, GET_API_KEYS } from './apikey.query';
 import ApiKeyModal from './ApiKeyModal.vue';
 import PermissionCounter from './PermissionCounter.vue';
-import type { ApiKeyFragment } from '~/composables/gql/graphql';
-import { useFragment } from '~/composables/gql/fragment-masking';
-
 
 const { result, refetch } = useQuery(GET_API_KEYS);
 const apiKeys = ref<ApiKeyFragment[]>([]);
@@ -40,7 +39,6 @@ watchEffect(() => {
   possiblePermissions.value = metaQuery.result.value?.apiKeyPossiblePermissions || [];
 });
 
-const modalStore = useModalStore();
 const showCreate = ref(false);
 const editingKey = ref<ApiKeyFragment | null>(null);
 const createdKey = ref<{ id: string; key: string } | null>(null);
@@ -56,7 +54,7 @@ function toggleShowKey() {
 
 async function onCreated(key: { id: string; key: string } | null) {
   createdKey.value = key;
-  modalStore.apiKeyModalHide();
+  showCreate.value = false;
   editingKey.value = null;
   await refetch();
 }
@@ -82,7 +80,7 @@ async function _deleteKey(_id: string) {
   }
 }
 
-function openCreateModal(key: ApiKey | null = null) {
+function openCreateModal(key: ApiKeyFragment | null = null) {
   showCreate.value = true;
   editingKey.value = key;
 }
@@ -107,9 +105,7 @@ function closeCreateModal() {
       </div>
       <ul v-if="apiKeys.length" class="flex flex-col gap-4 mb-6">
         <CardWrapper v-for="key in apiKeys" :key="key.id">
-          <li
-            class="flex flex-row items-start justify-between gap-4 p-4 list-none"
-          >
+          <li class="flex flex-row items-start justify-between gap-4 p-4 list-none">
             <div class="flex-1 min-w-0">
               <div class="flex items-center gap-2">
                 <span class="font-semibold text-lg truncate">{{ key.name }}</span>
@@ -125,7 +121,11 @@ function closeCreateModal() {
                 <Accordion type="single" collapsible class="w-full">
                   <AccordionItem :value="'permissions-' + key.id">
                     <AccordionTrigger>
-                      <PermissionCounter :permissions="key.permissions" :possible-permissions="possiblePermissions" label="Permissions" />
+                      <PermissionCounter
+                        :permissions="key.permissions"
+                        :possible-permissions="possiblePermissions"
+                        label="Permissions"
+                      />
                     </AccordionTrigger>
                     <AccordionContent>
                       <div v-if="key.permissions?.length" class="flex flex-col gap-2">
@@ -169,8 +169,12 @@ function closeCreateModal() {
               </div>
             </div>
             <div class="flex items-stretch gap-2 self-end md:self-center h-10">
-              <Button variant="secondary" size="sm" class="h-full" @click="() => openCreateModal(key)">Edit</Button>
-              <Button variant="destructive" size="sm" class="h-full" @click="_deleteKey(key.id)">Delete</Button>
+              <Button variant="secondary" size="sm" class="h-full" @click="() => openCreateModal(key)"
+                >Edit</Button
+              >
+              <Button variant="destructive" size="sm" class="h-full" @click="_deleteKey(key.id)"
+                >Delete</Button
+              >
             </div>
           </li>
         </CardWrapper>
diff --git a/web/components/ApiKeyPage.ce.vue b/web/components/ApiKeyPage.ce.vue
new file mode 100644
index 0000000000..66b1ef8d7a
--- /dev/null
+++ b/web/components/ApiKeyPage.ce.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import ApiKeyManager from '~/components/ApiKey/ApiKeyManager.vue';
+</script>
+<template>
+  <ApiKeyManager />
+</template>
+<style lang="postcss">
+/* Import unraid-ui globals first */
+@import '@unraid/ui/styles';
+@import '~/assets/main.css';
+</style>
diff --git a/web/components/Modals.ce.vue b/web/components/Modals.ce.vue
index c5ebed46ce..bb51670d00 100644
--- a/web/components/Modals.ce.vue
+++ b/web/components/Modals.ce.vue
@@ -5,16 +5,12 @@ import { storeToRefs } from 'pinia';
 import { useCallbackActionsStore } from '~/store/callbackActions';
 import { useTrialStore } from '~/store/trial';
 import { useUpdateOsStore } from '~/store/updateOs';
-import { useModalStore } from '~/store/modal';
-import ApiKeyModal from '~/components/ApiKey/ApiKeyModal.vue';
 
 const { t } = useI18n();
 
 const { callbackStatus } = storeToRefs(useCallbackActionsStore());
 const { trialModalVisible } = storeToRefs(useTrialStore());
 const { updateOsModalVisible, changelogModalVisible } = storeToRefs(useUpdateOsStore());
-const { apiKeyModalVisible } = storeToRefs(useModalStore());
-const modalStore = useModalStore();
 </script>
 
 <template>
@@ -24,10 +20,6 @@ const modalStore = useModalStore();
     <UpdateOsCheckUpdateResponseModal :t="t" :open="updateOsModalVisible" />
     <UpdateOsChangelogModal :t="t" :open="changelogModalVisible" />
     <ActivationModal :t="t" />
-    <ApiKeyModal
-      :open="apiKeyModalVisible"
-      @close="modalStore.apiKeyModalHide"
-    />
   </div>
 </template>
 
diff --git a/web/nuxt.config.ts b/web/nuxt.config.ts
index 2abdc4d454..d001c9fad3 100644
--- a/web/nuxt.config.ts
+++ b/web/nuxt.config.ts
@@ -156,6 +156,10 @@ export default defineNuxtConfig({
             name: 'UnraidThemeSwitcher',
             path: '@/components/ThemeSwitcher.ce',
           },
+          {
+            name: 'UnraidApiKeyManager',
+            path: '@/components/ApiKeyPage.ce',
+          },
         ],
       },
     ],
diff --git a/web/store/modal.ts b/web/store/modal.ts
index cc8d8689bd..1500fc76c0 100644
--- a/web/store/modal.ts
+++ b/web/store/modal.ts
@@ -9,7 +9,6 @@ setActivePinia(createPinia());
 
 export const useModalStore = defineStore('modal', () => {
   const [modalVisible, modalToggle] = useToggle(true);
-  const [apiKeyModalVisible, apiKeyModalToggle] = useToggle(false);
 
   const modalHide = () => {
     modalVisible.value = false;
@@ -18,21 +17,10 @@ export const useModalStore = defineStore('modal', () => {
     modalVisible.value = true;
   };
 
-  const apiKeyModalShow = () => {
-    apiKeyModalVisible.value = true;
-  };
-  const apiKeyModalHide = () => {
-    apiKeyModalVisible.value = false;
-  };
-
   return {
     modalVisible,
     modalHide,
     modalShow,
     modalToggle,
-    apiKeyModalVisible,
-    apiKeyModalShow,
-    apiKeyModalHide,
-    apiKeyModalToggle,
   };
 });

From 6a0b48a3dfe717d4033994870c42750378140207 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 14:52:18 -0400
Subject: [PATCH 04/21] fix: remove modal button in connect settings

---
 .../resolvers/api-key/api-key.mutation.spec.ts      |  4 ++++
 web/__test__/store/modal.test.ts                    |  9 ++++++---
 .../ConnectSettings/ConnectSettings.ce.vue          | 13 -------------
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.spec.ts b/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.spec.ts
index 37bda7caa0..95547a73a0 100644
--- a/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.spec.ts
+++ b/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.spec.ts
@@ -59,6 +59,7 @@ describe('ApiKeyMutationsResolver', () => {
                 description: 'New API Key Description',
                 roles: [Role.GUEST],
                 permissions: [],
+                _atLeastOne: undefined,
             };
 
             vi.spyOn(apiKeyService, 'create').mockResolvedValue(mockApiKeyWithSecret);
@@ -83,6 +84,7 @@ describe('ApiKeyMutationsResolver', () => {
                 description: 'Should fail',
                 roles: [Role.GUEST],
                 permissions: [],
+                _atLeastOne: undefined,
             };
             vi.spyOn(apiKeyService, 'create').mockRejectedValue(new Error('Create failed'));
             await expect(resolver.create(input)).rejects.toThrow('Create failed');
@@ -94,6 +96,7 @@ describe('ApiKeyMutationsResolver', () => {
                 description: 'Should fail sync',
                 roles: [Role.GUEST],
                 permissions: [],
+                _atLeastOne: undefined,
             };
             vi.spyOn(apiKeyService, 'create').mockResolvedValue(mockApiKeyWithSecret);
             vi.spyOn(authService, 'syncApiKeyRoles').mockRejectedValue(new Error('Sync failed'));
@@ -106,6 +109,7 @@ describe('ApiKeyMutationsResolver', () => {
                 description: 'No name',
                 roles: [Role.GUEST],
                 permissions: [],
+                _atLeastOne: undefined,
             };
             await expect(resolver.create(input)).rejects.toThrow();
         });
diff --git a/web/__test__/store/modal.test.ts b/web/__test__/store/modal.test.ts
index 474afcfc70..39ba20e04e 100644
--- a/web/__test__/store/modal.test.ts
+++ b/web/__test__/store/modal.test.ts
@@ -3,15 +3,18 @@
  */
 
 import { createPinia, setActivePinia } from 'pinia';
+import { ref } from 'vue';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useModalStore } from '~/store/modal';
 
 vi.mock('@vueuse/core', () => ({
-  useToggle: vi.fn((value) => () => {
-    value.value = !value.value;
-  }),
+  useToggle: (initial: boolean) => {
+    const state = ref(initial)
+    const toggle = () => { state.value = !state.value }
+    return [state, toggle]
+  }
 }));
 
 describe('Modal Store', () => {
diff --git a/web/components/ConnectSettings/ConnectSettings.ce.vue b/web/components/ConnectSettings/ConnectSettings.ce.vue
index 9d98320e36..8c00381c77 100644
--- a/web/components/ConnectSettings/ConnectSettings.ce.vue
+++ b/web/components/ConnectSettings/ConnectSettings.ce.vue
@@ -4,7 +4,6 @@
 // const { t } = useI18n();
 
 import { useMutation, useQuery } from '@vue/apollo-composable';
-import { useModalStore } from '~/store/modal';
 
 import { BrandButton, jsonFormsRenderers, Label } from '@unraid/ui';
 import { JsonForms } from '@jsonforms/vue';
@@ -85,8 +84,6 @@ const jsonFormsConfig = {
 
 const renderers = [...jsonFormsRenderers];
 
-const modalStore = useModalStore();
-
 /** Called when the user clicks the "Apply" button */
 const submitSettingsUpdate = async () => {
   console.log('[ConnectSettings] trying to update settings to', formState.value);
@@ -115,16 +112,6 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
         '<unraid-i18n-host><unraid-download-api-logs></unraid-download-api-logs></unraid-i18n-host>'
       "
     ></div>
-    <Label>Create API Key:</Label>
-    <BrandButton
-      variant="outline-primary"
-      padding="lean"
-      size="12px"
-      class="leading-normal"
-      @click="modalStore.apiKeyModalShow"
-    >
-      Create API Key
-    </BrandButton>
   </div>
   <!-- auto-generated settings form -->
   <div class="mt-6 pl-3 [&_.vertical-layout]:space-y-6">

From 5a04de9a736843cf57c0f0742dfb87c532f7fc36 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 14:57:46 -0400
Subject: [PATCH 05/21] fix: PR feedback

---
 web/components/ApiKey/ApiKeyCreate.vue  | 76 +++++++++++++------------
 web/components/ApiKey/ApiKeyManager.vue | 12 +---
 web/components/ApiKey/ApiKeyModal.vue   | 13 +----
 web/helpers/functions.ts                | 21 ++++++-
 4 files changed, 65 insertions(+), 57 deletions(-)

diff --git a/web/components/ApiKey/ApiKeyCreate.vue b/web/components/ApiKey/ApiKeyCreate.vue
index dbf2e3aa9c..bab686b4b5 100644
--- a/web/components/ApiKey/ApiKeyCreate.vue
+++ b/web/components/ApiKey/ApiKeyCreate.vue
@@ -24,6 +24,7 @@ import { useFragment } from '~/composables/gql/fragment-masking';
 import { API_KEY_FRAGMENT, CREATE_API_KEY, UPDATE_API_KEY } from './apikey.query';
 import type { ApolloError } from '@apollo/client/errors';
 import PermissionCounter from './PermissionCounter.vue';
+import { extractGraphQLErrorMessage } from '~/helpers/functions';
 
 const props = defineProps<{
   possibleRoles: Role[];
@@ -131,42 +132,45 @@ function clearAllActions(resource: string) {
 }
 
 async function upsertKey() {
-  const isEdit = !!props.editingKey?.id;
-  let res;
-  if (isEdit) {
-    res = await updateApiKey({
-      input: {
-        id: props.editingKey.id,
-        name: newKeyName.value,
-        description: newKeyDescription.value,
-        roles: newKeyRoles.value,
-        permissions: newKeyPermissions.value.length ? newKeyPermissions.value : undefined,
-      },
-    });
-  } else {
-    res = await createApiKey({
-      input: {
-        name: newKeyName.value,
-        description: newKeyDescription.value,
-        roles: newKeyRoles.value,
-        permissions: newKeyPermissions.value.length ? newKeyPermissions.value : undefined,
-      },
-    });
-  }
   postCreateLoading.value = true;
-  let createdKey = null;
-  const apiKeyResult = res?.data?.apiKey;
-  if (isEdit && apiKeyResult && 'update' in apiKeyResult) {
-    createdKey = apiKeyResult.update;
-  } else if (!isEdit && apiKeyResult && 'create' in apiKeyResult) {
-    createdKey = apiKeyResult.create;
+  try {
+    const isEdit = !!props.editingKey?.id;
+    let res;
+    if (isEdit) {
+      res = await updateApiKey({
+        input: {
+          id: props.editingKey.id,
+          name: newKeyName.value,
+          description: newKeyDescription.value,
+          roles: newKeyRoles.value,
+          permissions: newKeyPermissions.value.length ? newKeyPermissions.value : undefined,
+        },
+      });
+    } else {
+      res = await createApiKey({
+        input: {
+          name: newKeyName.value,
+          description: newKeyDescription.value,
+          roles: newKeyRoles.value,
+          permissions: newKeyPermissions.value.length ? newKeyPermissions.value : undefined,
+        },
+      });
+    }
+    let createdKey = null;
+    const apiKeyResult = res?.data?.apiKey;
+    if (isEdit && apiKeyResult && 'update' in apiKeyResult) {
+      createdKey = apiKeyResult.update;
+    } else if (!isEdit && apiKeyResult && 'create' in apiKeyResult) {
+      createdKey = apiKeyResult.create;
+    }
+    emit('created', createdKey);
+    newKeyName.value = '';
+    newKeyDescription.value = '';
+    newKeyRoles.value = [];
+    newKeyPermissions.value = [];
+  } finally {
+    postCreateLoading.value = false;
   }
-  emit('created', createdKey);
-  postCreateLoading.value = false;
-  newKeyName.value = '';
-  newKeyDescription.value = '';
-  newKeyRoles.value = [];
-  newKeyPermissions.value = [];
 }
 
 defineExpose({
@@ -262,8 +266,8 @@ defineExpose({
         </AccordionItem>
       </Accordion>
     </div>
-    <div v-if="error && ((error as any).graphQLErrors || (error as any).message)" class="text-red-500 mt-2 text-sm">
-      {{ (error as any).graphQLErrors?.[0]?.extensions?.originalError?.message?.[0] || (error as any).message }}
+    <div v-if="error" class="text-red-500 mt-2 text-sm">
+      {{ extractGraphQLErrorMessage(error) }}
     </div>
   </div>
 </template>
diff --git a/web/components/ApiKey/ApiKeyManager.vue b/web/components/ApiKey/ApiKeyManager.vue
index 613fcea812..e16caee384 100644
--- a/web/components/ApiKey/ApiKeyManager.vue
+++ b/web/components/ApiKey/ApiKeyManager.vue
@@ -23,6 +23,7 @@ import { useFragment } from '~/composables/gql/fragment-masking';
 import { API_KEY_FRAGMENT, DELETE_API_KEY, GET_API_KEY_META, GET_API_KEYS } from './apikey.query';
 import ApiKeyModal from './ApiKeyModal.vue';
 import PermissionCounter from './PermissionCounter.vue';
+import { extractGraphQLErrorMessage } from '~/helpers/functions';
 
 const { result, refetch } = useQuery(GET_API_KEYS);
 const apiKeys = ref<ApiKeyFragment[]>([]);
@@ -67,16 +68,7 @@ async function _deleteKey(_id: string) {
     await deleteKey({ input: { ids: [_id] } });
     await refetch();
   } catch (err: unknown) {
-    if (
-      typeof err === 'object' &&
-      err !== null &&
-      'message' in err &&
-      typeof (err as { message?: unknown }).message === 'string'
-    ) {
-      deleteError.value = (err as { message: string }).message;
-    } else {
-      deleteError.value = 'Failed to delete API key.';
-    }
+    deleteError.value = extractGraphQLErrorMessage(err);
   }
 }
 
diff --git a/web/components/ApiKey/ApiKeyModal.vue b/web/components/ApiKey/ApiKeyModal.vue
index 662dac7dc4..dad3aecdea 100644
--- a/web/components/ApiKey/ApiKeyModal.vue
+++ b/web/components/ApiKey/ApiKeyModal.vue
@@ -13,9 +13,10 @@ import {
   DialogTitle,
 } from '@unraid/ui';
 
+import type { ApiKeyFragment } from '~/composables/gql/graphql';
+
 import { GET_API_KEY_META } from '~/components/ApiKey/apikey.query';
 import ApiKeyCreate from '~/components/ApiKey/ApiKeyCreate.vue';
-import type { ApiKeyFragment } from '~/composables/gql/graphql';
 
 const { t } = useI18n();
 
@@ -56,15 +57,7 @@ const handleCreated = (event: { key: string } | null) => {
           ref="apiKeyCreateRef"
           :possible-roles="possibleRoles"
           :possible-permissions="possiblePermissions"
-          :editing-key="props.editingKey ? {
-            ...props.editingKey,
-            roles: (props.editingKey.roles as any[]).map(r => r as any),
-            permissions: (props.editingKey.permissions as any[]).map(p => ({
-              ...p,
-              resource: p.resource as any,
-              actions: (p.actions as any[]).map(a => a as any),
-            })),
-          } : null"
+          :editing-key="props.editingKey"
           @created="handleCreated"
         />
       </DialogDescription>
diff --git a/web/helpers/functions.ts b/web/helpers/functions.ts
index a6d67912ff..1c939d06be 100644
--- a/web/helpers/functions.ts
+++ b/web/helpers/functions.ts
@@ -1,2 +1,21 @@
 /** Output key + value as string for each item in the object. Adds new line after each item. */
-export const OBJ_TO_STR = (obj: object): string => Object.entries(obj).reduce((str, [p, val]) => `${str}${p}: ${val}\n`, '');
\ No newline at end of file
+export const OBJ_TO_STR = (obj: object): string => Object.entries(obj).reduce((str, [p, val]) => `${str}${p}: ${val}\n`, '');
+
+/**
+ * Extracts a meaningful error message from a GraphQL error or generic error object.
+ */
+export function extractGraphQLErrorMessage(err: unknown): string {
+  let message = 'An unknown error occurred.';
+  const e = err as { graphQLErrors?: unknown; message?: string };
+  const graphQLErrors = Array.isArray(e?.graphQLErrors) ? e.graphQLErrors : undefined;
+  if (graphQLErrors && graphQLErrors.length) {
+    const gqlError = graphQLErrors[0] as { extensions?: { originalError?: { message?: string[] } }; message?: string };
+    message =
+      gqlError?.extensions?.originalError?.message?.[0] ||
+      gqlError?.message ||
+      message;
+  } else if (typeof err === 'object' && err !== null && 'message' in err && typeof e.message === 'string') {
+    message = e.message;
+  }
+  return message;
+}
\ No newline at end of file

From e1c69ebdf1b81526e719fe7295189169ffe3e58b Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 15:04:45 -0400
Subject: [PATCH 06/21] fix: move modal into CE

---
 web/components/ApiKey/ApiKeyManager.vue | 34 +++++--------------------
 web/components/ApiKey/ApiKeyModal.vue   | 29 +++++++++++----------
 web/components/Modals.ce.vue            |  9 ++++---
 web/store/modal.ts                      | 23 +++++++++++++++++
 4 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/web/components/ApiKey/ApiKeyManager.vue b/web/components/ApiKey/ApiKeyManager.vue
index e16caee384..53a1041883 100644
--- a/web/components/ApiKey/ApiKeyManager.vue
+++ b/web/components/ApiKey/ApiKeyManager.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
 import { useMutation, useQuery } from '@vue/apollo-composable';
+import { useModalStore } from '~/store/modal';
 
 import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid';
 import {
@@ -21,7 +22,6 @@ import type { ApiKeyFragment } from '~/composables/gql/graphql';
 
 import { useFragment } from '~/composables/gql/fragment-masking';
 import { API_KEY_FRAGMENT, DELETE_API_KEY, GET_API_KEY_META, GET_API_KEYS } from './apikey.query';
-import ApiKeyModal from './ApiKeyModal.vue';
 import PermissionCounter from './PermissionCounter.vue';
 import { extractGraphQLErrorMessage } from '~/helpers/functions';
 
@@ -40,9 +40,8 @@ watchEffect(() => {
   possiblePermissions.value = metaQuery.result.value?.apiKeyPossiblePermissions || [];
 });
 
-const showCreate = ref(false);
-const editingKey = ref<ApiKeyFragment | null>(null);
-const createdKey = ref<{ id: string; key: string } | null>(null);
+const modalStore = useModalStore();
+
 const showKey = ref(false);
 
 const { mutate: deleteKey } = useMutation(DELETE_API_KEY);
@@ -53,11 +52,8 @@ function toggleShowKey() {
   showKey.value = !showKey.value;
 }
 
-async function onCreated(key: { id: string; key: string } | null) {
-  createdKey.value = key;
-  showCreate.value = false;
-  editingKey.value = null;
-  await refetch();
+function openCreateModal(key: ApiKeyFragment | null = null) {
+  modalStore.showApiKeyModal(key);
 }
 
 async function _deleteKey(_id: string) {
@@ -71,16 +67,6 @@ async function _deleteKey(_id: string) {
     deleteError.value = extractGraphQLErrorMessage(err);
   }
 }
-
-function openCreateModal(key: ApiKeyFragment | null = null) {
-  showCreate.value = true;
-  editingKey.value = key;
-}
-
-function closeCreateModal() {
-  showCreate.value = false;
-  editingKey.value = null;
-}
 </script>
 <template>
   <PageContainer>
@@ -142,12 +128,12 @@ function closeCreateModal() {
               </div>
 
               <div
-                v-if="createdKey && createdKey.key && createdKey.id === key.id"
+                v-if="modalStore.apiKeyModalCreatedKey && modalStore.apiKeyModalCreatedKey.key && modalStore.apiKeyModalCreatedKey.id === key.id"
                 class="mt-4 flex items-center gap-2"
               >
                 <span class="text-green-700 font-medium">API Key created / updated:</span>
                 <Input
-                  :model-value="showKey ? createdKey.key : '••••••••••••••••••••••••••••••••'"
+                  :model-value="showKey ? modalStore.apiKeyModalCreatedKey.key : '••••••••••••••••••••••••••••••••'"
                   class="w-64 font-mono text-base px-2 py-1 bg-gray-50 border border-gray-200 rounded"
                   readonly
                 />
@@ -171,12 +157,6 @@ function closeCreateModal() {
           </li>
         </CardWrapper>
       </ul>
-      <ApiKeyModal
-        :open="showCreate"
-        :editing-key="editingKey"
-        @close="closeCreateModal"
-        @created="onCreated"
-      />
     </div>
   </PageContainer>
 </template>
diff --git a/web/components/ApiKey/ApiKeyModal.vue b/web/components/ApiKey/ApiKeyModal.vue
index dad3aecdea..676cfd64d0 100644
--- a/web/components/ApiKey/ApiKeyModal.vue
+++ b/web/components/ApiKey/ApiKeyModal.vue
@@ -2,6 +2,8 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuery } from '@vue/apollo-composable';
+import { storeToRefs } from 'pinia';
+import { useModalStore } from '~/store/modal';
 
 import {
   Button,
@@ -13,18 +15,13 @@ import {
   DialogTitle,
 } from '@unraid/ui';
 
-import type { ApiKeyFragment } from '~/composables/gql/graphql';
-
 import { GET_API_KEY_META } from '~/components/ApiKey/apikey.query';
 import ApiKeyCreate from '~/components/ApiKey/ApiKeyCreate.vue';
 
 const { t } = useI18n();
 
-const props = defineProps<{ open: boolean; editingKey: ApiKeyFragment | null }>();
-const emit = defineEmits(['close', 'created']);
-const close = () => {
-  emit('close');
-};
+const modalStore = useModalStore();
+const { apiKeyModalVisible, apiKeyModalEditingKey } = storeToRefs(modalStore);
 
 const { result: apiKeyMetaResult } = useQuery(GET_API_KEY_META);
 const possibleRoles = computed(() => apiKeyMetaResult.value?.apiKeyPossibleRoles || []);
@@ -32,15 +29,19 @@ const possiblePermissions = computed(() => apiKeyMetaResult.value?.apiKeyPossibl
 
 const apiKeyCreateRef = ref();
 
-const handleCreated = (event: { key: string } | null) => {
+const close = () => {
+  modalStore.hideApiKeyModal();
+};
+
+const handleCreated = (event: { id: string; key: string } | null) => {
+  modalStore.setApiKeyModalCreatedKey(event);
   close();
-  emit('created', event);
 };
 </script>
 
 <template>
   <Dialog
-    :open="props.open"
+    :open="apiKeyModalVisible"
     @close="close"
     @update:open="
       (v) => {
@@ -50,14 +51,14 @@ const handleCreated = (event: { key: string } | null) => {
   >
     <DialogScrollContent class="max-w-800px">
       <DialogHeader>
-        <DialogTitle>{{ props.editingKey ? t('Edit API Key') : t('Create API Key') }}</DialogTitle>
+        <DialogTitle>{{ apiKeyModalEditingKey ? t('Edit API Key') : t('Create API Key') }}</DialogTitle>
       </DialogHeader>
       <DialogDescription>
         <ApiKeyCreate
           ref="apiKeyCreateRef"
           :possible-roles="possibleRoles"
           :possible-permissions="possiblePermissions"
-          :editing-key="props.editingKey"
+          :editing-key="apiKeyModalEditingKey"
           @created="handleCreated"
         />
       </DialogDescription>
@@ -69,9 +70,9 @@ const handleCreated = (event: { key: string } | null) => {
           @click="apiKeyCreateRef?.upsertKey()"
         >
           <span v-if="apiKeyCreateRef?.loading || apiKeyCreateRef?.postCreateLoading">
-            {{ props.editingKey ? 'Saving...' : 'Creating...' }}
+            {{ apiKeyModalEditingKey ? 'Saving...' : 'Creating...' }}
           </span>
-          <span v-else>{{ props.editingKey ? 'Save' : 'Create' }}</span>
+          <span v-else>{{ apiKeyModalEditingKey ? 'Save' : 'Create' }}</span>
         </Button>
       </DialogFooter>
     </DialogScrollContent>
diff --git a/web/components/Modals.ce.vue b/web/components/Modals.ce.vue
index bb51670d00..ea1a329348 100644
--- a/web/components/Modals.ce.vue
+++ b/web/components/Modals.ce.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { storeToRefs } from 'pinia';
 
 import { useCallbackActionsStore } from '~/store/callbackActions';
 import { useTrialStore } from '~/store/trial';
 import { useUpdateOsStore } from '~/store/updateOs';
+import ApiKeyModal from '~/components/ApiKey/ApiKeyModal.vue';
 
 const { t } = useI18n();
 
-const { callbackStatus } = storeToRefs(useCallbackActionsStore());
-const { trialModalVisible } = storeToRefs(useTrialStore());
-const { updateOsModalVisible, changelogModalVisible } = storeToRefs(useUpdateOsStore());
+const { callbackStatus } = useCallbackActionsStore();
+const { trialModalVisible } = useTrialStore();
+const { updateOsModalVisible, changelogModalVisible } = useUpdateOsStore();
 </script>
 
 <template>
@@ -20,6 +20,7 @@ const { updateOsModalVisible, changelogModalVisible } = storeToRefs(useUpdateOsS
     <UpdateOsCheckUpdateResponseModal :t="t" :open="updateOsModalVisible" />
     <UpdateOsChangelogModal :t="t" :open="changelogModalVisible" />
     <ActivationModal :t="t" />
+    <ApiKeyModal />
   </div>
 </template>
 
diff --git a/web/store/modal.ts b/web/store/modal.ts
index 1500fc76c0..57d4a94ba3 100644
--- a/web/store/modal.ts
+++ b/web/store/modal.ts
@@ -1,5 +1,7 @@
 import { createPinia, defineStore, setActivePinia } from 'pinia';
 import { useToggle } from '@vueuse/core';
+import type { ApiKeyFragment } from '~/composables/gql/graphql';
+import { ref } from 'vue';
 
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
@@ -9,6 +11,9 @@ setActivePinia(createPinia());
 
 export const useModalStore = defineStore('modal', () => {
   const [modalVisible, modalToggle] = useToggle(true);
+  const apiKeyModalVisible = ref(false);
+  const apiKeyModalEditingKey = ref<ApiKeyFragment | null>(null);
+  const apiKeyModalCreatedKey = ref<{ id: string; key: string } | null>(null);
 
   const modalHide = () => {
     modalVisible.value = false;
@@ -17,10 +22,28 @@ export const useModalStore = defineStore('modal', () => {
     modalVisible.value = true;
   };
 
+  function showApiKeyModal(editingKey: ApiKeyFragment | null = null) {
+    apiKeyModalEditingKey.value = editingKey;
+    apiKeyModalVisible.value = true;
+  }
+  function hideApiKeyModal() {
+    apiKeyModalVisible.value = false;
+    apiKeyModalEditingKey.value = null;
+  }
+  function setApiKeyModalCreatedKey(key: { id: string; key: string } | null) {
+    apiKeyModalCreatedKey.value = key;
+  }
+
   return {
     modalVisible,
     modalHide,
     modalShow,
     modalToggle,
+    apiKeyModalVisible,
+    apiKeyModalEditingKey,
+    apiKeyModalCreatedKey,
+    showApiKeyModal,
+    hideApiKeyModal,
+    setApiKeyModalCreatedKey,
   };
 });

From bb6ba765adfba8d1288c08a071b9ed393ece378b Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 15:09:09 -0400
Subject: [PATCH 07/21] fix: removed reactive bindings

---
 web/components/Modals.ce.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/components/Modals.ce.vue b/web/components/Modals.ce.vue
index ea1a329348..4b020cb01a 100644
--- a/web/components/Modals.ce.vue
+++ b/web/components/Modals.ce.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
 
 import { useCallbackActionsStore } from '~/store/callbackActions';
 import { useTrialStore } from '~/store/trial';
@@ -8,9 +9,9 @@ import ApiKeyModal from '~/components/ApiKey/ApiKeyModal.vue';
 
 const { t } = useI18n();
 
-const { callbackStatus } = useCallbackActionsStore();
-const { trialModalVisible } = useTrialStore();
-const { updateOsModalVisible, changelogModalVisible } = useUpdateOsStore();
+const { callbackStatus } = storeToRefs(useCallbackActionsStore());
+const { trialModalVisible } = storeToRefs(useTrialStore());
+const { updateOsModalVisible, changelogModalVisible } = storeToRefs(useUpdateOsStore());
 </script>
 
 <template>

From 695468abd868125b31b6fe63e24c13a512e007de Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 15:24:46 -0400
Subject: [PATCH 08/21] fix: dialog telepor

---
 .../src/components/common/dialog/DialogScrollContent.vue     | 5 ++++-
 web/pages/webComponents.vue                                  | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/unraid-ui/src/components/common/dialog/DialogScrollContent.vue b/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
index dfb5a4358f..648b52482e 100644
--- a/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
+++ b/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import useTeleport from '@/composables/useTeleport';
 import { cn } from '@/lib/utils';
 import { reactiveOmit } from '@vueuse/core';
 import { X } from 'lucide-vue-next';
@@ -19,10 +20,12 @@ const emits = defineEmits<DialogContentEmits>();
 const delegatedProps = reactiveOmit(props, 'class');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const { teleportTarget } = useTeleport();
 </script>
 
 <template>
-  <DialogPortal>
+  <DialogPortal :to="teleportTarget">
     <DialogOverlay
       class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
diff --git a/web/pages/webComponents.vue b/web/pages/webComponents.vue
index 3ac54b4e0c..b5efa4e495 100644
--- a/web/pages/webComponents.vue
+++ b/web/pages/webComponents.vue
@@ -58,8 +58,8 @@ onBeforeMount(() => {
       <h3 class="text-lg font-semibold font-mono">SSOSignInButtonCe</h3>
       <unraid-sso-button :ssoenabled="serverState.ssoEnabled" />
       <hr class="border-black dark:border-white" />
-      <h3 class="text-lg font-semibold font-mono">ActivationCodeCe</h3>
-      <unraid-welcome-modal />
+      <h3 class="text-lg font-semibold font-mono">ApiKeyManagerCe</h3>
+      <unraid-api-key-manager />
     </unraid-i18n-host>
     <Toaster rich-colors close-button />
   </client-only>

From d4b9df43894b3ccd581f1216c077ad22eef83f31 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 16:50:58 -0400
Subject: [PATCH 09/21] feat: design review

---
 api/dev/Unraid.net/myservers.cfg              |  2 +-
 .../common/accordion/AccordionItem.vue        |  2 +-
 .../common/accordion/AccordionTrigger.vue     |  2 +-
 .../common/button/button.variants.ts          |  2 +-
 .../common/dialog/DialogScrollContent.vue     |  7 +-
 web/components/ApiKey/ApiKeyCreate.vue        | 60 +++++++++-------
 web/components/ApiKey/ApiKeyManager.vue       | 70 +++++++++++--------
 web/components/ApiKey/ApiKeyModal.vue         | 12 ++--
 web/components/ApiKey/PermissionCounter.vue   | 38 +++++++---
 web/components/ApiKey/actionVariant.ts        | 32 +++++++++
 web/components/Modals.ce.vue                  |  4 +-
 11 files changed, 152 insertions(+), 79 deletions(-)
 create mode 100644 web/components/ApiKey/actionVariant.ts

diff --git a/api/dev/Unraid.net/myservers.cfg b/api/dev/Unraid.net/myservers.cfg
index 1f8d0bb030..1c664dad22 100644
--- a/api/dev/Unraid.net/myservers.cfg
+++ b/api/dev/Unraid.net/myservers.cfg
@@ -1,5 +1,5 @@
 [api]
-version="4.8.0"
+version="4.4.1"
 extraOrigins="https://google.com,https://test.com"
 [local]
 sandbox="yes"
diff --git a/unraid-ui/src/components/common/accordion/AccordionItem.vue b/unraid-ui/src/components/common/accordion/AccordionItem.vue
index 96bafc111e..08b7018fb7 100644
--- a/unraid-ui/src/components/common/accordion/AccordionItem.vue
+++ b/unraid-ui/src/components/common/accordion/AccordionItem.vue
@@ -12,7 +12,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <AccordionItem v-bind="forwardedProps" :class="cn('border-b', props.class)">
+  <AccordionItem v-bind="forwardedProps" :class="cn(props.class)">
     <slot />
   </AccordionItem>
 </template>
diff --git a/unraid-ui/src/components/common/accordion/AccordionTrigger.vue b/unraid-ui/src/components/common/accordion/AccordionTrigger.vue
index 0b1e70c5d8..2a7e04f757 100644
--- a/unraid-ui/src/components/common/accordion/AccordionTrigger.vue
+++ b/unraid-ui/src/components/common/accordion/AccordionTrigger.vue
@@ -16,7 +16,7 @@ const delegatedProps = reactiveOmit(props, 'class');
       v-bind="delegatedProps"
       :class="
         cn(
-          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          'flex flex-1 items-center justify-between p-2 rounded-md font-medium transition-all border border-border hover:border-muted-foreground focus:border-muted-foreground [&[data-state=open]>svg]:rotate-180',
           props.class
         )
       "
diff --git a/unraid-ui/src/components/common/button/button.variants.ts b/unraid-ui/src/components/common/button/button.variants.ts
index 1fe1279837..ff78ccab48 100644
--- a/unraid-ui/src/components/common/button/button.variants.ts
+++ b/unraid-ui/src/components/common/button/button.variants.ts
@@ -13,7 +13,7 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        sm: 'h-9 rounded-md px-3',
+        sm: 'rounded-md px-3 py-1',
         md: 'h-10 px-4 py-2',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
diff --git a/unraid-ui/src/components/common/dialog/DialogScrollContent.vue b/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
index 648b52482e..e527744a1b 100644
--- a/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
+++ b/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
@@ -14,18 +14,19 @@ import {
 } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const { teleportTarget } = useTeleport();
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] } & { to?: string | HTMLElement }>();
 const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = reactiveOmit(props, 'class');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const { teleportTarget } = useTeleport();
 </script>
 
 <template>
-  <DialogPortal :to="teleportTarget">
+  <DialogPortal :to="teleportTarget ?? to">
     <DialogOverlay
       class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
diff --git a/web/components/ApiKey/ApiKeyCreate.vue b/web/components/ApiKey/ApiKeyCreate.vue
index bab686b4b5..4740eaa73f 100644
--- a/web/components/ApiKey/ApiKeyCreate.vue
+++ b/web/components/ApiKey/ApiKeyCreate.vue
@@ -15,6 +15,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Badge,
 } from '@unraid/ui';
 
 import type { FragmentType } from '~/composables/gql/fragment-masking';
@@ -25,6 +26,7 @@ import { API_KEY_FRAGMENT, CREATE_API_KEY, UPDATE_API_KEY } from './apikey.query
 import type { ApolloError } from '@apollo/client/errors';
 import PermissionCounter from './PermissionCounter.vue';
 import { extractGraphQLErrorMessage } from '~/helpers/functions';
+import { actionVariant } from './actionVariant';
 
 const props = defineProps<{
   possibleRoles: Role[];
@@ -181,7 +183,7 @@ defineExpose({
 });
 </script>
 <template>
-  <div class="mb-4 p-4 border rounded bg-muted">
+  <form @submit.prevent="upsertKey">
     <div class="mb-2">
       <Label for="api-key-name">Name</Label>
       <Input id="api-key-name" v-model="newKeyName" placeholder="Name" class="mt-1" />
@@ -204,16 +206,18 @@ defineExpose({
       </Select>
     </div>
     <div class="mb-2">
-      <Accordion type="single" collapsible class="w-full mt-2">
+      <Label for="api-key-permissions">Permissions</Label>
+      <Accordion id="api-key-permissions" type="single" collapsible class="w-full mt-2">
         <AccordionItem value="permissions">
           <AccordionTrigger>
-            <PermissionCounter :permissions="newKeyPermissions" :possible-permissions="props.possiblePermissions" label="Permissions" />
+            <PermissionCounter :permissions="newKeyPermissions" :possible-permissions="props.possiblePermissions" />
           </AccordionTrigger>
           <AccordionContent>
-            <div class="flex flex-row justify-end mb-2">
+            <div class="flex flex-row justify-end my-2">
               <Button
                 size="sm"
                 variant="secondary"
+                type="button"
                 @click="areAllPermissionsSelected() ? clearAllPermissions() : selectAllPermissions()"
               >
                 {{ areAllPermissionsSelected() ? 'Select None' : 'Select All' }}
@@ -223,13 +227,14 @@ defineExpose({
               <div
                 v-for="perm in props.possiblePermissions"
                 :key="perm.resource"
-                class="border rounded p-2"
+                class="rounded-sm p-2 border"
               >
                 <div class="flex items-center justify-between mb-1">
                   <span class="font-semibold">{{ perm.resource }}</span>
                   <Button
                     size="sm"
-                    variant="secondary"
+                    variant="link"
+                    type="button"
                     @click="
                       areAllActionsSelected(perm.resource)
                         ? clearAllActions(perm.resource)
@@ -240,24 +245,31 @@ defineExpose({
                   </Button>
                 </div>
                 <div class="flex gap-4 flex-wrap">
-                  <label v-for="action in perm.actions" :key="action" class="flex items-center gap-1">
-                    <input
-                      type="checkbox"
-                      :checked="
-                        !!newKeyPermissions.find(
-                          (p) => p.resource === perm.resource && p.actions.includes(action)
-                        )
-                      "
-                      @change="
-                        (e: Event) =>
-                          togglePermission(
-                            perm.resource,
-                            action,
-                            (e.target as HTMLInputElement)?.checked
+                  <label
+                    v-for="action in perm.actions"
+                    :key="action"
+                    class="flex items-center gap-1"
+
+                  >
+                    <Badge :variant="actionVariant(action)" class="flex items-center gap-1">
+                      <input
+                        type="checkbox"
+                        :checked="
+                          !!newKeyPermissions.find(
+                            (p) => p.resource === perm.resource && p.actions.includes(action)
                           )
-                      "
-                    />
-                    <span>{{ action }}</span>
+                        "
+                        @change="
+                          (e: Event) =>
+                            togglePermission(
+                              perm.resource,
+                              action,
+                              (e.target as HTMLInputElement)?.checked
+                            )
+                        "
+                      />
+                      <span class="text-xs">{{ action }}</span>
+                    </Badge>
                   </label>
                 </div>
               </div>
@@ -269,5 +281,5 @@ defineExpose({
     <div v-if="error" class="text-red-500 mt-2 text-sm">
       {{ extractGraphQLErrorMessage(error) }}
     </div>
-  </div>
+  </form>
 </template>
diff --git a/web/components/ApiKey/ApiKeyManager.vue b/web/components/ApiKey/ApiKeyManager.vue
index 53a1041883..75692e25a1 100644
--- a/web/components/ApiKey/ApiKeyManager.vue
+++ b/web/components/ApiKey/ApiKeyManager.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
 import { useMutation, useQuery } from '@vue/apollo-composable';
-import { useModalStore } from '~/store/modal';
 
 import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid';
 import {
@@ -17,13 +16,14 @@ import {
   Tooltip,
   TooltipProvider,
 } from '@unraid/ui';
+import { extractGraphQLErrorMessage } from '~/helpers/functions';
 
 import type { ApiKeyFragment } from '~/composables/gql/graphql';
 
 import { useFragment } from '~/composables/gql/fragment-masking';
+import { useModalStore } from '~/store/modal';
 import { API_KEY_FRAGMENT, DELETE_API_KEY, GET_API_KEY_META, GET_API_KEYS } from './apikey.query';
 import PermissionCounter from './PermissionCounter.vue';
-import { extractGraphQLErrorMessage } from '~/helpers/functions';
 
 const { result, refetch } = useQuery(GET_API_KEYS);
 const apiKeys = ref<ApiKeyFragment[]>([]);
@@ -73,7 +73,7 @@ async function _deleteKey(_id: string) {
     <div>
       <div class="flex items-center justify-between mb-6">
         <h2 class="text-2xl font-bold tracking-tight">API Keys</h2>
-        <Button variant="primary" @click="() => openCreateModal(null)">Create API Key</Button>
+        <Button variant="primary" @click="openCreateModal(null)">Create API Key</Button>
       </div>
       <div
         v-if="deleteError"
@@ -85,16 +85,26 @@ async function _deleteKey(_id: string) {
         <CardWrapper v-for="key in apiKeys" :key="key.id">
           <li class="flex flex-row items-start justify-between gap-4 p-4 list-none">
             <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-2">
-                <span class="font-semibold text-lg truncate">{{ key.name }}</span>
-                <span v-if="key.description" class="text-muted-foreground text-sm truncate">{{
-                  key.description
-                }}</span>
-              </div>
-              <div v-if="key.roles.length" class="mt-2 flex flex-wrap gap-2 items-center">
-                <span class="font-semibold text-sm">Roles:</span>
-                <Badge v-for="role in key.roles" :key="role" variant="blue" size="sm">{{ role }}</Badge>
-              </div>
+              <header class="flex gap-2 justify-between items-start">
+                <div class="flex flex-col gap-2">
+                  <div class="flex items-center gap-2">
+                    <span class="font-semibold text-lg truncate">{{ key.name }}</span>
+                    <span v-if="key.description" class="text-muted-foreground text-sm truncate">{{
+                      key.description
+                    }}</span>
+                  </div>
+                  <div v-if="key.roles.length" class="mt-2 flex flex-wrap gap-2 items-center">
+                    <span class="font-semibold text-sm">Roles:</span>
+                    <Badge v-for="role in key.roles" :key="role" variant="blue" size="sm">{{
+                      role
+                    }}</Badge>
+                  </div>
+                </div>
+                <div class="flex gap-2 flex-shrink-0">
+                  <Button variant="secondary" size="sm" @click="openCreateModal(key)">Edit</Button>
+                  <Button variant="destructive" size="sm" @click="_deleteKey(key.id)">Delete</Button>
+                </div>
+              </header>
               <div v-if="key.permissions?.length" class="pt-2 w-full">
                 <Accordion type="single" collapsible class="w-full">
                   <AccordionItem :value="'permissions-' + key.id">
@@ -106,19 +116,19 @@ async function _deleteKey(_id: string) {
                       />
                     </AccordionTrigger>
                     <AccordionContent>
-                      <div v-if="key.permissions?.length" class="flex flex-col gap-2">
+                      <div v-if="key.permissions?.length" class="flex flex-col gap-2 my-2">
                         <div
                           v-for="perm in key.permissions ?? []"
                           :key="perm.resource"
-                          class="border rounded p-2"
+                          class="border rounded-sm p-2"
                         >
-                          <div class="flex items-center gap-2">
+                          <div class="flex items-center gap-2 justify-between">
                             <span class="font-semibold">{{ perm.resource }}</span>
-                            <span
-                              v-if="perm.actions && perm.actions.length"
-                              class="text-xs text-muted-foreground"
-                              >({{ perm.actions.join(', ') }})</span
-                            >
+                            <PermissionCounter
+                              :permissions="[perm]"
+                              :possible-permissions="possiblePermissions"
+                              :hide-number="true"
+                            />
                           </div>
                         </div>
                       </div>
@@ -128,12 +138,18 @@ async function _deleteKey(_id: string) {
               </div>
 
               <div
-                v-if="modalStore.apiKeyModalCreatedKey && modalStore.apiKeyModalCreatedKey.key && modalStore.apiKeyModalCreatedKey.id === key.id"
+                v-if="
+                  modalStore.apiKeyModalCreatedKey &&
+                  modalStore.apiKeyModalCreatedKey.key &&
+                  modalStore.apiKeyModalCreatedKey.id === key.id
+                "
                 class="mt-4 flex items-center gap-2"
               >
                 <span class="text-green-700 font-medium">API Key created / updated:</span>
                 <Input
-                  :model-value="showKey ? modalStore.apiKeyModalCreatedKey.key : '••••••••••••••••••••••••••••••••'"
+                  :model-value="
+                    showKey ? modalStore.apiKeyModalCreatedKey.key : '••••••••••••••••••••••••••••••••'
+                  "
                   class="w-64 font-mono text-base px-2 py-1 bg-gray-50 border border-gray-200 rounded"
                   readonly
                 />
@@ -146,14 +162,6 @@ async function _deleteKey(_id: string) {
                 </TooltipProvider>
               </div>
             </div>
-            <div class="flex items-stretch gap-2 self-end md:self-center h-10">
-              <Button variant="secondary" size="sm" class="h-full" @click="() => openCreateModal(key)"
-                >Edit</Button
-              >
-              <Button variant="destructive" size="sm" class="h-full" @click="_deleteKey(key.id)"
-                >Delete</Button
-              >
-            </div>
           </li>
         </CardWrapper>
       </ul>
diff --git a/web/components/ApiKey/ApiKeyModal.vue b/web/components/ApiKey/ApiKeyModal.vue
index 676cfd64d0..eff3fd4342 100644
--- a/web/components/ApiKey/ApiKeyModal.vue
+++ b/web/components/ApiKey/ApiKeyModal.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useQuery } from '@vue/apollo-composable';
+import type { ComposerTranslation } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
-import { useModalStore } from '~/store/modal';
+import { useQuery } from '@vue/apollo-composable';
 
 import {
   Button,
@@ -17,11 +16,12 @@ import {
 
 import { GET_API_KEY_META } from '~/components/ApiKey/apikey.query';
 import ApiKeyCreate from '~/components/ApiKey/ApiKeyCreate.vue';
+import { useModalStore } from '~/store/modal';
 
-const { t } = useI18n();
+defineProps<{ open: boolean; t: ComposerTranslation }>();
 
 const modalStore = useModalStore();
-const { apiKeyModalVisible, apiKeyModalEditingKey } = storeToRefs(modalStore);
+const { apiKeyModalEditingKey } = storeToRefs(modalStore);
 
 const { result: apiKeyMetaResult } = useQuery(GET_API_KEY_META);
 const possibleRoles = computed(() => apiKeyMetaResult.value?.apiKeyPossibleRoles || []);
@@ -41,7 +41,7 @@ const handleCreated = (event: { id: string; key: string } | null) => {
 
 <template>
   <Dialog
-    :open="apiKeyModalVisible"
+    :open="open"
     @close="close"
     @update:open="
       (v) => {
diff --git a/web/components/ApiKey/PermissionCounter.vue b/web/components/ApiKey/PermissionCounter.vue
index fd318a3726..d028cc9a7a 100644
--- a/web/components/ApiKey/PermissionCounter.vue
+++ b/web/components/ApiKey/PermissionCounter.vue
@@ -1,15 +1,27 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-const props = defineProps<{
-  permissions: { resource: string; actions: string[] }[];
-  possiblePermissions?: { resource: string; actions: string[] }[];
-  label?: string;
-}>();
+import { Badge } from '@unraid/ui';
+
+import { actionVariant } from './actionVariant.js';
+
+const props = withDefaults(
+  defineProps<{
+    permissions: { resource: string; actions: string[] }[];
+    possiblePermissions?: { resource: string; actions: string[] }[];
+    hideNumber?: boolean;
+    label?: string;
+  }>(),
+  {
+    label: '',
+    possiblePermissions: () => [],
+    hideNumber: false,
+  }
+);
 
 const possibleActions = computed(() => {
   if (!props.possiblePermissions) return [];
-  return Array.from(new Set(props.possiblePermissions.flatMap(p => p.actions)));
+  return Array.from(new Set(props.possiblePermissions.flatMap((p) => p.actions)));
 });
 
 const actionCounts = computed(() => {
@@ -28,9 +40,15 @@ const actionCounts = computed(() => {
   <div class="flex flex-row items-center gap-1">
     <span v-if="label">{{ label }}</span>
     <template v-if="possibleActions.length">
-      (<span v-for="action in possibleActions" :key="action" class="text-xs text-muted-foreground">
-        {{ action }}: {{ actionCounts[action] || 0 }}
-      </span>)
+      <Badge
+        v-for="action in possibleActions"
+        :key="action"
+        :variant="actionVariant(action)"
+        class="text-xs text-muted-foreground"
+      >
+        <span v-if="!hideNumber">{{ action }}: {{ actionCounts[action] || 0 }}</span>
+        <span v-else>{{ action }}</span>
+      </Badge>
     </template>
   </div>
-</template> 
\ No newline at end of file
+</template>
diff --git a/web/components/ApiKey/actionVariant.ts b/web/components/ApiKey/actionVariant.ts
new file mode 100644
index 0000000000..173b536378
--- /dev/null
+++ b/web/components/ApiKey/actionVariant.ts
@@ -0,0 +1,32 @@
+export function actionVariant(action: string):
+  | 'black'
+  | 'gray'
+  | 'white'
+  | 'custom'
+  | 'red'
+  | 'yellow'
+  | 'green'
+  | 'blue'
+  | 'indigo'
+  | 'purple'
+  | 'pink'
+  | 'orange'
+  | 'transparent'
+  | 'current'
+  | null
+  | undefined {
+  switch (action) {
+    case 'read':
+      return 'blue';
+    case 'write':
+      return 'yellow';
+    case 'delete':
+      return 'red';
+    case 'update':
+      return 'orange';
+    case 'execute':
+      return 'purple';
+    default:
+      return 'gray';
+  }
+} 
\ No newline at end of file
diff --git a/web/components/Modals.ce.vue b/web/components/Modals.ce.vue
index 4b020cb01a..6fca1418e1 100644
--- a/web/components/Modals.ce.vue
+++ b/web/components/Modals.ce.vue
@@ -6,12 +6,14 @@ import { useCallbackActionsStore } from '~/store/callbackActions';
 import { useTrialStore } from '~/store/trial';
 import { useUpdateOsStore } from '~/store/updateOs';
 import ApiKeyModal from '~/components/ApiKey/ApiKeyModal.vue';
+import { useModalStore } from '~/store/modal';
 
 const { t } = useI18n();
 
 const { callbackStatus } = storeToRefs(useCallbackActionsStore());
 const { trialModalVisible } = storeToRefs(useTrialStore());
 const { updateOsModalVisible, changelogModalVisible } = storeToRefs(useUpdateOsStore());
+const { apiKeyModalVisible } = storeToRefs(useModalStore());
 </script>
 
 <template>
@@ -21,7 +23,7 @@ const { updateOsModalVisible, changelogModalVisible } = storeToRefs(useUpdateOsS
     <UpdateOsCheckUpdateResponseModal :t="t" :open="updateOsModalVisible" />
     <UpdateOsChangelogModal :t="t" :open="changelogModalVisible" />
     <ActivationModal :t="t" />
-    <ApiKeyModal />
+    <ApiKeyModal :open="apiKeyModalVisible" :t="t" />
   </div>
 </template>
 

From ce13e61008b1de781f29a5ca88b16facffd271c8 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 17:30:18 -0400
Subject: [PATCH 10/21] fix: colors

---
 .../common/dialog/DialogScrollContent.vue     |  5 +-
 web/components/ApiKey/ApiKeyCreate.vue        | 54 +++++++++----------
 web/components/ApiKey/ApiKeyManager.vue       | 20 +++----
 web/components/ApiKey/actionVariant.ts        | 10 ++--
 4 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/unraid-ui/src/components/common/dialog/DialogScrollContent.vue b/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
index e527744a1b..e00928d581 100644
--- a/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
+++ b/unraid-ui/src/components/common/dialog/DialogScrollContent.vue
@@ -16,13 +16,14 @@ import type { HTMLAttributes } from 'vue';
 
 const { teleportTarget } = useTeleport();
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] } & { to?: string | HTMLElement }>();
+const props = defineProps<
+  DialogContentProps & { class?: HTMLAttributes['class'] } & { to?: string | HTMLElement }
+>();
 const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = reactiveOmit(props, 'class');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
-
 </script>
 
 <template>
diff --git a/web/components/ApiKey/ApiKeyCreate.vue b/web/components/ApiKey/ApiKeyCreate.vue
index 4740eaa73f..9aa5f8df91 100644
--- a/web/components/ApiKey/ApiKeyCreate.vue
+++ b/web/components/ApiKey/ApiKeyCreate.vue
@@ -15,18 +15,16 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  Badge,
 } from '@unraid/ui';
+import { extractGraphQLErrorMessage } from '~/helpers/functions';
 
+import type { ApolloError } from '@apollo/client/errors';
 import type { FragmentType } from '~/composables/gql/fragment-masking';
 import type { ApiKeyFragment, Resource, Role } from '~/composables/gql/graphql';
 
 import { useFragment } from '~/composables/gql/fragment-masking';
 import { API_KEY_FRAGMENT, CREATE_API_KEY, UPDATE_API_KEY } from './apikey.query';
-import type { ApolloError } from '@apollo/client/errors';
 import PermissionCounter from './PermissionCounter.vue';
-import { extractGraphQLErrorMessage } from '~/helpers/functions';
-import { actionVariant } from './actionVariant';
 
 const props = defineProps<{
   possibleRoles: Role[];
@@ -210,13 +208,16 @@ defineExpose({
       <Accordion id="api-key-permissions" type="single" collapsible class="w-full mt-2">
         <AccordionItem value="permissions">
           <AccordionTrigger>
-            <PermissionCounter :permissions="newKeyPermissions" :possible-permissions="props.possiblePermissions" />
+            <PermissionCounter
+              :permissions="newKeyPermissions"
+              :possible-permissions="props.possiblePermissions"
+            />
           </AccordionTrigger>
           <AccordionContent>
             <div class="flex flex-row justify-end my-2">
               <Button
                 size="sm"
-                variant="secondary"
+                variant="outline"
                 type="button"
                 @click="areAllPermissionsSelected() ? clearAllPermissions() : selectAllPermissions()"
               >
@@ -245,31 +246,24 @@ defineExpose({
                   </Button>
                 </div>
                 <div class="flex gap-4 flex-wrap">
-                  <label
-                    v-for="action in perm.actions"
-                    :key="action"
-                    class="flex items-center gap-1"
-
-                  >
-                    <Badge :variant="actionVariant(action)" class="flex items-center gap-1">
-                      <input
-                        type="checkbox"
-                        :checked="
-                          !!newKeyPermissions.find(
-                            (p) => p.resource === perm.resource && p.actions.includes(action)
+                  <label v-for="action in perm.actions" :key="action" class="flex items-center gap-1">
+                    <input
+                      type="checkbox"
+                      :checked="
+                        !!newKeyPermissions.find(
+                          (p) => p.resource === perm.resource && p.actions.includes(action)
+                        )
+                      "
+                      @change="
+                        (e: Event) =>
+                          togglePermission(
+                            perm.resource,
+                            action,
+                            (e.target as HTMLInputElement)?.checked
                           )
-                        "
-                        @change="
-                          (e: Event) =>
-                            togglePermission(
-                              perm.resource,
-                              action,
-                              (e.target as HTMLInputElement)?.checked
-                            )
-                        "
-                      />
-                      <span class="text-xs">{{ action }}</span>
-                    </Badge>
+                      "
+                    />
+                    <span class="text-sm">{{ action }}</span>
                   </label>
                 </div>
               </div>
diff --git a/web/components/ApiKey/ApiKeyManager.vue b/web/components/ApiKey/ApiKeyManager.vue
index 75692e25a1..a2945ca0cb 100644
--- a/web/components/ApiKey/ApiKeyManager.vue
+++ b/web/components/ApiKey/ApiKeyManager.vue
@@ -83,19 +83,19 @@ async function _deleteKey(_id: string) {
       </div>
       <ul v-if="apiKeys.length" class="flex flex-col gap-4 mb-6">
         <CardWrapper v-for="key in apiKeys" :key="key.id">
+
           <li class="flex flex-row items-start justify-between gap-4 p-4 list-none">
             <div class="flex-1 min-w-0">
               <header class="flex gap-2 justify-between items-start">
                 <div class="flex flex-col gap-2">
-                  <div class="flex items-center gap-2">
-                    <span class="font-semibold text-lg truncate">{{ key.name }}</span>
-                    <span v-if="key.description" class="text-muted-foreground text-sm truncate">{{
-                      key.description
-                    }}</span>
-                  </div>
-                  <div v-if="key.roles.length" class="mt-2 flex flex-wrap gap-2 items-center">
-                    <span class="font-semibold text-sm">Roles:</span>
-                    <Badge v-for="role in key.roles" :key="role" variant="blue" size="sm">{{
+                  <span class="text-sm truncate"><b>ID:</b> {{ key.id.split(':')[1] }}</span>
+                  <span class="text-sm truncate"><b>Name:</b> {{ key.name }}</span>
+                  <span v-if="key.description" class="text-sm truncate"
+                    ><b>Description:</b> {{ key.description }}</span
+                  >
+                  <div v-if="key.roles.length" class="flex flex-wrap gap-2 items-center">
+                    <span class="text-sm"><b>Roles:</b></span>
+                    <Badge v-for="role in key.roles" :key="role" variant="blue" size="xs">{{
                       role
                     }}</Badge>
                   </div>
@@ -106,13 +106,13 @@ async function _deleteKey(_id: string) {
                 </div>
               </header>
               <div v-if="key.permissions?.length" class="pt-2 w-full">
+                <span class="text-sm"><b>Permissions:</b></span>
                 <Accordion type="single" collapsible class="w-full">
                   <AccordionItem :value="'permissions-' + key.id">
                     <AccordionTrigger>
                       <PermissionCounter
                         :permissions="key.permissions"
                         :possible-permissions="possiblePermissions"
-                        label="Permissions"
                       />
                     </AccordionTrigger>
                     <AccordionContent>
diff --git a/web/components/ApiKey/actionVariant.ts b/web/components/ApiKey/actionVariant.ts
index 173b536378..685f823e35 100644
--- a/web/components/ApiKey/actionVariant.ts
+++ b/web/components/ApiKey/actionVariant.ts
@@ -18,14 +18,12 @@ export function actionVariant(action: string):
   switch (action) {
     case 'read':
       return 'blue';
-    case 'write':
+    case 'create':
+      return 'green';
+    case 'update':
       return 'yellow';
     case 'delete':
-      return 'red';
-    case 'update':
-      return 'orange';
-    case 'execute':
-      return 'purple';
+      return 'pink';
     default:
       return 'gray';
   }

From a8125d8cd40e1a6627fbcbffdefe9e0069afc9f6 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 17:43:53 -0400
Subject: [PATCH 11/21] fix: color issues

---
 web/components/ApiKey/ApiKeyManager.vue     | 60 +++++++++++++++------
 web/components/ApiKey/PermissionCounter.vue |  7 ++-
 2 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/web/components/ApiKey/ApiKeyManager.vue b/web/components/ApiKey/ApiKeyManager.vue
index a2945ca0cb..a76ec4a850 100644
--- a/web/components/ApiKey/ApiKeyManager.vue
+++ b/web/components/ApiKey/ApiKeyManager.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
 import { useMutation, useQuery } from '@vue/apollo-composable';
+import { useClipboard } from '@vueuse/core';
 
-import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid';
+import { ClipboardDocumentIcon, EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid';
 import {
   Accordion,
   AccordionContent,
@@ -14,7 +15,9 @@ import {
   Input,
   PageContainer,
   Tooltip,
+  TooltipContent,
   TooltipProvider,
+  TooltipTrigger,
 } from '@unraid/ui';
 import { extractGraphQLErrorMessage } from '~/helpers/functions';
 
@@ -26,12 +29,20 @@ import { API_KEY_FRAGMENT, DELETE_API_KEY, GET_API_KEY_META, GET_API_KEYS } from
 import PermissionCounter from './PermissionCounter.vue';
 
 const { result, refetch } = useQuery(GET_API_KEYS);
+
+const modalStore = useModalStore();
 const apiKeys = ref<ApiKeyFragment[]>([]);
 
 watchEffect(() => {
   apiKeys.value = result.value?.apiKeys.map((key) => useFragment(API_KEY_FRAGMENT, key)) || [];
 });
 
+watchEffect(() => {
+  if (modalStore.apiKeyModalCreatedKey) {
+    refetch();
+  }
+});
+
 const metaQuery = useQuery(GET_API_KEY_META);
 const possibleRoles = ref<string[]>([]);
 const possiblePermissions = ref<{ resource: string; actions: string[] }[]>([]);
@@ -40,9 +51,8 @@ watchEffect(() => {
   possiblePermissions.value = metaQuery.result.value?.apiKeyPossiblePermissions || [];
 });
 
-const modalStore = useModalStore();
-
 const showKey = ref(false);
+const { copy, copied } = useClipboard();
 
 const { mutate: deleteKey } = useMutation(DELETE_API_KEY);
 
@@ -67,6 +77,12 @@ async function _deleteKey(_id: string) {
     deleteError.value = extractGraphQLErrorMessage(err);
   }
 }
+
+async function copyKey() {
+  if (modalStore.apiKeyModalCreatedKey?.key) {
+    await copy(modalStore.apiKeyModalCreatedKey.key);
+  }
+}
 </script>
 <template>
   <PageContainer>
@@ -83,7 +99,6 @@ async function _deleteKey(_id: string) {
       </div>
       <ul v-if="apiKeys.length" class="flex flex-col gap-4 mb-6">
         <CardWrapper v-for="key in apiKeys" :key="key.id">
-
           <li class="flex flex-row items-start justify-between gap-4 p-4 list-none">
             <div class="flex-1 min-w-0">
               <header class="flex gap-2 justify-between items-start">
@@ -146,18 +161,33 @@ async function _deleteKey(_id: string) {
                 class="mt-4 flex items-center gap-2"
               >
                 <span class="text-green-700 font-medium">API Key created / updated:</span>
-                <Input
-                  :model-value="
-                    showKey ? modalStore.apiKeyModalCreatedKey.key : '••••••••••••••••••••••••••••••••'
-                  "
-                  class="w-64 font-mono text-base px-2 py-1 bg-gray-50 border border-gray-200 rounded"
-                  readonly
-                />
+                <div class="relative w-64">
+                  <Input
+                    :model-value="
+                      showKey ? modalStore.apiKeyModalCreatedKey.key : '••••••••••••••••••••••••••••••••'
+                    "
+                    class="w-full font-mono text-base px-2 py-1 bg-gray-50 border border-gray-200 rounded pr-10"
+                    readonly
+                  />
+                  <button
+                    type="button"
+                    class="absolute inset-y-0 right-2 flex items-center px-1 text-gray-500 hover:text-gray-700"
+                    tabindex="-1"
+                    @click="toggleShowKey"
+                  >
+                    <component :is="showKey ? EyeSlashIcon : EyeIcon" class="w-5 h-5" />
+                  </button>
+                </div>
                 <TooltipProvider>
-                  <Tooltip :content="showKey ? 'Hide key' : 'Show key'">
-                    <Button variant="ghost" size="icon" @click="toggleShowKey">
-                      <component :is="showKey ? EyeSlashIcon : EyeIcon" class="w-5 h-5 text-gray-500" />
-                    </Button>
+                  <Tooltip :delay-duration="0">
+                    <TooltipTrigger>
+                      <Button variant="ghost" size="icon" @click="copyKey">
+                        <ClipboardDocumentIcon class="w-5 h-5" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{{ copied ? 'Copied!' : 'Copy to clipboard...' }}</p>
+                    </TooltipContent>
                   </Tooltip>
                 </TooltipProvider>
               </div>
diff --git a/web/components/ApiKey/PermissionCounter.vue b/web/components/ApiKey/PermissionCounter.vue
index d028cc9a7a..8f7b998603 100644
--- a/web/components/ApiKey/PermissionCounter.vue
+++ b/web/components/ApiKey/PermissionCounter.vue
@@ -35,13 +35,18 @@ const actionCounts = computed(() => {
   }
   return counts;
 });
+
+const filteredActions = computed(() => {
+  return possibleActions.value.filter((action) => actionCounts.value[action] > 0);
+});
+
 </script>
 <template>
   <div class="flex flex-row items-center gap-1">
     <span v-if="label">{{ label }}</span>
     <template v-if="possibleActions.length">
       <Badge
-        v-for="action in possibleActions"
+        v-for="action in filteredActions"
         :key="action"
         :variant="actionVariant(action)"
         class="text-xs text-muted-foreground"

From c749f5638cbe7c781fe445b1725b2fe598b0a0e7 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 23 May 2025 17:58:03 -0400
Subject: [PATCH 12/21] fix: don't manually push to memory on creation

---
 api/src/unraid-api/auth/api-key.service.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/api/src/unraid-api/auth/api-key.service.ts b/api/src/unraid-api/auth/api-key.service.ts
index e76f06f17e..b6cdf0257a 100644
--- a/api/src/unraid-api/auth/api-key.service.ts
+++ b/api/src/unraid-api/auth/api-key.service.ts
@@ -157,8 +157,6 @@ export class ApiKeyService implements OnModuleInit {
 
         await this.saveApiKey(apiKey as ApiKeyWithSecret);
 
-        this.memoryApiKeys.push(apiKey as ApiKeyWithSecret);
-
         return apiKey as ApiKeyWithSecret;
     }
 

From a2ca5841740cc1ba7459f04db80e74eb3d5b8099 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 27 May 2025 11:40:03 -0400
Subject: [PATCH 13/21] fix: forwarded emits

---
 unraid-ui/src/components/common/dialog/DialogClose.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/unraid-ui/src/components/common/dialog/DialogClose.vue b/unraid-ui/src/components/common/dialog/DialogClose.vue
index cfdda3a700..6178f10445 100644
--- a/unraid-ui/src/components/common/dialog/DialogClose.vue
+++ b/unraid-ui/src/components/common/dialog/DialogClose.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'reka-ui';
+import { DialogClose, useForwardPropsEmits, type DialogCloseProps } from 'reka-ui';
 
 const props = defineProps<DialogCloseProps>();
+const emits = defineEmits([]);
+
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DialogClose v-bind="props">
+  <DialogClose v-bind="forwarded">
     <slot />
   </DialogClose>
 </template>

From afc0bcfbcd057c6cb8fe2c4f5ef59975897f3e84 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 27 May 2025 11:43:15 -0400
Subject: [PATCH 14/21] fix: export dialog

---
 unraid-ui/src/components.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/unraid-ui/src/components.ts b/unraid-ui/src/components.ts
index 97d6da9d7e..182d8c1f0c 100644
--- a/unraid-ui/src/components.ts
+++ b/unraid-ui/src/components.ts
@@ -19,3 +19,4 @@ export * from '@/components/common/toast';
 export * from '@/components/common/popover';
 export * from '@/components/modals';
 export * from '@/components/common/accordion';
+export * from '@/components/common/dialog';

From cac3c97b9dc11d09d081bcfe86e644eb273a1cc7 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 27 May 2025 12:50:38 -0400
Subject: [PATCH 15/21] fix: state merging on api key manager

---
 api/dev/Unraid.net/myservers.cfg        |   2 +-
 api/dev/configs/connect.json            |   2 +-
 web/components/ApiKey/ApiKeyCreate.vue  | 301 ++++++++++++++----------
 web/components/ApiKey/ApiKeyManager.vue |  70 +++---
 web/components/ApiKey/ApiKeyModal.vue   |  80 -------
 web/components/Modals.ce.vue            |   8 +-
 web/store/apiKey.ts                     |  40 ++++
 web/store/modal.ts                      |  23 --
 8 files changed, 261 insertions(+), 265 deletions(-)
 delete mode 100644 web/components/ApiKey/ApiKeyModal.vue
 create mode 100644 web/store/apiKey.ts

diff --git a/api/dev/Unraid.net/myservers.cfg b/api/dev/Unraid.net/myservers.cfg
index 1c664dad22..1f8d0bb030 100644
--- a/api/dev/Unraid.net/myservers.cfg
+++ b/api/dev/Unraid.net/myservers.cfg
@@ -1,5 +1,5 @@
 [api]
-version="4.4.1"
+version="4.8.0"
 extraOrigins="https://google.com,https://test.com"
 [local]
 sandbox="yes"
diff --git a/api/dev/configs/connect.json b/api/dev/configs/connect.json
index 157a8984b8..67dcd19a81 100644
--- a/api/dev/configs/connect.json
+++ b/api/dev/configs/connect.json
@@ -13,4 +13,4 @@
   "refreshtoken": "",
   "dynamicRemoteAccessType": "DISABLED",
   "ssoSubIds": []
-}
\ No newline at end of file
+}
diff --git a/web/components/ApiKey/ApiKeyCreate.vue b/web/components/ApiKey/ApiKeyCreate.vue
index 9aa5f8df91..374a4b511a 100644
--- a/web/components/ApiKey/ApiKeyCreate.vue
+++ b/web/components/ApiKey/ApiKeyCreate.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { useMutation } from '@vue/apollo-composable';
+import { storeToRefs } from 'pinia';
+import { useMutation, useQuery } from '@vue/apollo-composable';
 
 import {
   Accordion,
@@ -8,6 +9,12 @@ import {
   AccordionItem,
   AccordionTrigger,
   Button,
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogScrollContent,
+  DialogTitle,
   Input,
   Label,
   Select,
@@ -20,18 +27,28 @@ import { extractGraphQLErrorMessage } from '~/helpers/functions';
 
 import type { ApolloError } from '@apollo/client/errors';
 import type { FragmentType } from '~/composables/gql/fragment-masking';
-import type { ApiKeyFragment, Resource, Role } from '~/composables/gql/graphql';
+import type { Resource, Role } from '~/composables/gql/graphql';
+import type { ComposerTranslation } from 'vue-i18n';
 
 import { useFragment } from '~/composables/gql/fragment-masking';
-import { API_KEY_FRAGMENT, CREATE_API_KEY, UPDATE_API_KEY } from './apikey.query';
+import { useApiKeyStore } from '~/store/apiKey';
+import {
+  API_KEY_FRAGMENT,
+  API_KEY_FRAGMENT_WITH_KEY,
+  CREATE_API_KEY,
+  GET_API_KEY_META,
+  UPDATE_API_KEY,
+} from './apikey.query';
 import PermissionCounter from './PermissionCounter.vue';
 
-const props = defineProps<{
-  possibleRoles: Role[];
-  possiblePermissions: { resource: Resource; actions: string[] }[];
-  editingKey?: ApiKeyFragment | null;
-}>();
-const emit = defineEmits(['created', 'cancel']);
+defineProps<{ t: ComposerTranslation }>();
+
+const apiKeyStore = useApiKeyStore();
+const { modalVisible, editingKey } = storeToRefs(apiKeyStore);
+
+const { result: apiKeyMetaResult } = useQuery(GET_API_KEY_META);
+const possibleRoles = computed(() => apiKeyMetaResult.value?.apiKeyPossibleRoles || []);
+const possiblePermissions = computed(() => apiKeyMetaResult.value?.apiKeyPossiblePermissions || []);
 
 const newKeyName = ref('');
 const newKeyDescription = ref('');
@@ -44,9 +61,8 @@ const postCreateLoading = ref(false);
 const loading = computed<boolean>(() => createLoading.value || updateLoading.value);
 const error = computed<ApolloError | null>(() => createError.value || updateError.value);
 
-// Prefill form fields if editingKey is present
 watch(
-  () => props.editingKey,
+  () => editingKey.value,
   (key) => {
     const fragmentKey = key
       ? useFragment(API_KEY_FRAGMENT, key as FragmentType<typeof API_KEY_FRAGMENT>)
@@ -91,14 +107,14 @@ function togglePermission(resource: string, action: string, checked: boolean) {
 }
 
 function areAllPermissionsSelected() {
-  return props.possiblePermissions.every((perm) => {
+  return possiblePermissions.value.every((perm) => {
     const selected = newKeyPermissions.value.find((p) => p.resource === perm.resource)?.actions || [];
     return perm.actions.every((a) => selected.includes(a));
   });
 }
 
 function selectAllPermissions() {
-  newKeyPermissions.value = props.possiblePermissions.map((perm) => ({
+  newKeyPermissions.value = possiblePermissions.value.map((perm) => ({
     resource: perm.resource as Resource,
     actions: [...perm.actions],
   }));
@@ -109,7 +125,7 @@ function clearAllPermissions() {
 }
 
 function areAllActionsSelected(resource: string) {
-  const perm = props.possiblePermissions.find((p) => p.resource === resource);
+  const perm = possiblePermissions.value.find((p) => p.resource === resource);
   if (!perm) return false;
   const selected = newKeyPermissions.value.find((p) => p.resource === resource)?.actions || [];
   return perm.actions.every((a) => selected.includes(a));
@@ -117,7 +133,7 @@ function areAllActionsSelected(resource: string) {
 
 function selectAllActions(resource: string) {
   const res = resource as Resource;
-  const perm = props.possiblePermissions.find((p) => p.resource === res);
+  const perm = possiblePermissions.value.find((p) => p.resource === res);
   if (!perm) return;
   const idx = newKeyPermissions.value.findIndex((p) => p.resource === res);
   if (idx !== -1) {
@@ -131,15 +147,19 @@ function clearAllActions(resource: string) {
   newKeyPermissions.value = newKeyPermissions.value.filter((p) => p.resource !== resource);
 }
 
+const close = () => {
+  apiKeyStore.hideModal();
+};
+
 async function upsertKey() {
   postCreateLoading.value = true;
   try {
-    const isEdit = !!props.editingKey?.id;
+    const isEdit = !!editingKey.value?.id;
     let res;
-    if (isEdit) {
+    if (isEdit && editingKey.value) {
       res = await updateApiKey({
         input: {
-          id: props.editingKey.id,
+          id: editingKey.value.id,
           name: newKeyName.value,
           description: newKeyDescription.value,
           roles: newKeyRoles.value,
@@ -156,14 +176,20 @@ async function upsertKey() {
         },
       });
     }
-    let createdKey = null;
+
     const apiKeyResult = res?.data?.apiKey;
     if (isEdit && apiKeyResult && 'update' in apiKeyResult) {
-      createdKey = apiKeyResult.update;
+      const fragmentData = useFragment(API_KEY_FRAGMENT_WITH_KEY, apiKeyResult.update);
+      console.log('fragmentData', fragmentData);
+      apiKeyStore.setCreatedKey(fragmentData);
     } else if (!isEdit && apiKeyResult && 'create' in apiKeyResult) {
-      createdKey = apiKeyResult.create;
+      const fragmentData = useFragment(API_KEY_FRAGMENT_WITH_KEY, apiKeyResult.create);
+      console.log('fragmentData', fragmentData);
+      apiKeyStore.setCreatedKey(fragmentData);
     }
-    emit('created', createdKey);
+    
+    modalVisible.value = false;
+    editingKey.value = null;
     newKeyName.value = '';
     newKeyDescription.value = '';
     newKeyRoles.value = [];
@@ -172,108 +198,139 @@ async function upsertKey() {
     postCreateLoading.value = false;
   }
 }
-
-defineExpose({
-  upsertKey,
-  loading,
-  postCreateLoading,
-  error,
-});
 </script>
+
 <template>
-  <form @submit.prevent="upsertKey">
-    <div class="mb-2">
-      <Label for="api-key-name">Name</Label>
-      <Input id="api-key-name" v-model="newKeyName" placeholder="Name" class="mt-1" />
-    </div>
-    <div class="mb-2">
-      <Label for="api-key-desc">Description</Label>
-      <Input id="api-key-desc" v-model="newKeyDescription" placeholder="Description" class="mt-1" />
-    </div>
-    <div class="mb-2">
-      <Label for="api-key-roles">Roles</Label>
-      <Select v-model="newKeyRoles" multiple class="mt-1 w-full">
-        <SelectTrigger>
-          <SelectValue placeholder="Select Roles" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem v-for="role in props.possibleRoles" :key="role" :value="role">{{
-            role
-          }}</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-    <div class="mb-2">
-      <Label for="api-key-permissions">Permissions</Label>
-      <Accordion id="api-key-permissions" type="single" collapsible class="w-full mt-2">
-        <AccordionItem value="permissions">
-          <AccordionTrigger>
-            <PermissionCounter
-              :permissions="newKeyPermissions"
-              :possible-permissions="props.possiblePermissions"
+  <Dialog
+    :open="modalVisible"
+    @close="close"
+    @update:open="
+      (v) => {
+        if (!v) close();
+      }
+    "
+  >
+    <DialogScrollContent class="max-w-800px">
+      <DialogHeader>
+        <DialogTitle>{{ editingKey ? t('Edit API Key') : t('Create API Key') }}</DialogTitle>
+      </DialogHeader>
+      <DialogDescription>
+        <form @submit.prevent="upsertKey">
+          <div class="mb-2">
+            <Label for="api-key-name">Name</Label>
+            <Input id="api-key-name" v-model="newKeyName" placeholder="Name" class="mt-1" />
+          </div>
+          <div class="mb-2">
+            <Label for="api-key-desc">Description</Label>
+            <Input
+              id="api-key-desc"
+              v-model="newKeyDescription"
+              placeholder="Description"
+              class="mt-1"
             />
-          </AccordionTrigger>
-          <AccordionContent>
-            <div class="flex flex-row justify-end my-2">
-              <Button
-                size="sm"
-                variant="outline"
-                type="button"
-                @click="areAllPermissionsSelected() ? clearAllPermissions() : selectAllPermissions()"
-              >
-                {{ areAllPermissionsSelected() ? 'Select None' : 'Select All' }}
-              </Button>
-            </div>
-            <div class="flex flex-col gap-2 mt-1">
-              <div
-                v-for="perm in props.possiblePermissions"
-                :key="perm.resource"
-                class="rounded-sm p-2 border"
-              >
-                <div class="flex items-center justify-between mb-1">
-                  <span class="font-semibold">{{ perm.resource }}</span>
-                  <Button
-                    size="sm"
-                    variant="link"
-                    type="button"
-                    @click="
-                      areAllActionsSelected(perm.resource)
-                        ? clearAllActions(perm.resource)
-                        : selectAllActions(perm.resource)
-                    "
-                  >
-                    {{ areAllActionsSelected(perm.resource) ? 'Select None' : 'Select All' }}
-                  </Button>
-                </div>
-                <div class="flex gap-4 flex-wrap">
-                  <label v-for="action in perm.actions" :key="action" class="flex items-center gap-1">
-                    <input
-                      type="checkbox"
-                      :checked="
-                        !!newKeyPermissions.find(
-                          (p) => p.resource === perm.resource && p.actions.includes(action)
-                        )
-                      "
-                      @change="
-                        (e: Event) =>
-                          togglePermission(
-                            perm.resource,
-                            action,
-                            (e.target as HTMLInputElement)?.checked
-                          )
+          </div>
+          <div class="mb-2">
+            <Label for="api-key-roles">Roles</Label>
+            <Select v-model="newKeyRoles" multiple class="mt-1 w-full">
+              <SelectTrigger>
+                <SelectValue placeholder="Select Roles" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="role in possibleRoles" :key="role" :value="role">{{
+                  role
+                }}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div class="mb-2">
+            <Label for="api-key-permissions">Permissions</Label>
+            <Accordion id="api-key-permissions" type="single" collapsible class="w-full mt-2">
+              <AccordionItem value="permissions">
+                <AccordionTrigger>
+                  <PermissionCounter
+                    :permissions="newKeyPermissions"
+                    :possible-permissions="possiblePermissions"
+                  />
+                </AccordionTrigger>
+                <AccordionContent>
+                  <div class="flex flex-row justify-end my-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      type="button"
+                      @click="
+                        areAllPermissionsSelected() ? clearAllPermissions() : selectAllPermissions()
                       "
-                    />
-                    <span class="text-sm">{{ action }}</span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
-    <div v-if="error" class="text-red-500 mt-2 text-sm">
-      {{ extractGraphQLErrorMessage(error) }}
-    </div>
-  </form>
+                    >
+                      {{ areAllPermissionsSelected() ? 'Select None' : 'Select All' }}
+                    </Button>
+                  </div>
+                  <div class="flex flex-col gap-2 mt-1">
+                    <div
+                      v-for="perm in possiblePermissions"
+                      :key="perm.resource"
+                      class="rounded-sm p-2 border"
+                    >
+                      <div class="flex items-center justify-between mb-1">
+                        <span class="font-semibold">{{ perm.resource }}</span>
+                        <Button
+                          size="sm"
+                          variant="link"
+                          type="button"
+                          @click="
+                            areAllActionsSelected(perm.resource)
+                              ? clearAllActions(perm.resource)
+                              : selectAllActions(perm.resource)
+                          "
+                        >
+                          {{ areAllActionsSelected(perm.resource) ? 'Select None' : 'Select All' }}
+                        </Button>
+                      </div>
+                      <div class="flex gap-4 flex-wrap">
+                        <label
+                          v-for="action in perm.actions"
+                          :key="action"
+                          class="flex items-center gap-1"
+                        >
+                          <input
+                            type="checkbox"
+                            :checked="
+                              !!newKeyPermissions.find(
+                                (p) => p.resource === perm.resource && p.actions.includes(action)
+                              )
+                            "
+                            @change="
+                              (e: Event) =>
+                                togglePermission(
+                                  perm.resource,
+                                  action,
+                                  (e.target as HTMLInputElement)?.checked
+                                )
+                            "
+                          />
+                          <span class="text-sm">{{ action }}</span>
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
+          <div v-if="error" class="text-red-500 mt-2 text-sm">
+            {{ extractGraphQLErrorMessage(error) }}
+          </div>
+        </form>
+      </DialogDescription>
+      <DialogFooter>
+        <Button variant="secondary" @click="close">Cancel</Button>
+        <Button variant="primary" :disabled="loading || postCreateLoading" @click="upsertKey()">
+          <span v-if="loading || postCreateLoading">
+            {{ editingKey ? 'Saving...' : 'Creating...' }}
+          </span>
+          <span v-else>{{ editingKey ? 'Save' : 'Create' }}</span>
+        </Button>
+      </DialogFooter>
+    </DialogScrollContent>
+  </Dialog>
 </template>
diff --git a/web/components/ApiKey/ApiKeyManager.vue b/web/components/ApiKey/ApiKeyManager.vue
index a76ec4a850..8396f6586e 100644
--- a/web/components/ApiKey/ApiKeyManager.vue
+++ b/web/components/ApiKey/ApiKeyManager.vue
@@ -21,26 +21,33 @@ import {
 } from '@unraid/ui';
 import { extractGraphQLErrorMessage } from '~/helpers/functions';
 
-import type { ApiKeyFragment } from '~/composables/gql/graphql';
+import type { ApiKeyFragment, ApiKeyWithKeyFragment } from '~/composables/gql/graphql';
 
 import { useFragment } from '~/composables/gql/fragment-masking';
-import { useModalStore } from '~/store/modal';
+import { useApiKeyStore } from '~/store/apiKey';
 import { API_KEY_FRAGMENT, DELETE_API_KEY, GET_API_KEY_META, GET_API_KEYS } from './apikey.query';
 import PermissionCounter from './PermissionCounter.vue';
 
 const { result, refetch } = useQuery(GET_API_KEYS);
 
-const modalStore = useModalStore();
-const apiKeys = ref<ApiKeyFragment[]>([]);
+const apiKeyStore = useApiKeyStore();
+const { createdKey } = storeToRefs(apiKeyStore);
+const apiKeys = ref<(ApiKeyFragment | ApiKeyWithKeyFragment)[]>([]);
 
 watchEffect(() => {
-  apiKeys.value = result.value?.apiKeys.map((key) => useFragment(API_KEY_FRAGMENT, key)) || [];
-});
-
-watchEffect(() => {
-  if (modalStore.apiKeyModalCreatedKey) {
-    refetch();
+  const baseKeys: (ApiKeyFragment | ApiKeyWithKeyFragment)[] =
+    result.value?.apiKeys.map((key) => useFragment(API_KEY_FRAGMENT, key)) || [];
+  console.log(createdKey.value);
+  if (createdKey.value) {
+    const existingKeyIndex = baseKeys.findIndex((key) => key.id === createdKey.value?.id);
+    if (existingKeyIndex >= 0) {
+      baseKeys[existingKeyIndex] = createdKey.value as ApiKeyFragment | ApiKeyWithKeyFragment;
+    } else {
+      baseKeys.unshift(createdKey.value as ApiKeyFragment | ApiKeyWithKeyFragment);
+    }
   }
+
+  apiKeys.value = baseKeys;
 });
 
 const metaQuery = useQuery(GET_API_KEY_META);
@@ -51,19 +58,20 @@ watchEffect(() => {
   possiblePermissions.value = metaQuery.result.value?.apiKeyPossiblePermissions || [];
 });
 
-const showKey = ref(false);
+const showKey = ref<Record<string, boolean>>({});
 const { copy, copied } = useClipboard();
 
 const { mutate: deleteKey } = useMutation(DELETE_API_KEY);
 
 const deleteError = ref<string | null>(null);
 
-function toggleShowKey() {
-  showKey.value = !showKey.value;
+function toggleShowKey(keyId: string) {
+  showKey.value[keyId] = !showKey.value[keyId];
 }
 
-function openCreateModal(key: ApiKeyFragment | null = null) {
-  modalStore.showApiKeyModal(key);
+function openCreateModal(key: ApiKeyFragment | ApiKeyWithKeyFragment | null = null) {
+  apiKeyStore.clearCreatedKey();
+  apiKeyStore.showModal(key as ApiKeyFragment | null);
 }
 
 async function _deleteKey(_id: string) {
@@ -78,12 +86,15 @@ async function _deleteKey(_id: string) {
   }
 }
 
-async function copyKey() {
-  if (modalStore.apiKeyModalCreatedKey?.key) {
-    await copy(modalStore.apiKeyModalCreatedKey.key);
-  }
+function hasKey(key: ApiKeyFragment | ApiKeyWithKeyFragment): key is ApiKeyWithKeyFragment {
+  return 'key' in key && !!key.key;
+}
+
+async function copyKeyValue(keyValue: string) {
+  await copy(keyValue);
 }
 </script>
+
 <template>
   <PageContainer>
     <div>
@@ -152,20 +163,11 @@ async function copyKey() {
                 </Accordion>
               </div>
 
-              <div
-                v-if="
-                  modalStore.apiKeyModalCreatedKey &&
-                  modalStore.apiKeyModalCreatedKey.key &&
-                  modalStore.apiKeyModalCreatedKey.id === key.id
-                "
-                class="mt-4 flex items-center gap-2"
-              >
-                <span class="text-green-700 font-medium">API Key created / updated:</span>
+              <div v-if="hasKey(key)" class="mt-4 flex items-center gap-2">
+                <span class="text-green-700 font-medium">API Key:</span>
                 <div class="relative w-64">
                   <Input
-                    :model-value="
-                      showKey ? modalStore.apiKeyModalCreatedKey.key : '••••••••••••••••••••••••••••••••'
-                    "
+                    :model-value="showKey[key.id] ? key.key : '••••••••••••••••••••••••••••••••'"
                     class="w-full font-mono text-base px-2 py-1 bg-gray-50 border border-gray-200 rounded pr-10"
                     readonly
                   />
@@ -173,15 +175,15 @@ async function copyKey() {
                     type="button"
                     class="absolute inset-y-0 right-2 flex items-center px-1 text-gray-500 hover:text-gray-700"
                     tabindex="-1"
-                    @click="toggleShowKey"
+                    @click="toggleShowKey(key.id)"
                   >
-                    <component :is="showKey ? EyeSlashIcon : EyeIcon" class="w-5 h-5" />
+                    <component :is="showKey[key.id] ? EyeSlashIcon : EyeIcon" class="w-5 h-5" />
                   </button>
                 </div>
                 <TooltipProvider>
                   <Tooltip :delay-duration="0">
                     <TooltipTrigger>
-                      <Button variant="ghost" size="icon" @click="copyKey">
+                      <Button variant="ghost" size="icon" @click="copyKeyValue(key.key)">
                         <ClipboardDocumentIcon class="w-5 h-5" />
                       </Button>
                     </TooltipTrigger>
diff --git a/web/components/ApiKey/ApiKeyModal.vue b/web/components/ApiKey/ApiKeyModal.vue
deleted file mode 100644
index eff3fd4342..0000000000
--- a/web/components/ApiKey/ApiKeyModal.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import type { ComposerTranslation } from 'vue-i18n';
-import { storeToRefs } from 'pinia';
-import { useQuery } from '@vue/apollo-composable';
-
-import {
-  Button,
-  Dialog,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogScrollContent,
-  DialogTitle,
-} from '@unraid/ui';
-
-import { GET_API_KEY_META } from '~/components/ApiKey/apikey.query';
-import ApiKeyCreate from '~/components/ApiKey/ApiKeyCreate.vue';
-import { useModalStore } from '~/store/modal';
-
-defineProps<{ open: boolean; t: ComposerTranslation }>();
-
-const modalStore = useModalStore();
-const { apiKeyModalEditingKey } = storeToRefs(modalStore);
-
-const { result: apiKeyMetaResult } = useQuery(GET_API_KEY_META);
-const possibleRoles = computed(() => apiKeyMetaResult.value?.apiKeyPossibleRoles || []);
-const possiblePermissions = computed(() => apiKeyMetaResult.value?.apiKeyPossiblePermissions || []);
-
-const apiKeyCreateRef = ref();
-
-const close = () => {
-  modalStore.hideApiKeyModal();
-};
-
-const handleCreated = (event: { id: string; key: string } | null) => {
-  modalStore.setApiKeyModalCreatedKey(event);
-  close();
-};
-</script>
-
-<template>
-  <Dialog
-    :open="open"
-    @close="close"
-    @update:open="
-      (v) => {
-        if (!v) close();
-      }
-    "
-  >
-    <DialogScrollContent class="max-w-800px">
-      <DialogHeader>
-        <DialogTitle>{{ apiKeyModalEditingKey ? t('Edit API Key') : t('Create API Key') }}</DialogTitle>
-      </DialogHeader>
-      <DialogDescription>
-        <ApiKeyCreate
-          ref="apiKeyCreateRef"
-          :possible-roles="possibleRoles"
-          :possible-permissions="possiblePermissions"
-          :editing-key="apiKeyModalEditingKey"
-          @created="handleCreated"
-        />
-      </DialogDescription>
-      <DialogFooter>
-        <Button variant="secondary" @click="close">Cancel</Button>
-        <Button
-          variant="primary"
-          :disabled="apiKeyCreateRef?.loading || apiKeyCreateRef?.postCreateLoading"
-          @click="apiKeyCreateRef?.upsertKey()"
-        >
-          <span v-if="apiKeyCreateRef?.loading || apiKeyCreateRef?.postCreateLoading">
-            {{ apiKeyModalEditingKey ? 'Saving...' : 'Creating...' }}
-          </span>
-          <span v-else>{{ apiKeyModalEditingKey ? 'Save' : 'Create' }}</span>
-        </Button>
-      </DialogFooter>
-    </DialogScrollContent>
-  </Dialog>
-</template>
diff --git a/web/components/Modals.ce.vue b/web/components/Modals.ce.vue
index 6fca1418e1..1e4c0fec9d 100644
--- a/web/components/Modals.ce.vue
+++ b/web/components/Modals.ce.vue
@@ -5,15 +5,15 @@ import { storeToRefs } from 'pinia';
 import { useCallbackActionsStore } from '~/store/callbackActions';
 import { useTrialStore } from '~/store/trial';
 import { useUpdateOsStore } from '~/store/updateOs';
-import ApiKeyModal from '~/components/ApiKey/ApiKeyModal.vue';
-import { useModalStore } from '~/store/modal';
+import { useApiKeyStore } from '~/store/apiKey';
+import ApiKeyCreate from '~/components/ApiKey/ApiKeyCreate.vue';
 
 const { t } = useI18n();
 
 const { callbackStatus } = storeToRefs(useCallbackActionsStore());
 const { trialModalVisible } = storeToRefs(useTrialStore());
 const { updateOsModalVisible, changelogModalVisible } = storeToRefs(useUpdateOsStore());
-const { apiKeyModalVisible } = storeToRefs(useModalStore());
+const { modalVisible: apiKeyModalVisible } = storeToRefs(useApiKeyStore());
 </script>
 
 <template>
@@ -23,7 +23,7 @@ const { apiKeyModalVisible } = storeToRefs(useModalStore());
     <UpdateOsCheckUpdateResponseModal :t="t" :open="updateOsModalVisible" />
     <UpdateOsChangelogModal :t="t" :open="changelogModalVisible" />
     <ActivationModal :t="t" />
-    <ApiKeyModal :open="apiKeyModalVisible" :t="t" />
+    <ApiKeyCreate :open="apiKeyModalVisible" :t="t" />
   </div>
 </template>
 
diff --git a/web/store/apiKey.ts b/web/store/apiKey.ts
new file mode 100644
index 0000000000..11ede8e3aa
--- /dev/null
+++ b/web/store/apiKey.ts
@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+import { createPinia, defineStore, setActivePinia } from 'pinia';
+
+import type { ApiKeyFragment, ApiKeyWithKeyFragment } from '~/composables/gql/graphql';
+
+setActivePinia(createPinia());
+
+export const useApiKeyStore = defineStore('apiKey', () => {
+  const modalVisible = ref(false);
+  const editingKey = ref<ApiKeyFragment | null>(null);
+  const createdKey = ref<ApiKeyWithKeyFragment | null>(null);
+
+  function showModal(key: ApiKeyFragment | null = null) {
+    editingKey.value = key;
+    modalVisible.value = true;
+  }
+
+  function hideModal() {
+    modalVisible.value = false;
+    editingKey.value = null;
+  }
+
+  function setCreatedKey(key: ApiKeyWithKeyFragment | null) {
+    createdKey.value = key;
+  }
+
+  function clearCreatedKey() {
+    createdKey.value = null;
+  }
+
+  return {
+    modalVisible,
+    editingKey,
+    createdKey,
+    showModal,
+    hideModal,
+    setCreatedKey,
+    clearCreatedKey,
+  };
+});
diff --git a/web/store/modal.ts b/web/store/modal.ts
index 57d4a94ba3..1500fc76c0 100644
--- a/web/store/modal.ts
+++ b/web/store/modal.ts
@@ -1,7 +1,5 @@
 import { createPinia, defineStore, setActivePinia } from 'pinia';
 import { useToggle } from '@vueuse/core';
-import type { ApiKeyFragment } from '~/composables/gql/graphql';
-import { ref } from 'vue';
 
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
@@ -11,9 +9,6 @@ setActivePinia(createPinia());
 
 export const useModalStore = defineStore('modal', () => {
   const [modalVisible, modalToggle] = useToggle(true);
-  const apiKeyModalVisible = ref(false);
-  const apiKeyModalEditingKey = ref<ApiKeyFragment | null>(null);
-  const apiKeyModalCreatedKey = ref<{ id: string; key: string } | null>(null);
 
   const modalHide = () => {
     modalVisible.value = false;
@@ -22,28 +17,10 @@ export const useModalStore = defineStore('modal', () => {
     modalVisible.value = true;
   };
 
-  function showApiKeyModal(editingKey: ApiKeyFragment | null = null) {
-    apiKeyModalEditingKey.value = editingKey;
-    apiKeyModalVisible.value = true;
-  }
-  function hideApiKeyModal() {
-    apiKeyModalVisible.value = false;
-    apiKeyModalEditingKey.value = null;
-  }
-  function setApiKeyModalCreatedKey(key: { id: string; key: string } | null) {
-    apiKeyModalCreatedKey.value = key;
-  }
-
   return {
     modalVisible,
     modalHide,
     modalShow,
     modalToggle,
-    apiKeyModalVisible,
-    apiKeyModalEditingKey,
-    apiKeyModalCreatedKey,
-    showApiKeyModal,
-    hideApiKeyModal,
-    setApiKeyModalCreatedKey,
   };
 });

From 48ecabd8dabd2e9e756990f01a5de1f94377043f Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 17 Jun 2025 15:38:52 -0400
Subject: [PATCH 16/21] chore: update import

---
 api/dev/states/myservers.cfg                         |  2 +-
 .../graph/resolvers/api-key/api-key.model.ts         | 12 ++----------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/api/dev/states/myservers.cfg b/api/dev/states/myservers.cfg
index c8a8701d15..5324fcaa8a 100644
--- a/api/dev/states/myservers.cfg
+++ b/api/dev/states/myservers.cfg
@@ -1,5 +1,5 @@
 [api]
-version="4.4.1"
+version="4.8.0"
 extraOrigins="https://google.com,https://test.com"
 [local]
 sandbox="yes"
diff --git a/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts b/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts
index 181c928326..3bea8ee91d 100644
--- a/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts
+++ b/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts
@@ -1,7 +1,5 @@
 import { Field, InputType, ObjectType } from '@nestjs/graphql';
 
-
-
 import { Node, Resource, Role } from '@unraid/shared/graphql.model.js';
 import { PrefixedID } from '@unraid/shared/prefixed-id-scalar.js';
 import { Transform, Type } from 'class-transformer';
@@ -16,13 +14,7 @@ import {
     ValidateNested,
 } from 'class-validator';
 
-
-
-import { AtLeastOneOf } from '@unraid/shared/validation.utils.js';
-
-
-
-
+import { AtLeastOneOf } from '@app/unraid-api/graph/resolvers/validation.utils.js';
 
 @ObjectType()
 export class Permission {
@@ -188,4 +180,4 @@ export class DeleteApiKeyInput {
     @IsArray()
     @IsString({ each: true })
     ids!: string[];
-}
\ No newline at end of file
+}

From e0575d0e54162984dccab313fcc111bea7da14b5 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 17 Jun 2025 15:43:48 -0400
Subject: [PATCH 17/21] chore: begin code review updates

---
 .../graph/resolvers/api-key/api-key.model.ts  |  4 +--
 .../resolvers/api-key/api-key.mutation.ts     | 25 ++++---------------
 web/components/ApiKey/ApiKeyManager.vue       |  4 +++
 3 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts b/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts
index 3bea8ee91d..ac4a4e5831 100644
--- a/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts
+++ b/api/src/unraid-api/graph/resolvers/api-key/api-key.model.ts
@@ -114,7 +114,7 @@ export class CreateApiKeyInput {
     @AtLeastOneOf(['roles', 'permissions'], {
         message: 'At least one role or one permission is required to create an API key.',
     })
-    _atLeastOne!: any;
+    _atLeastOne!: boolean;
 }
 
 @InputType()
@@ -149,7 +149,7 @@ export class UpdateApiKeyInput {
     @AtLeastOneOf(['roles', 'permissions'], {
         message: 'At least one role or one permission is required to update an API key.',
     })
-    _atLeastOne!: any;
+    _atLeastOne!: boolean;
 }
 
 @InputType()
diff --git a/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.ts b/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.ts
index e5807ee474..d1ce770431 100644
--- a/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.ts
+++ b/api/src/unraid-api/graph/resolvers/api-key/api-key.mutation.ts
@@ -33,13 +33,7 @@ export class ApiKeyMutationsResolver {
         possession: AuthPossession.ANY,
     })
     @ResolveField(() => ApiKeyWithSecret, { description: 'Create an API key' })
-    async create(@Args('input') unvalidatedInput: CreateApiKeyInput): Promise<ApiKeyWithSecret> {
-        const input = await validateObject(CreateApiKeyInput, unvalidatedInput);
-        const hasRoles = Array.isArray(input.roles) && input.roles.length > 0;
-        const hasPermissions = Array.isArray(input.permissions) && input.permissions.length > 0;
-        if (!hasRoles && !hasPermissions) {
-            throw new Error('At least one role or one permission is required to create an API key.');
-        }
+    async create(@Args('input') input: CreateApiKeyInput): Promise<ApiKeyWithSecret> {
         const apiKey = await this.apiKeyService.create({
             name: input.name,
             description: input.description ?? undefined,
@@ -58,8 +52,7 @@ export class ApiKeyMutationsResolver {
     })
     @ResolveField(() => Boolean, { description: 'Add a role to an API key' })
     async addRole(@Args('input') input: AddRoleForApiKeyInput): Promise<boolean> {
-        const validatedInput = await validateObject(AddRoleForApiKeyInput, input);
-        return this.authService.addRoleToApiKey(validatedInput.apiKeyId, Role[validatedInput.role]);
+        return this.authService.addRoleToApiKey(input.apiKeyId, Role[input.role]);
     }
 
     @UsePermissions({
@@ -69,8 +62,7 @@ export class ApiKeyMutationsResolver {
     })
     @ResolveField(() => Boolean, { description: 'Remove a role from an API key' })
     async removeRole(@Args('input') input: RemoveRoleFromApiKeyInput): Promise<boolean> {
-        const validatedInput = await validateObject(RemoveRoleFromApiKeyInput, input);
-        return this.authService.removeRoleFromApiKey(validatedInput.apiKeyId, Role[validatedInput.role]);
+        return this.authService.removeRoleFromApiKey(input.apiKeyId, Role[input.role]);
     }
 
     @UsePermissions({
@@ -80,8 +72,7 @@ export class ApiKeyMutationsResolver {
     })
     @ResolveField(() => Boolean, { description: 'Delete one or more API keys' })
     async delete(@Args('input') input: DeleteApiKeyInput): Promise<boolean> {
-        const validatedInput = await validateObject(DeleteApiKeyInput, input);
-        await this.apiKeyService.deleteApiKeys(validatedInput.ids);
+        await this.apiKeyService.deleteApiKeys(input.ids);
         return true;
     }
 
@@ -91,13 +82,7 @@ export class ApiKeyMutationsResolver {
         possession: AuthPossession.ANY,
     })
     @ResolveField(() => ApiKeyWithSecret, { description: 'Update an API key' })
-    async update(@Args('input') unvalidatedInput: UpdateApiKeyInput): Promise<ApiKeyWithSecret> {
-        const input = await validateObject(UpdateApiKeyInput, unvalidatedInput);
-        const hasRoles = Array.isArray(input.roles) && input.roles.length > 0;
-        const hasPermissions = Array.isArray(input.permissions) && input.permissions.length > 0;
-        if (!hasRoles && !hasPermissions) {
-            throw new Error('At least one role or one permission is required to update an API key.');
-        }
+    async update(@Args('input') input: UpdateApiKeyInput): Promise<ApiKeyWithSecret> {
         const apiKey = await this.apiKeyService.update(input);
         await this.authService.syncApiKeyRoles(apiKey.id, apiKey.roles);
         return apiKey;
diff --git a/web/components/ApiKey/ApiKeyManager.vue b/web/components/ApiKey/ApiKeyManager.vue
index 8396f6586e..9aeb32976c 100644
--- a/web/components/ApiKey/ApiKeyManager.vue
+++ b/web/components/ApiKey/ApiKeyManager.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
+import { storeToRefs } from 'pinia';
 import { useMutation, useQuery } from '@vue/apollo-composable';
 import { useClipboard } from '@vueuse/core';
 
@@ -197,6 +198,9 @@ async function copyKeyValue(keyValue: string) {
           </li>
         </CardWrapper>
       </ul>
+      <ul v-else class="flex flex-col gap-4 mb-6">
+        <li class="text-sm">No API keys found</li>
+      </ul>
     </div>
   </PageContainer>
 </template>

From eb3c3115094c22614b1262edb9886a05568691bd Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 17 Jun 2025 15:47:57 -0400
Subject: [PATCH 18/21] chore: update tests

---
 api/dev/Unraid.net/myservers.cfg              |   2 +-
 .../unraid-api/auth/api-key.service.spec.ts   | 143 +++++++++++++++++-
 .../downloaded/.login.php.last-download-time  |   2 +-
 .../DefaultPageLayout.php.last-download-time  |   2 +-
 .../Notifications.page.last-download-time     |   2 +-
 .../auth-request.php.last-download-time       |   2 +-
 6 files changed, 141 insertions(+), 12 deletions(-)

diff --git a/api/dev/Unraid.net/myservers.cfg b/api/dev/Unraid.net/myservers.cfg
index 1f8d0bb030..1c664dad22 100644
--- a/api/dev/Unraid.net/myservers.cfg
+++ b/api/dev/Unraid.net/myservers.cfg
@@ -1,5 +1,5 @@
 [api]
-version="4.8.0"
+version="4.4.1"
 extraOrigins="https://google.com,https://test.com"
 [local]
 sandbox="yes"
diff --git a/api/src/unraid-api/auth/api-key.service.spec.ts b/api/src/unraid-api/auth/api-key.service.spec.ts
index 0b926d333f..46dae35c32 100644
--- a/api/src/unraid-api/auth/api-key.service.spec.ts
+++ b/api/src/unraid-api/auth/api-key.service.spec.ts
@@ -476,17 +476,148 @@ describe('ApiKeyService', () => {
         });
     });
 
+    describe('update', () => {
+        let updateMockApiKey: ApiKeyWithSecret;
+
+        beforeEach(() => {
+            // Create a fresh copy of the mock data for update tests
+            updateMockApiKey = {
+                id: 'test-api-id',
+                key: 'test-api-key',
+                name: 'Test API Key',
+                description: 'Test API Key Description',
+                roles: [Role.GUEST],
+                permissions: [
+                    {
+                        resource: Resource.CONNECT,
+                        actions: [AuthActionVerb.READ],
+                    },
+                ],
+                createdAt: new Date().toISOString(),
+            };
+
+            vi.spyOn(apiKeyService, 'loadAllFromDisk').mockResolvedValue([updateMockApiKey]);
+            vi.spyOn(apiKeyService, 'saveApiKey').mockResolvedValue();
+            apiKeyService.onModuleInit();
+        });
+
+        it('should update name and description', async () => {
+            const updatedName = 'Updated API Key';
+            const updatedDescription = 'Updated Description';
+
+            const result = await apiKeyService.update({
+                id: updateMockApiKey.id,
+                name: updatedName,
+                description: updatedDescription,
+            });
+
+            expect(result.name).toBe(updatedName);
+            expect(result.description).toBe(updatedDescription);
+            expect(result.roles).toEqual(updateMockApiKey.roles);
+            expect(result.permissions).toEqual(updateMockApiKey.permissions);
+            expect(apiKeyService.saveApiKey).toHaveBeenCalledWith(result);
+        });
+
+        it('should update roles', async () => {
+            const updatedRoles = [Role.ADMIN];
+
+            const result = await apiKeyService.update({
+                id: updateMockApiKey.id,
+                roles: updatedRoles,
+            });
+
+            expect(result.roles).toEqual(updatedRoles);
+            expect(result.name).toBe(updateMockApiKey.name);
+            expect(result.description).toBe(updateMockApiKey.description);
+            expect(result.permissions).toEqual(updateMockApiKey.permissions);
+            expect(apiKeyService.saveApiKey).toHaveBeenCalledWith(result);
+        });
+
+        it('should update permissions', async () => {
+            const updatedPermissions = [
+                {
+                    resource: Resource.CONNECT,
+                    actions: [AuthActionVerb.READ, AuthActionVerb.UPDATE],
+                },
+            ];
+
+            const result = await apiKeyService.update({
+                id: updateMockApiKey.id,
+                permissions: updatedPermissions,
+            });
+
+            expect(result.permissions).toEqual(updatedPermissions);
+            expect(result.name).toBe(updateMockApiKey.name);
+            expect(result.description).toBe(updateMockApiKey.description);
+            expect(result.roles).toEqual(updateMockApiKey.roles);
+            expect(apiKeyService.saveApiKey).toHaveBeenCalledWith(result);
+        });
+
+        it('should throw error when API key not found', async () => {
+            await expect(
+                apiKeyService.update({
+                    id: 'non-existent-id',
+                    name: 'New Name',
+                })
+            ).rejects.toThrow('API key not found');
+        });
+
+        it('should throw error when invalid role is provided', async () => {
+            await expect(
+                apiKeyService.update({
+                    id: updateMockApiKey.id,
+                    roles: ['INVALID_ROLE' as Role],
+                })
+            ).rejects.toThrow('Invalid role specified');
+        });
+
+        it('should throw error when invalid name is provided', async () => {
+            await expect(
+                apiKeyService.update({
+                    id: updateMockApiKey.id,
+                    name: 'Invalid@Name',
+                })
+            ).rejects.toThrow(
+                'API key name must contain only letters, numbers, and spaces (Unicode letters are supported)'
+            );
+        });
+    });
+
     describe('loadAllFromDisk', () => {
+        let loadMockApiKey: ApiKeyWithSecret;
+
+        beforeEach(() => {
+            // Create a fresh copy of the mock data for loadAllFromDisk tests
+            loadMockApiKey = {
+                id: 'test-api-id',
+                key: 'test-api-key',
+                name: 'Test API Key',
+                description: 'Test API Key Description',
+                roles: [Role.GUEST],
+                permissions: [
+                    {
+                        resource: Resource.CONNECT,
+                        actions: [AuthActionVerb.READ],
+                    },
+                ],
+                createdAt: new Date().toISOString(),
+            };
+        });
+
         it('should load and parse all JSON files', async () => {
             const mockFiles = ['key1.json', 'key2.json', 'notakey.txt'];
+            const secondKey = { ...loadMockApiKey, id: 'second-id', key: 'second-key' };
 
             vi.mocked(readdir).mockResolvedValue(mockFiles as any);
-            vi.mocked(readFile).mockResolvedValue(JSON.stringify(mockApiKeyWithSecret));
+            vi.mocked(readFile)
+                .mockResolvedValueOnce(JSON.stringify(loadMockApiKey))
+                .mockResolvedValueOnce(JSON.stringify(secondKey));
 
             const result = await apiKeyService.loadAllFromDisk();
 
             expect(result).toHaveLength(2);
-            expect(result[0]).toEqual(mockApiKeyWithSecret);
+            expect(result[0]).toEqual(loadMockApiKey);
+            expect(result[1]).toEqual(secondKey);
             expect(readFile).toHaveBeenCalledTimes(2);
         });
 
@@ -508,14 +639,12 @@ describe('ApiKeyService', () => {
                 'notakey.txt',
             ] as any);
             vi.mocked(readFile)
-                .mockResolvedValueOnce(JSON.stringify(mockApiKeyWithSecret))
+                .mockResolvedValueOnce(JSON.stringify(loadMockApiKey))
                 .mockResolvedValueOnce(JSON.stringify({ invalid: 'structure' }))
                 .mockResolvedValueOnce(
-                    JSON.stringify({ ...mockApiKeyWithSecret, id: 'unique-id', key: 'unique-key' })
-                )
-                .mockResolvedValueOnce(
-                    JSON.stringify({ ...mockApiKeyWithSecret, id: 'unique-id', key: 'unique-key' })
+                    JSON.stringify({ ...loadMockApiKey, id: 'unique-id', key: 'unique-key' })
                 );
+
             const result = await apiKeyService.loadAllFromDisk();
             expect(result).toHaveLength(2);
             expect(result[0]).toEqual({
diff --git a/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/.login.php.last-download-time b/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/.login.php.last-download-time
index e65dcae716..cb0b28029c 100644
--- a/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/.login.php.last-download-time
+++ b/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/.login.php.last-download-time
@@ -1 +1 @@
-1749572423916
\ No newline at end of file
+1750189490614
\ No newline at end of file
diff --git a/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/DefaultPageLayout.php.last-download-time b/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/DefaultPageLayout.php.last-download-time
index a66d748e92..ec69dd1a88 100644
--- a/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/DefaultPageLayout.php.last-download-time
+++ b/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/DefaultPageLayout.php.last-download-time
@@ -1 +1 @@
-1749572423555
\ No newline at end of file
+1750189490326
\ No newline at end of file
diff --git a/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/Notifications.page.last-download-time b/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/Notifications.page.last-download-time
index a82d2b3bec..492cfcd890 100644
--- a/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/Notifications.page.last-download-time
+++ b/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/Notifications.page.last-download-time
@@ -1 +1 @@
-1749572423759
\ No newline at end of file
+1750189490462
\ No newline at end of file
diff --git a/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/auth-request.php.last-download-time b/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/auth-request.php.last-download-time
index 52aa0e34d3..90ca73236c 100644
--- a/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/auth-request.php.last-download-time
+++ b/api/src/unraid-api/unraid-file-modifier/modifications/__test__/__fixtures__/downloaded/auth-request.php.last-download-time
@@ -1 +1 @@
-1749572424097
\ No newline at end of file
+1750189490730
\ No newline at end of file

From 780f3e01ec4374b21b0fa8577014731d16f8b1e4 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Wed, 18 Jun 2025 09:15:03 -0400
Subject: [PATCH 19/21] feat: consistent type imports

---
 unraid-ui/eslint.config.ts                          | 13 ++++++++++---
 .../src/components/common/badge/badge.variants.ts   |  3 ++-
 .../src/components/common/button/button.variants.ts |  3 ++-
 unraid-ui/src/components/common/dialog/Dialog.vue   |  3 ++-
 .../src/components/common/sheet/sheet.variants.ts   |  3 ++-
 unraid-ui/src/types/badge.ts                        |  2 +-
 6 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/unraid-ui/eslint.config.ts b/unraid-ui/eslint.config.ts
index bbf873f2e0..f03e330c70 100644
--- a/unraid-ui/eslint.config.ts
+++ b/unraid-ui/eslint.config.ts
@@ -1,13 +1,16 @@
 import eslint from '@eslint/js';
-// @ts-ignore-error No Declaration For This Plugin
+// @ts-expect-error No Declaration For This Plugin
 import importPlugin from 'eslint-plugin-import';
 import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
 import prettier from 'eslint-plugin-prettier';
 import vuePlugin from 'eslint-plugin-vue';
 import tseslint from 'typescript-eslint';
+// Import vue-eslint-parser as an ESM import
+import vueEslintParser from 'vue-eslint-parser';
 
 // Common rules shared across file types
 const commonRules = {
+  '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
   '@typescript-eslint/no-unused-vars': ['off'],
   'no-multiple-empty-lines': ['error', { max: 1, maxBOF: 0, maxEOF: 1 }],
   'no-relative-import-paths/no-relative-import-paths': [
@@ -120,7 +123,7 @@ export default [
   {
     files: ['**/*.vue'],
     languageOptions: {
-      parser: require('vue-eslint-parser'),
+      parser: vueEslintParser,
       parserOptions: {
         ...commonLanguageOptions,
         parser: tseslint.parser,
@@ -146,6 +149,10 @@ export default [
   
   // Ignores
   {
-    ignores: ['src/graphql/generated/client/**/*'],
+    ignores: [
+      'src/graphql/generated/client/**/*',
+      'src/global.d.ts',
+      'eslint.config.ts',
+    ],
   },
 ];
diff --git a/unraid-ui/src/components/common/badge/badge.variants.ts b/unraid-ui/src/components/common/badge/badge.variants.ts
index 57be2fbfb1..99d4779841 100644
--- a/unraid-ui/src/components/common/badge/badge.variants.ts
+++ b/unraid-ui/src/components/common/badge/badge.variants.ts
@@ -1,4 +1,5 @@
-import { cva, VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 
 export const badgeVariants = cva(
   'inline-flex items-center rounded-full font-semibold leading-none transition-all duration-200 ease-in-out unraid-ui-badge-test',
diff --git a/unraid-ui/src/components/common/button/button.variants.ts b/unraid-ui/src/components/common/button/button.variants.ts
index ff78ccab48..bd70ccb6ba 100644
--- a/unraid-ui/src/components/common/button/button.variants.ts
+++ b/unraid-ui/src/components/common/button/button.variants.ts
@@ -1,4 +1,5 @@
-import { cva, VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 
 export const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-base font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
diff --git a/unraid-ui/src/components/common/dialog/Dialog.vue b/unraid-ui/src/components/common/dialog/Dialog.vue
index 0bab92b4a6..8735d7977f 100644
--- a/unraid-ui/src/components/common/dialog/Dialog.vue
+++ b/unraid-ui/src/components/common/dialog/Dialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'reka-ui';
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();
diff --git a/unraid-ui/src/components/common/sheet/sheet.variants.ts b/unraid-ui/src/components/common/sheet/sheet.variants.ts
index 24465ec84b..7dd3ce9ca7 100644
--- a/unraid-ui/src/components/common/sheet/sheet.variants.ts
+++ b/unraid-ui/src/components/common/sheet/sheet.variants.ts
@@ -1,4 +1,5 @@
-import { cva, VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 
 export const sheetVariants = cva(
   'fixed z-50 bg-background gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
diff --git a/unraid-ui/src/types/badge.ts b/unraid-ui/src/types/badge.ts
index bbf915d4b2..970cec0c0b 100644
--- a/unraid-ui/src/types/badge.ts
+++ b/unraid-ui/src/types/badge.ts
@@ -1,4 +1,4 @@
-import { badgeVariants } from '@/components/common/badge/badge.variants';
+import type { badgeVariants } from '@/components/common/badge/badge.variants';
 import type { VariantProps } from 'class-variance-authority';
 import type { Component } from 'vue';
 

From 6b8d62684c5f6e9b11adb005496fa4d749320a30 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Wed, 18 Jun 2025 09:34:15 -0400
Subject: [PATCH 20/21] feat: add an eslint rule to make type imports
 consistent

---
 api/dev/configs/api.json                      |    2 +-
 api/dev/configs/connect.json                  |   16 -
 api/dev/states/myservers.cfg                  |    2 +-
 api/generated-schema-new.graphql              | 1563 -----------------
 api/generated-schema.graphql                  |  232 +++
 api/src/unraid-api/graph/graph.module.ts      |    2 +
 api/src/unraid-api/graph/validate-schema.ts   |   59 -
 generated-schema-new.graphql                  | 1528 ----------------
 .../src/resolver/connect.resolver.ts          |    1 +
 .../ConnectSettings/AllowedOrigins.vue        |   51 -
 .../ConnectSettings/RemoteAccess.vue          |   60 -
 web/composables/gql/gql.ts                    |   24 -
 web/composables/gql/graphql.ts                |  114 +-
 web/store/unraidApiSettings.fragment.ts       |   29 -
 14 files changed, 291 insertions(+), 3392 deletions(-)
 delete mode 100644 api/generated-schema-new.graphql
 delete mode 100644 api/src/unraid-api/graph/validate-schema.ts
 delete mode 100644 generated-schema-new.graphql
 delete mode 100644 web/components/ConnectSettings/AllowedOrigins.vue
 delete mode 100644 web/components/ConnectSettings/RemoteAccess.vue
 delete mode 100644 web/store/unraidApiSettings.fragment.ts

diff --git a/api/dev/configs/api.json b/api/dev/configs/api.json
index 11b6dcf642..6664e3ecbf 100644
--- a/api/dev/configs/api.json
+++ b/api/dev/configs/api.json
@@ -6,5 +6,5 @@
   ],
   "sandbox": true,
   "ssoSubIds": [],
-  "plugins": []
+  "plugins": ["unraid-api-plugin-connect"]
 }
\ No newline at end of file
diff --git a/api/dev/configs/connect.json b/api/dev/configs/connect.json
index 67dcd19a81..e69de29bb2 100644
--- a/api/dev/configs/connect.json
+++ b/api/dev/configs/connect.json
@@ -1,16 +0,0 @@
-{
-  "wanaccess": false,
-  "wanport": 0,
-  "upnpEnabled": false,
-  "apikey": "",
-  "localApiKey": "",
-  "email": "",
-  "username": "",
-  "avatar": "",
-  "regWizTime": "",
-  "accesstoken": "",
-  "idtoken": "",
-  "refreshtoken": "",
-  "dynamicRemoteAccessType": "DISABLED",
-  "ssoSubIds": []
-}
diff --git a/api/dev/states/myservers.cfg b/api/dev/states/myservers.cfg
index 5324fcaa8a..c8a8701d15 100644
--- a/api/dev/states/myservers.cfg
+++ b/api/dev/states/myservers.cfg
@@ -1,5 +1,5 @@
 [api]
-version="4.8.0"
+version="4.4.1"
 extraOrigins="https://google.com,https://test.com"
 [local]
 sandbox="yes"
diff --git a/api/generated-schema-new.graphql b/api/generated-schema-new.graphql
deleted file mode 100644
index 8daa7f161b..0000000000
--- a/api/generated-schema-new.graphql
+++ /dev/null
@@ -1,1563 +0,0 @@
-# ------------------------------------------------------
-# THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
-# ------------------------------------------------------
-
-type ApiKeyResponse {
-  valid: Boolean!
-  error: String
-}
-
-type MinigraphqlResponse {
-  status: MinigraphStatus!
-  timeout: Int
-  error: String
-}
-
-enum MinigraphStatus {
-  PRE_INIT
-  CONNECTING
-  CONNECTED
-  PING_FAILURE
-  ERROR_RETRYING
-}
-
-type CloudResponse {
-  status: String!
-  ip: String
-  error: String
-}
-
-type RelayResponse {
-  status: String!
-  timeout: String
-  error: String
-}
-
-type Cloud {
-  error: String
-  apiKey: ApiKeyResponse!
-  relay: RelayResponse
-  minigraphql: MinigraphqlResponse!
-  cloud: CloudResponse!
-  allowedOrigins: [String!]!
-}
-
-type Capacity {
-  """Free capacity"""
-  free: String!
-
-  """Used capacity"""
-  used: String!
-
-  """Total capacity"""
-  total: String!
-}
-
-type ArrayCapacity {
-  """Capacity in kilobytes"""
-  kilobytes: Capacity!
-
-  """Capacity in number of disks"""
-  disks: Capacity!
-}
-
-type ArrayDisk implements Node {
-  """Disk identifier, only set for present disks on the system"""
-  id: ID!
-
-  """
-  Array slot number. Parity1 is always 0 and Parity2 is always 29. Array slots will be 1 - 28. Cache slots are 30 - 53. Flash is 54.
-  """
-  idx: Int!
-  name: String
-  device: String
-
-  """(KB) Disk Size total"""
-  size: Long
-  status: ArrayDiskStatus
-
-  """Is the disk a HDD or SSD."""
-  rotational: Boolean
-
-  """Disk temp - will be NaN if array is not started or DISK_NP"""
-  temp: Int
-
-  """
-  Count of I/O read requests sent to the device I/O drivers. These statistics may be cleared at any time.
-  """
-  numReads: Long
-
-  """
-  Count of I/O writes requests sent to the device I/O drivers. These statistics may be cleared at any time.
-  """
-  numWrites: Long
-
-  """
-  Number of unrecoverable errors reported by the device I/O drivers. Missing data due to unrecoverable array read errors is filled in on-the-fly using parity reconstruct (and we attempt to write this data back to the sector(s) which failed). Any unrecoverable write error results in disabling the disk.
-  """
-  numErrors: Long
-
-  """(KB) Total Size of the FS (Not present on Parity type drive)"""
-  fsSize: Long
-
-  """(KB) Free Size on the FS (Not present on Parity type drive)"""
-  fsFree: Long
-
-  """(KB) Used Size on the FS (Not present on Parity type drive)"""
-  fsUsed: Long
-  exportable: Boolean
-
-  """Type of Disk - used to differentiate Cache / Flash / Array / Parity"""
-  type: ArrayDiskType!
-
-  """(%) Disk space left to warn"""
-  warning: Int
-
-  """(%) Disk space left for critical"""
-  critical: Int
-
-  """File system type for the disk"""
-  fsType: String
-
-  """User comment on disk"""
-  comment: String
-
-  """File format (ex MBR: 4KiB-aligned)"""
-  format: String
-
-  """ata | nvme | usb | (others)"""
-  transport: String
-  color: ArrayDiskFsColor
-}
-
-interface Node {
-  id: ID!
-}
-
-"""The `Long` scalar type represents 52-bit integers"""
-scalar Long
-
-enum ArrayDiskStatus {
-  DISK_NP
-  DISK_OK
-  DISK_NP_MISSING
-  DISK_INVALID
-  DISK_WRONG
-  DISK_DSBL
-  DISK_NP_DSBL
-  DISK_DSBL_NEW
-  DISK_NEW
-}
-
-enum ArrayDiskType {
-  DATA
-  PARITY
-  FLASH
-  CACHE
-}
-
-enum ArrayDiskFsColor {
-  GREEN_ON
-  GREEN_BLINK
-  BLUE_ON
-  BLUE_BLINK
-  YELLOW_ON
-  YELLOW_BLINK
-  RED_ON
-  RED_OFF
-  GREY_OFF
-}
-
-type UnraidArray implements Node {
-  id: ID!
-
-  """Array state before this query/mutation"""
-  previousState: ArrayState
-
-  """Array state after this query/mutation"""
-  pendingState: ArrayPendingState
-
-  """Current array state"""
-  state: ArrayState!
-
-  """Current array capacity"""
-  capacity: ArrayCapacity!
-
-  """Current boot disk"""
-  boot: ArrayDisk
-
-  """Parity disks in the current array"""
-  parities: [ArrayDisk!]!
-
-  """Data disks in the current array"""
-  disks: [ArrayDisk!]!
-
-  """Caches in the current array"""
-  caches: [ArrayDisk!]!
-}
-
-enum ArrayState {
-  STARTED
-  STOPPED
-  NEW_ARRAY
-  RECON_DISK
-  DISABLE_DISK
-  SWAP_DSBL
-  INVALID_EXPANSION
-  PARITY_NOT_BIGGEST
-  TOO_MANY_MISSING_DISKS
-  NEW_DISK_TOO_SMALL
-  NO_DATA_DISKS
-}
-
-enum ArrayPendingState {
-  STARTING
-  STOPPING
-  NO_DATA_DISKS
-  TOO_MANY_MISSING_DISKS
-}
-
-type Share implements Node {
-  id: ID!
-
-  """Display name"""
-  name: String
-
-  """(KB) Free space"""
-  free: Long
-
-  """(KB) Used Size"""
-  used: Long
-
-  """(KB) Total size"""
-  size: Long
-
-  """Disks that are included in this share"""
-  include: [String!]
-
-  """Disks that are excluded from this share"""
-  exclude: [String!]
-
-  """Is this share cached"""
-  cache: Boolean
-
-  """Original name"""
-  nameOrig: String
-
-  """User comment"""
-  comment: String
-
-  """Allocator"""
-  allocator: String
-
-  """Split level"""
-  splitLevel: String
-
-  """Floor"""
-  floor: String
-
-  """COW"""
-  cow: String
-
-  """Color"""
-  color: String
-
-  """LUKS status"""
-  luksStatus: String
-}
-
-type RemoteAccess {
-  """The type of WAN access used for Remote Access"""
-  accessType: WAN_ACCESS_TYPE!
-
-  """The type of port forwarding used for Remote Access"""
-  forwardType: WAN_FORWARD_TYPE
-
-  """The port used for Remote Access"""
-  port: Int
-}
-
-enum WAN_ACCESS_TYPE {
-  DYNAMIC
-  ALWAYS
-  DISABLED
-}
-
-enum WAN_FORWARD_TYPE {
-  UPNP
-  STATIC
-}
-
-type DynamicRemoteAccessStatus {
-  """The type of dynamic remote access that is enabled"""
-  enabledType: DynamicRemoteAccessType!
-
-  """The type of dynamic remote access that is currently running"""
-  runningType: DynamicRemoteAccessType!
-
-  """Any error message associated with the dynamic remote access"""
-  error: String
-}
-
-enum DynamicRemoteAccessType {
-  STATIC
-  UPNP
-  DISABLED
-}
-
-type ConnectSettingsValues {
-  """
-  If true, the GraphQL sandbox is enabled and available at /graphql. If false, the GraphQL sandbox is disabled and only the production API will be available.
-  """
-  sandbox: Boolean!
-
-  """A list of origins allowed to interact with the API"""
-  extraOrigins: [String!]!
-
-  """The type of WAN access used for Remote Access"""
-  accessType: WAN_ACCESS_TYPE!
-
-  """The type of port forwarding used for Remote Access"""
-  forwardType: WAN_FORWARD_TYPE
-
-  """The port used for Remote Access"""
-  port: Int
-
-  """A list of Unique Unraid Account ID's"""
-  ssoUserIds: [String!]!
-}
-
-type ConnectSettings implements Node {
-  """The unique identifier for the Connect settings"""
-  id: ID!
-
-  """The data schema for the Connect settings"""
-  dataSchema: JSON!
-
-  """The UI schema for the Connect settings"""
-  uiSchema: JSON!
-
-  """The values for the Connect settings"""
-  values: ConnectSettingsValues!
-}
-
-"""
-The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
-"""
-scalar JSON @specifiedBy(url: "http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf")
-
-type Connect implements Node {
-  """The unique identifier for the Connect instance"""
-  id: ID!
-
-  """The status of dynamic remote access"""
-  dynamicRemoteAccess: DynamicRemoteAccessStatus!
-
-  """The settings for the Connect instance"""
-  settings: ConnectSettings!
-}
-
-type AccessUrl {
-  type: URL_TYPE!
-  name: String
-  ipv4: URL
-  ipv6: URL
-}
-
-enum URL_TYPE {
-  LAN
-  WIREGUARD
-  WAN
-  MDNS
-  OTHER
-  DEFAULT
-}
-
-"""
-A field whose value conforms to the standard URL format as specified in RFC3986: https://www.ietf.org/rfc/rfc3986.txt.
-"""
-scalar URL
-
-type Network implements Node {
-  id: ID!
-  accessUrls: [AccessUrl!]
-}
-
-type ProfileModel {
-  userId: ID
-  username: String!
-  url: String!
-  avatar: String!
-}
-
-type Server {
-  owner: ProfileModel!
-  guid: String!
-  apikey: String!
-  name: String!
-  status: ServerStatus!
-  wanip: String!
-  lanip: String!
-  localurl: String!
-  remoteurl: String!
-}
-
-enum ServerStatus {
-  ONLINE
-  OFFLINE
-  NEVER_CONNECTED
-}
-
-type DiskPartition {
-  """The name of the partition"""
-  name: String!
-
-  """The filesystem type of the partition"""
-  fsType: DiskFsType!
-
-  """The size of the partition in bytes"""
-  size: Float!
-}
-
-"""The type of filesystem on the disk partition"""
-enum DiskFsType {
-  XFS
-  BTRFS
-  VFAT
-  ZFS
-  EXT4
-  NTFS
-}
-
-type Disk {
-  """The unique identifier of the disk"""
-  id: String!
-
-  """The device path of the disk (e.g. /dev/sdb)"""
-  device: String!
-
-  """The type of disk (e.g. SSD, HDD)"""
-  type: String!
-
-  """The model name of the disk"""
-  name: String!
-
-  """The manufacturer of the disk"""
-  vendor: String!
-
-  """The total size of the disk in bytes"""
-  size: Float!
-
-  """The number of bytes per sector"""
-  bytesPerSector: Float!
-
-  """The total number of cylinders on the disk"""
-  totalCylinders: Float!
-
-  """The total number of heads on the disk"""
-  totalHeads: Float!
-
-  """The total number of sectors on the disk"""
-  totalSectors: Float!
-
-  """The total number of tracks on the disk"""
-  totalTracks: Float!
-
-  """The number of tracks per cylinder"""
-  tracksPerCylinder: Float!
-
-  """The number of sectors per track"""
-  sectorsPerTrack: Float!
-
-  """The firmware revision of the disk"""
-  firmwareRevision: String!
-
-  """The serial number of the disk"""
-  serialNum: String!
-
-  """The interface type of the disk"""
-  interfaceType: DiskInterfaceType!
-
-  """The SMART status of the disk"""
-  smartStatus: DiskSmartStatus!
-
-  """The current temperature of the disk in Celsius"""
-  temperature: Float
-
-  """The partitions on the disk"""
-  partitions: [DiskPartition!]!
-}
-
-"""The type of interface the disk uses to connect to the system"""
-enum DiskInterfaceType {
-  SAS
-  SATA
-  USB
-  PCIE
-  UNKNOWN
-}
-
-"""
-The SMART (Self-Monitoring, Analysis and Reporting Technology) status of the disk
-"""
-enum DiskSmartStatus {
-  OK
-  UNKNOWN
-}
-
-type KeyFile {
-  location: String
-  contents: String
-}
-
-type Registration {
-  guid: ID
-  type: registrationType
-  keyFile: KeyFile
-  state: RegistrationState
-  expiration: String
-  updateExpiration: String
-}
-
-enum registrationType {
-  BASIC
-  PLUS
-  PRO
-  STARTER
-  UNLEASHED
-  LIFETIME
-  INVALID
-  TRIAL
-}
-
-enum RegistrationState {
-  TRIAL
-  BASIC
-  PLUS
-  PRO
-  STARTER
-  UNLEASHED
-  LIFETIME
-  EEXPIRED
-  EGUID
-  EGUID1
-  ETRIAL
-  ENOKEYFILE
-  ENOKEYFILE1
-  ENOKEYFILE2
-  ENOFLASH
-  ENOFLASH1
-  ENOFLASH2
-  ENOFLASH3
-  ENOFLASH4
-  ENOFLASH5
-  ENOFLASH6
-  ENOFLASH7
-  EBLACKLISTED
-  EBLACKLISTED1
-  EBLACKLISTED2
-  ENOCONN
-}
-
-type Vars implements Node {
-  id: ID!
-
-  """Unraid version"""
-  version: String
-  maxArraysz: Int
-  maxCachesz: Int
-
-  """Machine hostname"""
-  name: String
-  timeZone: String
-  comment: String
-  security: String
-  workgroup: String
-  domain: String
-  domainShort: String
-  hideDotFiles: Boolean
-  localMaster: Boolean
-  enableFruit: String
-
-  """Should a NTP server be used for time sync?"""
-  useNtp: Boolean
-
-  """NTP Server 1"""
-  ntpServer1: String
-
-  """NTP Server 2"""
-  ntpServer2: String
-
-  """NTP Server 3"""
-  ntpServer3: String
-
-  """NTP Server 4"""
-  ntpServer4: String
-  domainLogin: String
-  sysModel: String
-  sysArraySlots: Int
-  sysCacheSlots: Int
-  sysFlashSlots: Int
-  useSsl: Boolean
-
-  """Port for the webui via HTTP"""
-  port: Int
-
-  """Port for the webui via HTTPS"""
-  portssl: Int
-  localTld: String
-  bindMgt: Boolean
-
-  """Should telnet be enabled?"""
-  useTelnet: Boolean
-  porttelnet: Int
-  useSsh: Boolean
-  portssh: Int
-  startPage: String
-  startArray: Boolean
-  spindownDelay: String
-  queueDepth: String
-  spinupGroups: Boolean
-  defaultFormat: String
-  defaultFsType: String
-  shutdownTimeout: Int
-  luksKeyfile: String
-  pollAttributes: String
-  pollAttributesDefault: String
-  pollAttributesStatus: String
-  nrRequests: Int
-  nrRequestsDefault: Int
-  nrRequestsStatus: String
-  mdNumStripes: Int
-  mdNumStripesDefault: Int
-  mdNumStripesStatus: String
-  mdSyncWindow: Int
-  mdSyncWindowDefault: Int
-  mdSyncWindowStatus: String
-  mdSyncThresh: Int
-  mdSyncThreshDefault: Int
-  mdSyncThreshStatus: String
-  mdWriteMethod: Int
-  mdWriteMethodDefault: String
-  mdWriteMethodStatus: String
-  shareDisk: String
-  shareUser: String
-  shareUserInclude: String
-  shareUserExclude: String
-  shareSmbEnabled: Boolean
-  shareNfsEnabled: Boolean
-  shareAfpEnabled: Boolean
-  shareInitialOwner: String
-  shareInitialGroup: String
-  shareCacheEnabled: Boolean
-  shareCacheFloor: String
-  shareMoverSchedule: String
-  shareMoverLogging: Boolean
-  fuseRemember: String
-  fuseRememberDefault: String
-  fuseRememberStatus: String
-  fuseDirectio: String
-  fuseDirectioDefault: String
-  fuseDirectioStatus: String
-  shareAvahiEnabled: Boolean
-  shareAvahiSmbName: String
-  shareAvahiSmbModel: String
-  shareAvahiAfpName: String
-  shareAvahiAfpModel: String
-  safeMode: Boolean
-  startMode: String
-  configValid: Boolean
-  configError: ConfigErrorState
-  joinStatus: String
-  deviceCount: Int
-  flashGuid: String
-  flashProduct: String
-  flashVendor: String
-  regCheck: String
-  regFile: String
-  regGuid: String
-  regTy: registrationType
-  regState: RegistrationState
-
-  """Registration owner"""
-  regTo: String
-  regTm: String
-  regTm2: String
-  regGen: String
-  sbName: String
-  sbVersion: String
-  sbUpdated: String
-  sbEvents: Int
-  sbState: String
-  sbClean: Boolean
-  sbSynced: Int
-  sbSyncErrs: Int
-  sbSynced2: Int
-  sbSyncExit: String
-  sbNumDisks: Int
-  mdColor: String
-  mdNumDisks: Int
-  mdNumDisabled: Int
-  mdNumInvalid: Int
-  mdNumMissing: Int
-  mdNumNew: Int
-  mdNumErased: Int
-  mdResync: Int
-  mdResyncCorr: String
-  mdResyncPos: String
-  mdResyncDb: String
-  mdResyncDt: String
-  mdResyncAction: String
-  mdResyncSize: Int
-  mdState: String
-  mdVersion: String
-  cacheNumDevices: Int
-  cacheSbNumDisks: Int
-  fsState: String
-
-  """Human friendly string of array events happening"""
-  fsProgress: String
-
-  """
-  Percentage from 0 - 100 while upgrading a disk or swapping parity drives
-  """
-  fsCopyPrcnt: Int
-  fsNumMounted: Int
-  fsNumUnmountable: Int
-  fsUnmountableMask: String
-
-  """Total amount of user shares"""
-  shareCount: Int
-
-  """Total amount shares with SMB enabled"""
-  shareSmbCount: Int
-
-  """Total amount shares with NFS enabled"""
-  shareNfsCount: Int
-
-  """Total amount shares with AFP enabled"""
-  shareAfpCount: Int
-  shareMoverActive: Boolean
-  csrfToken: String
-}
-
-"""Possible error states for configuration"""
-enum ConfigErrorState {
-  UNKNOWN_ERROR
-  INELIGIBLE
-  INVALID
-  NO_KEY_SERVER
-  WITHDRAWN
-}
-
-type Permission {
-  resource: Resource!
-  actions: [String!]!
-}
-
-"""Available resources for permissions"""
-enum Resource {
-  API_KEY
-  ARRAY
-  CLOUD
-  CONFIG
-  CONNECT
-  CONNECT__REMOTE_ACCESS
-  CUSTOMIZATIONS
-  DASHBOARD
-  DISK
-  DISPLAY
-  DOCKER
-  FLASH
-  INFO
-  LOGS
-  ME
-  NETWORK
-  NOTIFICATIONS
-  ONLINE
-  OS
-  OWNER
-  PERMISSION
-  REGISTRATION
-  SERVERS
-  SERVICES
-  SHARE
-  VARS
-  VMS
-  WELCOME
-}
-
-type ApiKey {
-  id: ID!
-  name: String!
-  description: String
-  roles: [Role!]!
-  createdAt: String!
-  permissions: [Permission!]!
-}
-
-"""Available roles for API keys and users"""
-enum Role {
-  ADMIN
-  CONNECT
-  GUEST
-}
-
-type ApiKeyWithSecret {
-  id: ID!
-  name: String!
-  description: String
-  roles: [Role!]!
-  createdAt: String!
-  permissions: [Permission!]!
-  key: String!
-}
-
-type ArrayMutations {
-  """Set array state"""
-  setState(input: ArrayStateInput!): UnraidArray!
-
-  """Add new disk to array"""
-  addDiskToArray(input: ArrayDiskInput!): UnraidArray!
-
-  """
-  Remove existing disk from array. NOTE: The array must be stopped before running this otherwise it'll throw an error.
-  """
-  removeDiskFromArray(input: ArrayDiskInput!): UnraidArray!
-
-  """Mount a disk in the array"""
-  mountArrayDisk(id: String!): ArrayDisk!
-
-  """Unmount a disk from the array"""
-  unmountArrayDisk(id: String!): ArrayDisk!
-
-  """Clear statistics for a disk in the array"""
-  clearArrayDiskStatistics(id: String!): Boolean!
-}
-
-input ArrayStateInput {
-  """Array state"""
-  desiredState: ArrayStateInputState!
-}
-
-enum ArrayStateInputState {
-  START
-  STOP
-}
-
-input ArrayDiskInput {
-  """Disk ID"""
-  id: ID!
-
-  """The slot for the disk"""
-  slot: Int
-}
-
-type DockerMutations {
-  """Start a container"""
-  start(id: String!): DockerContainer!
-
-  """Stop a container"""
-  stop(id: String!): DockerContainer!
-}
-
-type ParityCheck {
-  """Date of the parity check"""
-  date: DateTime
-
-  """Duration of the parity check in seconds"""
-  duration: Int
-
-  """Speed of the parity check, in MB/s"""
-  speed: String
-
-  """Status of the parity check"""
-  status: String
-
-  """Number of errors during the parity check"""
-  errors: Int
-
-  """Progress percentage of the parity check"""
-  progress: Int
-
-  """Whether corrections are being written to parity"""
-  correcting: Boolean
-
-  """Whether the parity check is paused"""
-  paused: Boolean
-
-  """Whether the parity check is running"""
-  running: Boolean
-}
-
-"""
-A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format.
-"""
-scalar DateTime
-
-type Config implements Node {
-  id: ID!
-  valid: Boolean
-  error: String
-}
-
-type InfoApps implements Node {
-  id: ID!
-
-  """How many docker containers are installed"""
-  installed: Int!
-
-  """How many docker containers are running"""
-  started: Int!
-}
-
-type Baseboard implements Node {
-  id: ID!
-  manufacturer: String!
-  model: String
-  version: String
-  serial: String
-  assetTag: String
-}
-
-type InfoCpu implements Node {
-  id: ID!
-  manufacturer: String!
-  brand: String!
-  vendor: String!
-  family: String!
-  model: String!
-  stepping: Int!
-  revision: String!
-  voltage: String
-  speed: Float!
-  speedmin: Float!
-  speedmax: Float!
-  threads: Int!
-  cores: Int!
-  processors: Int!
-  socket: String!
-  cache: JSON!
-  flags: [String!]!
-}
-
-type Gpu implements Node {
-  id: ID!
-  type: String!
-  typeid: String!
-  vendorname: String!
-  productid: String!
-  blacklisted: Boolean!
-  class: String!
-}
-
-type Pci implements Node {
-  id: ID!
-  type: String
-  typeid: String
-  vendorname: String
-  vendorid: String
-  productname: String
-  productid: String
-  blacklisted: String
-  class: String
-}
-
-type Usb {
-  id: ID!
-  name: String
-}
-
-type Devices implements Node {
-  id: ID!
-  gpu: [Gpu!]!
-  pci: [Pci!]!
-  usb: [Usb!]!
-}
-
-type Case implements Node {
-  id: ID!
-  icon: String
-  url: String
-  error: String
-  base64: String
-}
-
-type Display implements Node {
-  id: ID!
-  case: Case
-  date: String
-  number: String
-  scale: Boolean
-  tabs: Boolean
-  users: String
-  resize: Boolean
-  wwn: Boolean
-  total: Boolean
-  usage: Boolean
-  banner: String
-  dashapps: String
-  theme: Theme
-  text: Boolean
-  unit: Temperature
-  warning: Int
-  critical: Int
-  hot: Int
-  max: Int
-  locale: String
-}
-
-"""Display theme"""
-enum Theme {
-  white
-}
-
-"""Temperature unit (Celsius or Fahrenheit)"""
-enum Temperature {
-  C
-  F
-}
-
-type MemoryLayout {
-  size: Int!
-  bank: String
-  type: String
-  clockSpeed: Int
-  formFactor: String
-  manufacturer: String
-  partNum: String
-  serialNum: String
-  voltageConfigured: Int
-  voltageMin: Int
-  voltageMax: Int
-}
-
-type InfoMemory implements Node {
-  id: ID!
-  max: Int!
-  total: Int!
-  free: Int!
-  used: Int!
-  active: Int!
-  available: Int!
-  buffcache: Int!
-  swaptotal: Int!
-  swapused: Int!
-  swapfree: Int!
-  layout: [MemoryLayout!]!
-}
-
-type Os implements Node {
-  id: ID!
-  platform: String
-  distro: String
-  release: String
-  codename: String
-  kernel: String
-  arch: String
-  hostname: String
-  codepage: String
-  logofile: String
-  serial: String
-  build: String
-  uptime: String
-}
-
-type System implements Node {
-  id: ID!
-  manufacturer: String
-  model: String
-  version: String
-  serial: String
-  uuid: String
-  sku: String
-}
-
-type Versions implements Node {
-  id: ID!
-  kernel: String
-  openssl: String
-  systemOpenssl: String
-  systemOpensslLib: String
-  node: String
-  v8: String
-  npm: String
-  yarn: String
-  pm2: String
-  gulp: String
-  grunt: String
-  git: String
-  tsc: String
-  mysql: String
-  redis: String
-  mongodb: String
-  apache: String
-  nginx: String
-  php: String
-  docker: String
-  postfix: String
-  postgresql: String
-  perl: String
-  python: String
-  gcc: String
-  unraid: String
-}
-
-type Info implements Node {
-  id: ID!
-
-  """Count of docker containers"""
-  apps: InfoApps!
-  baseboard: Baseboard!
-  cpu: InfoCpu!
-  devices: Devices!
-  display: Display!
-
-  """Machine ID"""
-  machineId: ID
-  memory: InfoMemory!
-  os: Os!
-  system: System!
-  time: DateTime!
-  versions: Versions!
-}
-
-type ContainerPort {
-  ip: String
-  privatePort: Int!
-  publicPort: Int!
-  type: ContainerPortType!
-}
-
-enum ContainerPortType {
-  TCP
-  UDP
-}
-
-type ContainerHostConfig {
-  networkMode: String!
-}
-
-type DockerContainer {
-  id: ID!
-  names: [String!]!
-  image: String!
-  imageId: String!
-  command: String!
-  created: Int!
-  ports: [ContainerPort!]!
-
-  """Total size of all the files in the container"""
-  sizeRootFs: Int
-  labels: JSONObject
-  state: ContainerState!
-  status: String!
-  hostConfig: ContainerHostConfig
-  networkSettings: JSONObject
-  mounts: [JSONObject!]
-  autoStart: Boolean!
-}
-
-"""
-The `JSONObject` scalar type represents JSON objects as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
-"""
-scalar JSONObject
-
-enum ContainerState {
-  RUNNING
-  EXITED
-}
-
-type DockerNetwork {
-  name: String!
-  id: ID!
-  created: String!
-  scope: String!
-  driver: String!
-  enableIPv6: Boolean!
-  ipam: JSONObject!
-  internal: Boolean!
-  attachable: Boolean!
-  ingress: Boolean!
-  configFrom: JSONObject!
-  configOnly: Boolean!
-  containers: JSONObject!
-  options: JSONObject!
-  labels: JSONObject!
-}
-
-type Docker implements Node {
-  id: ID!
-  containers: [DockerContainer!]!
-  networks: [DockerNetwork!]!
-}
-
-type Flash implements Node {
-  id: ID!
-  guid: String!
-  vendor: String!
-  product: String!
-}
-
-type LogFile {
-  """Name of the log file"""
-  name: String!
-
-  """Full path to the log file"""
-  path: String!
-
-  """Size of the log file in bytes"""
-  size: Int!
-
-  """Last modified timestamp"""
-  modifiedAt: DateTime!
-}
-
-type LogFileContent {
-  """Path to the log file"""
-  path: String!
-
-  """Content of the log file"""
-  content: String!
-
-  """Total number of lines in the file"""
-  totalLines: Int!
-
-  """Starting line number of the content (1-indexed)"""
-  startLine: Int
-}
-
-type NotificationCounts {
-  info: Int!
-  warning: Int!
-  alert: Int!
-  total: Int!
-}
-
-type NotificationOverview {
-  unread: NotificationCounts!
-  archive: NotificationCounts!
-}
-
-type Notification {
-  id: ID!
-
-  """Also known as 'event'"""
-  title: String!
-  subject: String!
-  description: String!
-  importance: NotificationImportance!
-  link: String
-  type: NotificationType!
-
-  """ISO Timestamp for when the notification occurred"""
-  timestamp: String
-  formattedTimestamp: String
-}
-
-enum NotificationImportance {
-  ALERT
-  INFO
-  WARNING
-}
-
-enum NotificationType {
-  UNREAD
-  ARCHIVE
-}
-
-type Notifications {
-  id: ID!
-
-  """A cached overview of the notifications in the system & their severity."""
-  overview: NotificationOverview!
-  list(filter: NotificationFilter!): [Notification!]!
-}
-
-input NotificationFilter {
-  importance: NotificationImportance
-  type: NotificationType!
-  offset: Int!
-  limit: Int!
-}
-
-type Owner {
-  username: String!
-  url: String!
-  avatar: String!
-}
-
-type VmDomain {
-  uuid: ID!
-
-  """A friendly name for the vm"""
-  name: String
-
-  """Current domain vm state"""
-  state: VmState!
-}
-
-"""The state of a virtual machine"""
-enum VmState {
-  NOSTATE
-  RUNNING
-  IDLE
-  PAUSED
-  SHUTDOWN
-  SHUTOFF
-  CRASHED
-  PMSUSPENDED
-}
-
-type Vms {
-  id: ID!
-  domains: [VmDomain!]
-}
-
-type Uptime {
-  timestamp: String
-}
-
-type Service implements Node {
-  id: ID!
-  name: String
-  online: Boolean
-  uptime: Uptime
-  version: String
-}
-
-type UserAccount {
-  """A unique identifier for the user"""
-  id: ID!
-
-  """The name of the user"""
-  name: String!
-
-  """A description of the user"""
-  description: String!
-
-  """The roles of the user"""
-  roles: [Role!]!
-
-  """The permissions of the user"""
-  permissions: [Permission!]
-}
-
-type Query {
-  apiKeys: [ApiKey!]!
-  apiKey(id: String!): ApiKey
-  cloud: Cloud!
-  config: Config!
-  display: Display!
-  flash: Flash!
-  info: Info!
-  logFiles: [LogFile!]!
-  logFile(path: String!, lines: Int, startLine: Int): LogFileContent!
-  me: UserAccount!
-  network: Network!
-
-  """Get all notifications"""
-  notifications: Notifications!
-  online: Boolean!
-  owner: Owner!
-  registration: Registration
-  server: Server
-  servers: [Server!]!
-  services: [Service!]!
-  shares: [Share!]!
-  vars: Vars!
-  vms: Vms!
-  parityHistory: [ParityCheck!]!
-  array: UnraidArray!
-  connect: Connect!
-  remoteAccess: RemoteAccess!
-  extraAllowedOrigins: [String!]!
-  docker: Docker!
-  disks: [Disk!]!
-  disk(id: String!): Disk!
-}
-
-type Mutation {
-  createApiKey(input: CreateApiKeyInput!): ApiKeyWithSecret!
-  addRoleForApiKey(input: AddRoleForApiKeyInput!): Boolean!
-  removeRoleFromApiKey(input: RemoveRoleFromApiKeyInput!): Boolean!
-
-  """Creates a new notification record"""
-  createNotification(input: NotificationData!): Notification!
-  deleteNotification(id: String!, type: NotificationType!): NotificationOverview!
-
-  """Deletes all archived notifications on server."""
-  deleteArchivedNotifications: NotificationOverview!
-
-  """Marks a notification as archived."""
-  archiveNotification(id: String!): Notification!
-  archiveNotifications(ids: [String!]!): NotificationOverview!
-  archiveAll(importance: NotificationImportance): NotificationOverview!
-
-  """Marks a notification as unread."""
-  unreadNotification(id: String!): Notification!
-  unarchiveNotifications(ids: [String!]!): NotificationOverview!
-  unarchiveAll(importance: NotificationImportance): NotificationOverview!
-
-  """Reads each notification to recompute & update the overview."""
-  recalculateOverview: NotificationOverview!
-  array: ArrayMutations!
-  docker: DockerMutations!
-
-  """Start a virtual machine"""
-  startVm(id: String!): Boolean!
-
-  """Stop a virtual machine"""
-  stopVm(id: String!): Boolean!
-
-  """Pause a virtual machine"""
-  pauseVm(id: String!): Boolean!
-
-  """Resume a virtual machine"""
-  resumeVm(id: String!): Boolean!
-
-  """Force stop a virtual machine"""
-  forceStopVm(id: String!): Boolean!
-
-  """Reboot a virtual machine"""
-  rebootVm(id: String!): Boolean!
-
-  """Reset a virtual machine"""
-  resetVm(id: String!): Boolean!
-  startParityCheck(correct: Boolean!): JSON!
-  pauseParityCheck: JSON!
-  resumeParityCheck: JSON!
-  cancelParityCheck: JSON!
-  updateApiSettings(input: ApiSettingsInput!): ConnectSettingsValues!
-  connectSignIn(input: ConnectSignInInput!): Boolean!
-  connectSignOut: Boolean!
-  setupRemoteAccess(input: SetupRemoteAccessInput!): Boolean!
-  setAdditionalAllowedOrigins(input: AllowedOriginInput!): [String!]!
-  enableDynamicRemoteAccess(input: EnableDynamicRemoteAccessInput!): Boolean!
-}
-
-input CreateApiKeyInput {
-  name: String!
-  description: String
-  roles: [Role!]
-  permissions: [AddPermissionInput!]
-
-  """
-  This will replace the existing key if one already exists with the same name, otherwise returns the existing key
-  """
-  overwrite: Boolean
-}
-
-input AddPermissionInput {
-  resource: Resource!
-  actions: [String!]!
-}
-
-input AddRoleForApiKeyInput {
-  apiKeyId: ID!
-  role: Role!
-}
-
-input RemoveRoleFromApiKeyInput {
-  apiKeyId: ID!
-  role: Role!
-}
-
-input NotificationData {
-  title: String!
-  subject: String!
-  description: String!
-  importance: NotificationImportance!
-  link: String
-}
-
-input ApiSettingsInput {
-  """
-  If true, the GraphQL sandbox will be enabled and available at /graphql. If false, the GraphQL sandbox will be disabled and only the production API will be available.
-  """
-  sandbox: Boolean
-
-  """A list of origins allowed to interact with the API"""
-  extraOrigins: [String!]
-
-  """The type of WAN access to use for Remote Access"""
-  accessType: WAN_ACCESS_TYPE
-
-  """The type of port forwarding to use for Remote Access"""
-  forwardType: WAN_FORWARD_TYPE
-
-  """
-  The port to use for Remote Access. Not required for UPNP forwardType. Required for STATIC forwardType. Ignored if accessType is DISABLED or forwardType is UPNP.
-  """
-  port: Int
-
-  """A list of Unique Unraid Account ID's"""
-  ssoUserIds: [String!]
-}
-
-input ConnectSignInInput {
-  """The API key for authentication"""
-  apiKey: String!
-
-  """The ID token for authentication"""
-  idToken: String
-
-  """User information for the sign-in"""
-  userInfo: ConnectUserInfoInput
-
-  """The access token for authentication"""
-  accessToken: String
-
-  """The refresh token for authentication"""
-  refreshToken: String
-}
-
-input ConnectUserInfoInput {
-  """The preferred username of the user"""
-  preferred_username: String!
-
-  """The email address of the user"""
-  email: String!
-
-  """The avatar URL of the user"""
-  avatar: String
-}
-
-input SetupRemoteAccessInput {
-  """The type of WAN access to use for Remote Access"""
-  accessType: WAN_ACCESS_TYPE!
-
-  """The type of port forwarding to use for Remote Access"""
-  forwardType: WAN_FORWARD_TYPE
-
-  """
-  The port to use for Remote Access. Not required for UPNP forwardType. Required for STATIC forwardType. Ignored if accessType is DISABLED or forwardType is UPNP.
-  """
-  port: Int
-}
-
-input AllowedOriginInput {
-  """A list of origins allowed to interact with the API"""
-  origins: [String!]!
-}
-
-input EnableDynamicRemoteAccessInput {
-  """The URL for dynamic remote access"""
-  url: URL!
-
-  """Whether to enable or disable dynamic remote access"""
-  enabled: Boolean!
-}
-
-type Subscription {
-  displaySubscription: Display!
-  infoSubscription: Info!
-  logFile(path: String!): LogFileContent!
-  notificationAdded: Notification!
-  notificationsOverview: NotificationOverview!
-  ownerSubscription: Owner!
-  registrationSubscription: Registration!
-  serversSubscription: Server!
-  parityHistorySubscription: ParityCheck!
-  arraySubscription: UnraidArray!
-}
\ No newline at end of file
diff --git a/api/generated-schema.graphql b/api/generated-schema.graphql
index 3b9b8df3f8..997ff63727 100644
--- a/api/generated-schema.graphql
+++ b/api/generated-schema.graphql
@@ -226,6 +226,27 @@ type Share implements Node {
   luksStatus: String
 }
 
+type AccessUrl {
+  type: URL_TYPE!
+  name: String
+  ipv4: URL
+  ipv6: URL
+}
+
+enum URL_TYPE {
+  LAN
+  WIREGUARD
+  WAN
+  MDNS
+  OTHER
+  DEFAULT
+}
+
+"""
+A field whose value conforms to the standard URL format as specified in RFC3986: https://www.ietf.org/rfc/rfc3986.txt.
+"""
+scalar URL
+
 type DiskPartition {
   """The name of the partition"""
   name: String!
@@ -1469,6 +1490,139 @@ type Plugin {
   hasCliModule: Boolean
 }
 
+type AccessUrlObject {
+  ipv4: String
+  ipv6: String
+  type: URL_TYPE!
+  name: String
+}
+
+type RemoteAccess {
+  """The type of WAN access used for Remote Access"""
+  accessType: WAN_ACCESS_TYPE!
+
+  """The type of port forwarding used for Remote Access"""
+  forwardType: WAN_FORWARD_TYPE
+
+  """The port used for Remote Access"""
+  port: Int
+}
+
+enum WAN_ACCESS_TYPE {
+  DYNAMIC
+  ALWAYS
+  DISABLED
+}
+
+enum WAN_FORWARD_TYPE {
+  UPNP
+  STATIC
+}
+
+type DynamicRemoteAccessStatus {
+  """The type of dynamic remote access that is enabled"""
+  enabledType: DynamicRemoteAccessType!
+
+  """The type of dynamic remote access that is currently running"""
+  runningType: DynamicRemoteAccessType!
+
+  """Any error message associated with the dynamic remote access"""
+  error: String
+}
+
+enum DynamicRemoteAccessType {
+  STATIC
+  UPNP
+  DISABLED
+}
+
+type ConnectSettingsValues {
+  """The type of WAN access used for Remote Access"""
+  accessType: WAN_ACCESS_TYPE!
+
+  """The type of port forwarding used for Remote Access"""
+  forwardType: WAN_FORWARD_TYPE
+
+  """The port used for Remote Access"""
+  port: Int
+}
+
+type ConnectSettings implements Node {
+  id: PrefixedID!
+
+  """The data schema for the Connect settings"""
+  dataSchema: JSON!
+
+  """The UI schema for the Connect settings"""
+  uiSchema: JSON!
+
+  """The values for the Connect settings"""
+  values: ConnectSettingsValues!
+}
+
+type Connect implements Node {
+  id: PrefixedID!
+
+  """The status of dynamic remote access"""
+  dynamicRemoteAccess: DynamicRemoteAccessStatus!
+
+  """The settings for the Connect instance"""
+  settings: ConnectSettings!
+}
+
+type Network implements Node {
+  id: PrefixedID!
+  accessUrls: [AccessUrl!]
+}
+
+type ApiKeyResponse {
+  valid: Boolean!
+  error: String
+}
+
+type MinigraphqlResponse {
+  status: MinigraphStatus!
+  timeout: Int
+  error: String
+}
+
+"""The status of the minigraph"""
+enum MinigraphStatus {
+  PRE_INIT
+  CONNECTING
+  CONNECTED
+  PING_FAILURE
+  ERROR_RETRYING
+}
+
+type CloudResponse {
+  status: String!
+  ip: String
+  error: String
+}
+
+type RelayResponse {
+  status: String!
+  timeout: String
+  error: String
+}
+
+type Cloud {
+  error: String
+  apiKey: ApiKeyResponse!
+  relay: RelayResponse
+  minigraphql: MinigraphqlResponse!
+  cloud: CloudResponse!
+  allowedOrigins: [String!]!
+}
+
+input AccessUrlObjectInput {
+  ipv4: String
+  ipv6: String
+  type: URL_TYPE!
+  name: String
+}
+
 "\n### Description:\n\nID scalar type that prefixes the underlying ID with the server identifier on output and strips it on input.\n\nWe use this scalar type to ensure that the ID is unique across all servers, allowing the same underlying resource ID to be used across different server instances.\n\n#### Input Behavior:\n\nWhen providing an ID as input (e.g., in arguments or input objects), the server identifier prefix ('<serverId>:') is optional.\n\n- If the prefix is present (e.g., '123:456'), it will be automatically stripped, and only the underlying ID ('456') will be used internally.\n- If the prefix is absent (e.g., '456'), the ID will be used as-is.\n\nThis makes it flexible for clients, as they don't strictly need to know or provide the server ID.\n\n#### Output Behavior:\n\nWhen an ID is returned in the response (output), it will *always* be prefixed with the current server's unique identifier (e.g., '123:456').\n\n#### Example:\n\nNote: The server identifier is '123' in this example.\n\n##### Input (Prefix Optional):\n```graphql\n# Both of these are valid inputs resolving to internal ID '456'\n{\n  someQuery(id: \"123:456\") { ... }\n  anotherQuery(id: \"456\") { ... }\n}\n```\n\n##### Output (Prefix Always Added):\n```graphql\n# Assuming internal ID is '456'\n{\n  \"data\": {\n    \"someResource\": {\n      \"id\": \"123:456\" \n    }\n  }\n}\n```\n        "
 scalar PrefixedID
 
@@ -1515,6 +1669,10 @@ type Query {
 
   """List all installed plugins with their metadata"""
   plugins: [Plugin!]!
+  remoteAccess: RemoteAccess!
+  connect: Connect!
+  network: Network!
+  cloud: Cloud!
 }
 
 type Mutation {
@@ -1557,6 +1715,11 @@ type Mutation {
   Remove one or more plugins from the API. Returns false if restart was triggered automatically, true if manual restart is required.
   """
   removePlugin(input: PluginManagementInput!): Boolean!
+  updateApiSettings(input: ConnectSettingsInput!): ConnectSettingsValues!
+  connectSignIn(input: ConnectSignInInput!): Boolean!
+  connectSignOut: Boolean!
+  setupRemoteAccess(input: SetupRemoteAccessInput!): Boolean!
+  enableDynamicRemoteAccess(input: EnableDynamicRemoteAccessInput!): Boolean!
 }
 
 input NotificationData {
@@ -1598,6 +1761,75 @@ input PluginManagementInput {
   restart: Boolean! = true
 }
 
+input ConnectSettingsInput {
+  """The type of WAN access to use for Remote Access"""
+  accessType: WAN_ACCESS_TYPE
+
+  """The type of port forwarding to use for Remote Access"""
+  forwardType: WAN_FORWARD_TYPE
+
+  """
+  The port to use for Remote Access. Not required for UPNP forwardType. Required for STATIC forwardType. Ignored if accessType is DISABLED or forwardType is UPNP.
+  """
+  port: Int
+}
+
+input ConnectSignInInput {
+  """The API key for authentication"""
+  apiKey: String!
+
+  """The ID token for authentication"""
+  idToken: String
+
+  """User information for the sign-in"""
+  userInfo: ConnectUserInfoInput
+
+  """The access token for authentication"""
+  accessToken: String
+
+  """The refresh token for authentication"""
+  refreshToken: String
+}
+
+input ConnectUserInfoInput {
+  """The preferred username of the user"""
+  preferred_username: String!
+
+  """The email address of the user"""
+  email: String!
+
+  """The avatar URL of the user"""
+  avatar: String
+}
+
+input SetupRemoteAccessInput {
+  """The type of WAN access to use for Remote Access"""
+  accessType: WAN_ACCESS_TYPE!
+
+  """The type of port forwarding to use for Remote Access"""
+  forwardType: WAN_FORWARD_TYPE
+
+  """
+  The port to use for Remote Access. Not required for UPNP forwardType. Required for STATIC forwardType. Ignored if accessType is DISABLED or forwardType is UPNP.
+  """
+  port: Int
+}
+
+input EnableDynamicRemoteAccessInput {
+  """The AccessURL Input for dynamic remote access"""
+  url: AccessUrlInput!
+
+  """Whether to enable or disable dynamic remote access"""
+  enabled: Boolean!
+}
+
+input AccessUrlInput {
+  type: URL_TYPE!
+  name: String
+  ipv4: URL
+  ipv6: URL
+}
+
 type Subscription {
   displaySubscription: Display!
   infoSubscription: Info!
diff --git a/api/src/unraid-api/graph/graph.module.ts b/api/src/unraid-api/graph/graph.module.ts
index 6307be594d..e03e22190d 100644
--- a/api/src/unraid-api/graph/graph.module.ts
+++ b/api/src/unraid-api/graph/graph.module.ts
@@ -17,6 +17,8 @@ import { createSandboxPlugin } from '@app/unraid-api/graph/sandbox-plugin.js';
 import { GlobalDepsModule } from '@app/unraid-api/plugin/global-deps.module.js';
 import { PluginModule } from '@app/unraid-api/plugin/plugin.module.js';
 
+console.log('ENVIRONMENT', ENVIRONMENT);
+
 @Module({
     imports: [
         GlobalDepsModule,
diff --git a/api/src/unraid-api/graph/validate-schema.ts b/api/src/unraid-api/graph/validate-schema.ts
deleted file mode 100644
index 2c09c8765f..0000000000
--- a/api/src/unraid-api/graph/validate-schema.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { readFileSync } from 'fs';
-import { join } from 'path';
-
-import { buildSchema } from 'graphql';
-
-async function validateSchema(schemaFile = 'generated-schema.graphql') {
-    try {
-        // Read the generated schema file
-        const schemaPath = join(process.cwd(), schemaFile);
-        const schemaContent = readFileSync(schemaPath, 'utf-8');
-
-        // Try to build the schema
-        const schema = buildSchema(schemaContent);
-
-        // If we get here, the schema is valid
-        console.log(`✅ ${schemaFile} is valid!`);
-
-        // Print some basic schema information
-        const queryType = schema.getQueryType();
-        const mutationType = schema.getMutationType();
-        const subscriptionType = schema.getSubscriptionType();
-
-        console.log('\nSchema Overview:');
-        console.log('----------------');
-        if (queryType) {
-            console.log(`Query Type: ${queryType.name}`);
-            console.log('Query Fields:', Object.keys(queryType.getFields()).join(', '));
-        }
-        if (mutationType) {
-            console.log(`\nMutation Type: ${mutationType.name}`);
-            console.log('Mutation Fields:', Object.keys(mutationType.getFields()).join(', '));
-        }
-        if (subscriptionType) {
-            console.log(`\nSubscription Type: ${subscriptionType.name}`);
-            console.log('Subscription Fields:', Object.keys(subscriptionType.getFields()).join(', '));
-        }
-    } catch (error) {
-        console.error('❌ Schema validation failed!');
-        console.error('\nError details:');
-        console.error('----------------');
-        console.error(error);
-
-        // If it's a GraphQL error, try to extract more information
-        if (error instanceof Error) {
-            const message = error.message;
-            if (message.includes('Cannot determine a GraphQL output type')) {
-                console.error('\nPossible causes:');
-                console.error('1. Missing @Field() decorator on a type field');
-                console.error('2. Unregistered enum type');
-                console.error('3. Circular dependency in type definitions');
-                console.error('\nLook for fields named "type" in your GraphQL types');
-            }
-        }
-    }
-}
-
-// Run the validation
-validateSchema('generated-schema.graphql').catch(console.error);
-validateSchema('generated-schema-new.graphql').catch(console.error);
diff --git a/generated-schema-new.graphql b/generated-schema-new.graphql
deleted file mode 100644
index 8a0c873337..0000000000
--- a/generated-schema-new.graphql
+++ /dev/null
@@ -1,1528 +0,0 @@
-# ------------------------------------------------------
-# THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
-# ------------------------------------------------------
-
-type ApiKeyResponse {
-  valid: Boolean!
-  error: String
-}
-
-type MinigraphqlResponse {
-  status: MinigraphStatus!
-  timeout: Int
-  error: String
-}
-
-enum MinigraphStatus {
-  PRE_INIT
-  CONNECTING
-  CONNECTED
-  PING_FAILURE
-  ERROR_RETRYING
-}
-
-type CloudResponse {
-  status: String!
-  ip: String
-  error: String
-}
-
-type RelayResponse {
-  status: String!
-  timeout: String
-  error: String
-}
-
-type Cloud {
-  error: String
-  apiKey: ApiKeyResponse!
-  relay: RelayResponse
-  minigraphql: MinigraphqlResponse!
-  cloud: CloudResponse!
-  allowedOrigins: [String!]!
-}
-
-type Capacity {
-  """Free capacity"""
-  free: String!
-
-  """Used capacity"""
-  used: String!
-
-  """Total capacity"""
-  total: String!
-}
-
-type ArrayCapacity {
-  """Capacity in kilobytes"""
-  kilobytes: Capacity!
-
-  """Capacity in number of disks"""
-  disks: Capacity!
-}
-
-type ArrayDisk {
-  """Disk identifier, only set for present disks on the system"""
-  id: ID!
-
-  """
-  Array slot number. Parity1 is always 0 and Parity2 is always 29. Array slots will be 1 - 28. Cache slots are 30 - 53. Flash is 54.
-  """
-  idx: Int!
-  name: String
-  device: String
-
-  """(KB) Disk Size total"""
-  size: Float!
-  status: ArrayDiskStatus
-
-  """Is the disk a HDD or SSD."""
-  rotational: Boolean
-
-  """Disk temp - will be NaN if array is not started or DISK_NP"""
-  temp: Int
-
-  """
-  Count of I/O read requests sent to the device I/O drivers. These statistics may be cleared at any time.
-  """
-  numReads: Float!
-
-  """
-  Count of I/O writes requests sent to the device I/O drivers. These statistics may be cleared at any time.
-  """
-  numWrites: Float!
-
-  """
-  Number of unrecoverable errors reported by the device I/O drivers. Missing data due to unrecoverable array read errors is filled in on-the-fly using parity reconstruct (and we attempt to write this data back to the sector(s) which failed). Any unrecoverable write error results in disabling the disk.
-  """
-  numErrors: Float!
-
-  """(KB) Total Size of the FS (Not present on Parity type drive)"""
-  fsSize: Float
-
-  """(KB) Free Size on the FS (Not present on Parity type drive)"""
-  fsFree: Float
-
-  """(KB) Used Size on the FS (Not present on Parity type drive)"""
-  fsUsed: Float
-  exportable: Boolean
-
-  """Type of Disk - used to differentiate Cache / Flash / Array / Parity"""
-  type: ArrayDiskType!
-
-  """(%) Disk space left to warn"""
-  warning: Int
-
-  """(%) Disk space left for critical"""
-  critical: Int
-
-  """File system type for the disk"""
-  fsType: String
-
-  """User comment on disk"""
-  comment: String
-
-  """File format (ex MBR: 4KiB-aligned)"""
-  format: String
-
-  """ata | nvme | usb | (others)"""
-  transport: String
-  color: ArrayDiskFsColor
-}
-
-enum ArrayDiskStatus {
-  DISK_NP
-  DISK_OK
-  DISK_NP_MISSING
-  DISK_INVALID
-  DISK_WRONG
-  DISK_DSBL
-  DISK_NP_DSBL
-  DISK_DSBL_NEW
-  DISK_NEW
-}
-
-enum ArrayDiskType {
-  DATA
-  PARITY
-  FLASH
-  CACHE
-}
-
-enum ArrayDiskFsColor {
-  GREEN_ON
-  GREEN_BLINK
-  BLUE_ON
-  BLUE_BLINK
-  YELLOW_ON
-  YELLOW_BLINK
-  RED_ON
-  RED_OFF
-  GREY_OFF
-}
-
-type UnraidArray {
-  id: ID!
-
-  """Array state before this query/mutation"""
-  previousState: ArrayState
-
-  """Array state after this query/mutation"""
-  pendingState: ArrayPendingState
-
-  """Current array state"""
-  state: ArrayState!
-
-  """Current array capacity"""
-  capacity: ArrayCapacity!
-
-  """Current boot disk"""
-  boot: ArrayDisk
-
-  """Parity disks in the current array"""
-  parities: [ArrayDisk!]!
-
-  """Data disks in the current array"""
-  disks: [ArrayDisk!]!
-
-  """Caches in the current array"""
-  caches: [ArrayDisk!]!
-}
-
-enum ArrayState {
-  STARTED
-  STOPPED
-  NEW_ARRAY
-  RECON_DISK
-  DISABLE_DISK
-  SWAP_DSBL
-  INVALID_EXPANSION
-  PARITY_NOT_BIGGEST
-  TOO_MANY_MISSING_DISKS
-  NEW_DISK_TOO_SMALL
-  NO_DATA_DISKS
-}
-
-enum ArrayPendingState {
-  STARTING
-  STOPPING
-  NO_DATA_DISKS
-  TOO_MANY_MISSING_DISKS
-}
-
-type Share {
-  id: ID!
-
-  """Display name"""
-  name: String
-
-  """(KB) Free space"""
-  free: Long
-
-  """(KB) Used Size"""
-  used: Long
-
-  """(KB) Total size"""
-  size: Long
-
-  """Disks that are included in this share"""
-  include: [String!]
-
-  """Disks that are excluded from this share"""
-  exclude: [String!]
-
-  """Is this share cached"""
-  cache: Boolean
-
-  """Original name"""
-  nameOrig: String
-
-  """User comment"""
-  comment: String
-
-  """Allocator"""
-  allocator: String
-
-  """Split level"""
-  splitLevel: String
-
-  """Floor"""
-  floor: String
-
-  """COW"""
-  cow: String
-
-  """Color"""
-  color: String
-
-  """LUKS status"""
-  luksStatus: String
-}
-
-"""The `Long` scalar type represents 52-bit integers"""
-scalar Long
-
-type RemoteAccess {
-  """The type of WAN access used for Remote Access"""
-  accessType: WAN_ACCESS_TYPE!
-
-  """The type of port forwarding used for Remote Access"""
-  forwardType: WAN_FORWARD_TYPE
-
-  """The port used for Remote Access"""
-  port: Int
-}
-
-enum WAN_ACCESS_TYPE {
-  DYNAMIC
-  ALWAYS
-  DISABLED
-}
-
-enum WAN_FORWARD_TYPE {
-  UPNP
-  STATIC
-}
-
-type DynamicRemoteAccessStatus {
-  """The type of dynamic remote access that is enabled"""
-  enabledType: DynamicRemoteAccessType!
-
-  """The type of dynamic remote access that is currently running"""
-  runningType: DynamicRemoteAccessType!
-
-  """Any error message associated with the dynamic remote access"""
-  error: String
-}
-
-enum DynamicRemoteAccessType {
-  STATIC
-  UPNP
-  DISABLED
-}
-
-type ConnectSettingsValues {
-  """
-  If true, the GraphQL sandbox is enabled and available at /graphql. If false, the GraphQL sandbox is disabled and only the production API will be available.
-  """
-  sandbox: Boolean!
-
-  """A list of origins allowed to interact with the API"""
-  extraOrigins: [String!]!
-
-  """The type of WAN access used for Remote Access"""
-  accessType: WAN_ACCESS_TYPE!
-
-  """The type of port forwarding used for Remote Access"""
-  forwardType: WAN_FORWARD_TYPE
-
-  """The port used for Remote Access"""
-  port: Int
-
-  """A list of Unique Unraid Account ID's"""
-  ssoUserIds: [String!]!
-}
-
-type ConnectSettings {
-  """The unique identifier for the Connect settings"""
-  id: ID!
-
-  """The data schema for the Connect settings"""
-  dataSchema: JSON!
-
-  """The UI schema for the Connect settings"""
-  uiSchema: JSON!
-
-  """The values for the Connect settings"""
-  values: ConnectSettingsValues!
-}
-
-"""
-The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
-"""
-scalar JSON @specifiedBy(url: "http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf")
-
-type Connect {
-  """The unique identifier for the Connect instance"""
-  id: ID!
-
-  """The status of dynamic remote access"""
-  dynamicRemoteAccess: DynamicRemoteAccessStatus!
-
-  """The settings for the Connect instance"""
-  settings: ConnectSettings!
-}
-
-type AccessUrl {
-  type: URL_TYPE!
-  name: String
-  ipv4: URL
-  ipv6: URL
-}
-
-enum URL_TYPE {
-  LAN
-  WIREGUARD
-  WAN
-  MDNS
-  OTHER
-  DEFAULT
-}
-
-"""
-A field whose value conforms to the standard URL format as specified in RFC3986: https://www.ietf.org/rfc/rfc3986.txt.
-"""
-scalar URL
-
-type Network {
-  id: ID!
-  accessUrls: [AccessUrl!]
-}
-
-type ProfileModel {
-  userId: ID
-  username: String!
-  url: String!
-  avatar: String!
-}
-
-type Server {
-  owner: ProfileModel!
-  guid: String!
-  apikey: String!
-  name: String!
-  status: ServerStatus!
-  wanip: String!
-  lanip: String!
-  localurl: String!
-  remoteurl: String!
-}
-
-enum ServerStatus {
-  ONLINE
-  OFFLINE
-  NEVER_CONNECTED
-}
-
-type DiskPartition {
-  """The name of the partition"""
-  name: String!
-
-  """The filesystem type of the partition"""
-  fsType: DiskFsType!
-
-  """The size of the partition in bytes"""
-  size: Float!
-}
-
-"""The type of filesystem on the disk partition"""
-enum DiskFsType {
-  XFS
-  BTRFS
-  VFAT
-  ZFS
-  EXT4
-  NTFS
-}
-
-type Disk {
-  """The unique identifier of the disk"""
-  id: String!
-
-  """The device path of the disk (e.g. /dev/sdb)"""
-  device: String!
-
-  """The type of disk (e.g. SSD, HDD)"""
-  type: String!
-
-  """The model name of the disk"""
-  name: String!
-
-  """The manufacturer of the disk"""
-  vendor: String!
-
-  """The total size of the disk in bytes"""
-  size: Float!
-
-  """The number of bytes per sector"""
-  bytesPerSector: Float!
-
-  """The total number of cylinders on the disk"""
-  totalCylinders: Float!
-
-  """The total number of heads on the disk"""
-  totalHeads: Float!
-
-  """The total number of sectors on the disk"""
-  totalSectors: Float!
-
-  """The total number of tracks on the disk"""
-  totalTracks: Float!
-
-  """The number of tracks per cylinder"""
-  tracksPerCylinder: Float!
-
-  """The number of sectors per track"""
-  sectorsPerTrack: Float!
-
-  """The firmware revision of the disk"""
-  firmwareRevision: String!
-
-  """The serial number of the disk"""
-  serialNum: String!
-
-  """The interface type of the disk"""
-  interfaceType: DiskInterfaceType!
-
-  """The SMART status of the disk"""
-  smartStatus: DiskSmartStatus!
-
-  """The current temperature of the disk in Celsius"""
-  temperature: Float
-
-  """The partitions on the disk"""
-  partitions: [DiskPartition!]!
-}
-
-"""The type of interface the disk uses to connect to the system"""
-enum DiskInterfaceType {
-  SAS
-  SATA
-  USB
-  PCIE
-  UNKNOWN
-}
-
-"""
-The SMART (Self-Monitoring, Analysis and Reporting Technology) status of the disk
-"""
-enum DiskSmartStatus {
-  OK
-  UNKNOWN
-}
-
-type KeyFile {
-  location: String
-  contents: String
-}
-
-type Registration {
-  guid: ID
-  type: registrationType
-  keyFile: KeyFile
-  state: RegistrationState
-  expiration: String
-  updateExpiration: String
-}
-
-enum registrationType {
-  BASIC
-  PLUS
-  PRO
-  STARTER
-  UNLEASHED
-  LIFETIME
-  INVALID
-  TRIAL
-}
-
-enum RegistrationState {
-  TRIAL
-  BASIC
-  PLUS
-  PRO
-  STARTER
-  UNLEASHED
-  LIFETIME
-  EEXPIRED
-  EGUID
-  EGUID1
-  ETRIAL
-  ENOKEYFILE
-  ENOKEYFILE1
-  ENOKEYFILE2
-  ENOFLASH
-  ENOFLASH1
-  ENOFLASH2
-  ENOFLASH3
-  ENOFLASH4
-  ENOFLASH5
-  ENOFLASH6
-  ENOFLASH7
-  EBLACKLISTED
-  EBLACKLISTED1
-  EBLACKLISTED2
-  ENOCONN
-}
-
-type Vars {
-  id: ID!
-
-  """Unraid version"""
-  version: String
-  maxArraysz: Int
-  maxCachesz: Int
-
-  """Machine hostname"""
-  name: String
-  timeZone: String
-  comment: String
-  security: String
-  workgroup: String
-  domain: String
-  domainShort: String
-  hideDotFiles: Boolean
-  localMaster: Boolean
-  enableFruit: String
-
-  """Should a NTP server be used for time sync?"""
-  useNtp: Boolean
-
-  """NTP Server 1"""
-  ntpServer1: String
-
-  """NTP Server 2"""
-  ntpServer2: String
-
-  """NTP Server 3"""
-  ntpServer3: String
-
-  """NTP Server 4"""
-  ntpServer4: String
-  domainLogin: String
-  sysModel: String
-  sysArraySlots: Int
-  sysCacheSlots: Int
-  sysFlashSlots: Int
-  useSsl: Boolean
-
-  """Port for the webui via HTTP"""
-  port: Int
-
-  """Port for the webui via HTTPS"""
-  portssl: Int
-  localTld: String
-  bindMgt: Boolean
-
-  """Should telnet be enabled?"""
-  useTelnet: Boolean
-  porttelnet: Int
-  useSsh: Boolean
-  portssh: Int
-  startPage: String
-  startArray: Boolean
-  spindownDelay: String
-  queueDepth: String
-  spinupGroups: Boolean
-  defaultFormat: String
-  defaultFsType: String
-  shutdownTimeout: Int
-  luksKeyfile: String
-  pollAttributes: String
-  pollAttributesDefault: String
-  pollAttributesStatus: String
-  nrRequests: Int
-  nrRequestsDefault: Int
-  nrRequestsStatus: String
-  mdNumStripes: Int
-  mdNumStripesDefault: Int
-  mdNumStripesStatus: String
-  mdSyncWindow: Int
-  mdSyncWindowDefault: Int
-  mdSyncWindowStatus: String
-  mdSyncThresh: Int
-  mdSyncThreshDefault: Int
-  mdSyncThreshStatus: String
-  mdWriteMethod: Int
-  mdWriteMethodDefault: String
-  mdWriteMethodStatus: String
-  shareDisk: String
-  shareUser: String
-  shareUserInclude: String
-  shareUserExclude: String
-  shareSmbEnabled: Boolean
-  shareNfsEnabled: Boolean
-  shareAfpEnabled: Boolean
-  shareInitialOwner: String
-  shareInitialGroup: String
-  shareCacheEnabled: Boolean
-  shareCacheFloor: String
-  shareMoverSchedule: String
-  shareMoverLogging: Boolean
-  fuseRemember: String
-  fuseRememberDefault: String
-  fuseRememberStatus: String
-  fuseDirectio: String
-  fuseDirectioDefault: String
-  fuseDirectioStatus: String
-  shareAvahiEnabled: Boolean
-  shareAvahiSmbName: String
-  shareAvahiSmbModel: String
-  shareAvahiAfpName: String
-  shareAvahiAfpModel: String
-  safeMode: Boolean
-  startMode: String
-  configValid: Boolean
-  configError: ConfigErrorState
-  joinStatus: String
-  deviceCount: Int
-  flashGuid: String
-  flashProduct: String
-  flashVendor: String
-  regCheck: String
-  regFile: String
-  regGuid: String
-  regTy: registrationType
-  regState: String
-
-  """Registration owner"""
-  regTo: String
-  regTm: String
-  regTm2: String
-  regGen: String
-  sbName: String
-  sbVersion: String
-  sbUpdated: String
-  sbEvents: Int
-  sbState: String
-  sbClean: Boolean
-  sbSynced: Int
-  sbSyncErrs: Int
-  sbSynced2: Int
-  sbSyncExit: String
-  sbNumDisks: Int
-  mdColor: String
-  mdNumDisks: Int
-  mdNumDisabled: Int
-  mdNumInvalid: Int
-  mdNumMissing: Int
-  mdNumNew: Int
-  mdNumErased: Int
-  mdResync: Int
-  mdResyncCorr: String
-  mdResyncPos: String
-  mdResyncDb: String
-  mdResyncDt: String
-  mdResyncAction: String
-  mdResyncSize: Int
-  mdState: String
-  mdVersion: String
-  cacheNumDevices: Int
-  cacheSbNumDisks: Int
-  fsState: String
-
-  """Human friendly string of array events happening"""
-  fsProgress: String
-
-  """
-  Percentage from 0 - 100 while upgrading a disk or swapping parity drives
-  """
-  fsCopyPrcnt: Int
-  fsNumMounted: Int
-  fsNumUnmountable: Int
-  fsUnmountableMask: String
-
-  """Total amount of user shares"""
-  shareCount: Int
-
-  """Total amount shares with SMB enabled"""
-  shareSmbCount: Int
-
-  """Total amount shares with NFS enabled"""
-  shareNfsCount: Int
-
-  """Total amount shares with AFP enabled"""
-  shareAfpCount: Int
-  shareMoverActive: Boolean
-  csrfToken: String
-}
-
-"""Possible error states for configuration"""
-enum ConfigErrorState {
-  UNKNOWN_ERROR
-  INELIGIBLE
-  INVALID
-  NO_KEY_SERVER
-  WITHDRAWN
-}
-
-type Permission {
-  resource: Resource!
-  actions: [String!]!
-}
-
-"""Available resources for permissions"""
-enum Resource {
-  API_KEY
-  ARRAY
-  CLOUD
-  CONFIG
-  CONNECT
-  CONNECT__REMOTE_ACCESS
-  CUSTOMIZATIONS
-  DASHBOARD
-  DISK
-  DISPLAY
-  DOCKER
-  FLASH
-  INFO
-  LOGS
-  ME
-  NETWORK
-  NOTIFICATIONS
-  ONLINE
-  OS
-  OWNER
-  PERMISSION
-  REGISTRATION
-  SERVERS
-  SERVICES
-  SHARE
-  VARS
-  VMS
-  WELCOME
-}
-
-type ApiKey {
-  id: ID!
-  name: String!
-  description: String
-  roles: [Role!]!
-  createdAt: String!
-  permissions: [Permission!]!
-}
-
-"""Available roles for API keys and users"""
-enum Role {
-  ADMIN
-  CONNECT
-  GUEST
-}
-
-type ApiKeyWithSecret {
-  id: ID!
-  name: String!
-  description: String
-  roles: [Role!]!
-  createdAt: String!
-  permissions: [Permission!]!
-  key: String!
-}
-
-type ArrayMutations {
-  """Placeholder field to ensure the type is not empty"""
-  _: Boolean!
-}
-
-type DockerMutations {
-  """Placeholder field to ensure the type is not empty"""
-  _: Boolean!
-
-  """Start a container"""
-  start(id: String!): DockerContainer!
-
-  """Stop a container"""
-  stop(id: String!): DockerContainer!
-}
-
-type Config {
-  id: ID!
-  valid: Boolean
-  error: String
-}
-
-type InfoApps {
-  id: ID!
-
-  """How many docker containers are installed"""
-  installed: Int!
-
-  """How many docker containers are running"""
-  started: Int!
-}
-
-type Baseboard {
-  id: ID!
-  manufacturer: String!
-  model: String
-  version: String
-  serial: String
-  assetTag: String
-}
-
-type InfoCpu {
-  id: ID!
-  manufacturer: String!
-  brand: String!
-  vendor: String!
-  family: String!
-  model: String!
-  stepping: Int!
-  revision: String!
-  voltage: String
-  speed: Float!
-  speedmin: Float!
-  speedmax: Float!
-  threads: Int!
-  cores: Int!
-  processors: Int!
-  socket: String!
-  cache: JSON!
-  flags: [String!]!
-}
-
-type Gpu {
-  id: ID!
-  type: String!
-  typeid: String!
-  vendorname: String!
-  productid: String!
-  blacklisted: Boolean!
-  class: String!
-}
-
-type Pci {
-  id: ID!
-  type: String
-  typeid: String
-  vendorname: String
-  vendorid: String
-  productname: String
-  productid: String
-  blacklisted: String
-  class: String
-}
-
-type Usb {
-  id: ID!
-  name: String
-}
-
-type Devices {
-  id: ID!
-  gpu: [Gpu!]!
-  pci: [Pci!]!
-  usb: [Usb!]!
-}
-
-type Case {
-  icon: String
-  url: String
-  error: String
-  base64: String
-}
-
-type Display {
-  id: ID!
-  case: Case
-  date: String
-  number: String
-  scale: Boolean
-  tabs: Boolean
-  users: String
-  resize: Boolean
-  wwn: Boolean
-  total: Boolean
-  usage: Boolean
-  banner: String
-  dashapps: String
-  theme: Theme
-  text: Boolean
-  unit: Temperature
-  warning: Int
-  critical: Int
-  hot: Int
-  max: Int
-  locale: String
-}
-
-"""Display theme"""
-enum Theme {
-  white
-}
-
-"""Temperature unit (Celsius or Fahrenheit)"""
-enum Temperature {
-  C
-  F
-}
-
-type MemoryLayout {
-  size: Int!
-  bank: String
-  type: String
-  clockSpeed: Int
-  formFactor: String
-  manufacturer: String
-  partNum: String
-  serialNum: String
-  voltageConfigured: Int
-  voltageMin: Int
-  voltageMax: Int
-}
-
-type InfoMemory {
-  id: ID!
-  max: Int!
-  total: Int!
-  free: Int!
-  used: Int!
-  active: Int!
-  available: Int!
-  buffcache: Int!
-  swaptotal: Int!
-  swapused: Int!
-  swapfree: Int!
-  layout: [MemoryLayout!]!
-}
-
-type Os {
-  id: ID!
-  platform: String
-  distro: String
-  release: String
-  codename: String
-  kernel: String
-  arch: String
-  hostname: String
-  codepage: String
-  logofile: String
-  serial: String
-  build: String
-  uptime: String
-}
-
-type System {
-  id: ID!
-  manufacturer: String
-  model: String
-  version: String
-  serial: String
-  uuid: String
-  sku: String
-}
-
-type Versions {
-  id: ID!
-  kernel: String
-  openssl: String
-  systemOpenssl: String
-  systemOpensslLib: String
-  node: String
-  v8: String
-  npm: String
-  yarn: String
-  pm2: String
-  gulp: String
-  grunt: String
-  git: String
-  tsc: String
-  mysql: String
-  redis: String
-  mongodb: String
-  apache: String
-  nginx: String
-  php: String
-  docker: String
-  postfix: String
-  postgresql: String
-  perl: String
-  python: String
-  gcc: String
-  unraid: String
-}
-
-type Info {
-  id: ID!
-
-  """Count of docker containers"""
-  apps: InfoApps!
-  baseboard: Baseboard!
-  cpu: InfoCpu!
-  devices: Devices!
-  display: Display!
-
-  """Machine ID"""
-  machineId: ID
-  memory: InfoMemory!
-  os: Os!
-  system: System!
-  time: DateTime!
-  versions: Versions!
-}
-
-"""
-A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format.
-"""
-scalar DateTime
-
-type ContainerPort {
-  ip: String
-  privatePort: Int!
-  publicPort: Int!
-  type: ContainerPortType!
-}
-
-enum ContainerPortType {
-  TCP
-  UDP
-}
-
-type ContainerHostConfig {
-  networkMode: String!
-}
-
-type DockerContainer {
-  id: ID!
-  names: [String!]!
-  image: String!
-  imageId: String!
-  command: String!
-  created: Int!
-  ports: [ContainerPort!]!
-
-  """Total size of all the files in the container"""
-  sizeRootFs: Int
-  labels: JSONObject
-  state: ContainerState!
-  status: String!
-  hostConfig: ContainerHostConfig
-  networkSettings: JSONObject
-  mounts: [JSONObject!]
-  autoStart: Boolean!
-}
-
-"""
-The `JSONObject` scalar type represents JSON objects as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
-"""
-scalar JSONObject
-
-enum ContainerState {
-  RUNNING
-  EXITED
-}
-
-type DockerNetwork {
-  name: String!
-  id: ID!
-  created: String!
-  scope: String!
-  driver: String!
-  enableIPv6: Boolean!
-  ipam: JSONObject!
-  internal: Boolean!
-  attachable: Boolean!
-  ingress: Boolean!
-  configFrom: JSONObject!
-  configOnly: Boolean!
-  containers: JSONObject!
-  options: JSONObject!
-  labels: JSONObject!
-}
-
-type Docker {
-  id: ID!
-  containers: [DockerContainer!]!
-  networks: [DockerNetwork!]!
-}
-
-type Flash {
-  id: ID!
-  guid: String!
-  vendor: String!
-  product: String!
-}
-
-type LogFile {
-  """Name of the log file"""
-  name: String!
-
-  """Full path to the log file"""
-  path: String!
-
-  """Size of the log file in bytes"""
-  size: Int!
-
-  """Last modified timestamp"""
-  modifiedAt: DateTime!
-}
-
-type LogFileContent {
-  """Path to the log file"""
-  path: String!
-
-  """Content of the log file"""
-  content: String!
-
-  """Total number of lines in the file"""
-  totalLines: Int!
-
-  """Starting line number of the content (1-indexed)"""
-  startLine: Int
-}
-
-type NotificationCounts {
-  info: Int!
-  warning: Int!
-  alert: Int!
-  total: Int!
-}
-
-type NotificationOverview {
-  unread: NotificationCounts!
-  archive: NotificationCounts!
-}
-
-type Notification {
-  id: ID!
-
-  """Also known as 'event'"""
-  title: String!
-  subject: String!
-  description: String!
-  importance: NotificationImportance!
-  link: String
-  type: NotificationType!
-
-  """ISO Timestamp for when the notification occurred"""
-  timestamp: String
-  formattedTimestamp: String
-}
-
-enum NotificationImportance {
-  ALERT
-  INFO
-  WARNING
-}
-
-enum NotificationType {
-  UNREAD
-  ARCHIVE
-}
-
-type Notifications {
-  id: ID!
-
-  """A cached overview of the notifications in the system & their severity."""
-  overview: NotificationOverview!
-  list(filter: NotificationFilter!): [Notification!]!
-}
-
-input NotificationFilter {
-  importance: NotificationImportance
-  type: NotificationType!
-  offset: Int!
-  limit: Int!
-}
-
-type Owner {
-  username: String!
-  url: String!
-  avatar: String!
-}
-
-type VmDomain {
-  uuid: ID!
-
-  """A friendly name for the vm"""
-  name: String
-
-  """Current domain vm state"""
-  state: VmState!
-}
-
-"""The state of a virtual machine"""
-enum VmState {
-  NOSTATE
-  RUNNING
-  IDLE
-  PAUSED
-  SHUTDOWN
-  SHUTOFF
-  CRASHED
-  PMSUSPENDED
-}
-
-type Vms {
-  id: ID!
-  domain: [VmDomain!]!
-  domains: [VmDomain!]!
-}
-
-type Uptime {
-  timestamp: String
-}
-
-type Service {
-  id: ID!
-  name: String
-  online: Boolean
-  uptime: Uptime
-  version: String
-}
-
-type UserAccount {
-  """A unique identifier for the user"""
-  id: ID!
-
-  """The name of the user"""
-  name: String!
-
-  """A description of the user"""
-  description: String!
-
-  """The roles of the user"""
-  roles: [Role!]!
-
-  """The permissions of the user"""
-  permissions: [Permission!]
-}
-
-type Query {
-  apiKeys: [ApiKey!]!
-  apiKey(id: String!): ApiKey
-  array: UnraidArray!
-  cloud: Cloud!
-  config: Config!
-  connect: Connect!
-  remoteAccess: RemoteAccess!
-  extraAllowedOrigins: [String!]!
-  display: Display!
-  flash: Flash!
-  info: Info!
-  logFiles: [LogFile!]!
-  logFile(path: String!, lines: Float, startLine: Float): LogFileContent!
-  me: UserAccount!
-  network: Network!
-
-  """Get all notifications"""
-  notifications: Notifications!
-  online: Boolean!
-  owner: Owner!
-  registration: Registration
-  server: Server
-  servers: [Server!]!
-  services: [Service!]!
-  shares: [Share!]!
-  vars: Vars!
-  vms: Vms!
-  docker: Docker!
-  disks: [Disk!]!
-  disk(id: String!): Disk!
-}
-
-type Mutation {
-  createApiKey(input: CreateApiKeyInput!): ApiKeyWithSecret!
-  addRoleForApiKey(input: AddRoleForApiKeyInput!): Boolean!
-  removeRoleFromApiKey(input: RemoveRoleFromApiKeyInput!): Boolean!
-
-  """Set array state"""
-  setState(input: ArrayStateInput!): UnraidArray!
-
-  """Add new disk to array"""
-  addDiskToArray(input: ArrayDiskInput!): UnraidArray!
-
-  """
-  Remove existing disk from array. NOTE: The array must be stopped before running this otherwise it'll throw an error.
-  """
-  removeDiskFromArray(input: ArrayDiskInput!): UnraidArray!
-
-  """Mount a disk in the array"""
-  mountArrayDisk(id: String!): ArrayDisk!
-
-  """Unmount a disk from the array"""
-  unmountArrayDisk(id: String!): ArrayDisk!
-
-  """Clear statistics for a disk in the array"""
-  clearArrayDiskStatistics(id: String!): Boolean!
-  updateApiSettings(input: ApiSettingsInput!): ConnectSettings!
-  enableDynamicRemoteAccess(input: EnableDynamicRemoteAccessInput!): Boolean!
-  connectSignIn(input: ConnectSignInInput!): Boolean!
-  connectSignOut: Boolean!
-  setupRemoteAccess(input: SetupRemoteAccessInput!): Boolean!
-  setAdditionalAllowedOrigins(input: AllowedOriginInput!): [String!]!
-
-  """Creates a new notification record"""
-  createNotification(input: NotificationData!): Notification!
-  deleteNotification(id: String!, type: NotificationType!): NotificationOverview!
-
-  """Deletes all archived notifications on server."""
-  deleteArchivedNotifications: NotificationOverview!
-
-  """Marks a notification as archived."""
-  archiveNotification(id: String!): Notification!
-  archiveNotifications(ids: [String!]!): NotificationOverview!
-  archiveAll(importance: NotificationImportance): NotificationOverview!
-
-  """Marks a notification as unread."""
-  unreadNotification(id: String!): Notification!
-  unarchiveNotifications(ids: [String!]!): NotificationOverview!
-  unarchiveAll(importance: NotificationImportance): NotificationOverview!
-
-  """Reads each notification to recompute & update the overview."""
-  recalculateOverview: NotificationOverview!
-
-  """Start a virtual machine"""
-  startVm(id: String!): Boolean!
-
-  """Stop a virtual machine"""
-  stopVm(id: String!): Boolean!
-
-  """Pause a virtual machine"""
-  pauseVm(id: String!): Boolean!
-
-  """Resume a virtual machine"""
-  resumeVm(id: String!): Boolean!
-
-  """Force stop a virtual machine"""
-  forceStopVm(id: String!): Boolean!
-
-  """Reboot a virtual machine"""
-  rebootVm(id: String!): Boolean!
-
-  """Reset a virtual machine"""
-  resetVm(id: String!): Boolean!
-}
-
-input CreateApiKeyInput {
-  name: String!
-  description: String
-  roles: [Role!]
-  permissions: [AddPermissionInput!]
-
-  """
-  This will replace the existing key if one already exists with the same name, otherwise returns the existing key
-  """
-  overwrite: Boolean
-}
-
-input AddPermissionInput {
-  resource: Resource!
-  actions: [String!]!
-}
-
-input AddRoleForApiKeyInput {
-  apiKeyId: ID!
-  role: Role!
-}
-
-input RemoveRoleFromApiKeyInput {
-  apiKeyId: ID!
-  role: Role!
-}
-
-input ArrayStateInput {
-  """Array state"""
-  desiredState: ArrayStateInputState! = STOP
-}
-
-enum ArrayStateInputState {
-  START
-  STOP
-}
-
-input ArrayDiskInput {
-  """Disk ID"""
-  id: ID! = ""
-
-  """The slot for the disk"""
-  slot: Int
-}
-
-input ApiSettingsInput {
-  """
-  If true, the GraphQL sandbox will be enabled and available at /graphql. If false, the GraphQL sandbox will be disabled and only the production API will be available.
-  """
-  sandbox: Boolean
-
-  """A list of origins allowed to interact with the API"""
-  extraOrigins: [String!]
-
-  """The type of WAN access to use for Remote Access"""
-  accessType: WAN_ACCESS_TYPE
-
-  """The type of port forwarding to use for Remote Access"""
-  forwardType: WAN_FORWARD_TYPE
-
-  """
-  The port to use for Remote Access. Not required for UPNP forwardType. Required for STATIC forwardType. Ignored if accessType is DISABLED or forwardType is UPNP.
-  """
-  port: Int
-
-  """A list of Unique Unraid Account ID's"""
-  ssoUserIds: [String!]
-}
-
-input EnableDynamicRemoteAccessInput {
-  """The URL for dynamic remote access"""
-  url: URL!
-
-  """Whether to enable or disable dynamic remote access"""
-  enabled: Boolean!
-}
-
-input ConnectSignInInput {
-  """The API key for authentication"""
-  apiKey: String!
-
-  """The ID token for authentication"""
-  idToken: String
-
-  """User information for the sign-in"""
-  userInfo: ConnectUserInfoInput
-
-  """The access token for authentication"""
-  accessToken: String
-
-  """The refresh token for authentication"""
-  refreshToken: String
-}
-
-input ConnectUserInfoInput {
-  """The preferred username of the user"""
-  preferred_username: String!
-
-  """The email address of the user"""
-  email: String!
-
-  """The avatar URL of the user"""
-  avatar: String
-}
-
-input SetupRemoteAccessInput {
-  """The type of WAN access to use for Remote Access"""
-  accessType: WAN_ACCESS_TYPE!
-
-  """The type of port forwarding to use for Remote Access"""
-  forwardType: WAN_FORWARD_TYPE
-
-  """
-  The port to use for Remote Access. Not required for UPNP forwardType. Required for STATIC forwardType. Ignored if accessType is DISABLED or forwardType is UPNP.
-  """
-  port: Int
-}
-
-input AllowedOriginInput {
-  """A list of origins allowed to interact with the API"""
-  origins: [String!]!
-}
-
-input NotificationData {
-  title: String!
-  subject: String!
-  description: String!
-  importance: NotificationImportance!
-  link: String
-}
-
-type Subscription {
-  arraySubscription: UnraidArray!
-  displaySubscription: Display!
-  infoSubscription: Info!
-  logFileSubscription(path: String!): LogFileContent!
-  notificationAdded: Notification!
-  notificationsOverview: NotificationOverview!
-  ownerSubscription: Owner!
-  registrationSubscription: Registration!
-  serversSubscription: Server!
-}
\ No newline at end of file
diff --git a/packages/unraid-api-plugin-connect/src/resolver/connect.resolver.ts b/packages/unraid-api-plugin-connect/src/resolver/connect.resolver.ts
index b632ecc93d..1fad61082c 100644
--- a/packages/unraid-api-plugin-connect/src/resolver/connect.resolver.ts
+++ b/packages/unraid-api-plugin-connect/src/resolver/connect.resolver.ts
@@ -43,4 +43,5 @@ export class ConnectResolver {
     public async settings(): Promise<ConnectSettings> {
         return {} as ConnectSettings;
     }
+
 }
diff --git a/web/components/ConnectSettings/AllowedOrigins.vue b/web/components/ConnectSettings/AllowedOrigins.vue
deleted file mode 100644
index dd28606d18..0000000000
--- a/web/components/ConnectSettings/AllowedOrigins.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts" setup>
-import { BrandButton, Input } from '@unraid/ui';
-
-import { useUnraidApiSettingsStore } from '~/store/unraidApiSettings';
-
-const apiSettingsStore = useUnraidApiSettingsStore();
-
-const originsText = ref<string>('');
-const errors = ref<string[]>([]);
-
-onMounted(async () => {
-  const allowedOriginsSettings = await apiSettingsStore.getAllowedOrigins();
-  originsText.value = allowedOriginsSettings.join(', ');
-});
-
-const origins = computed<string[]>(() => {
-  console.log('originsText.value: ' + originsText.value);
-  const newOrigins: string[] = [];
-  if (originsText.value) {
-    originsText.value.split(',').forEach((origin) => {
-      try {
-        const newUrl = new URL(origin.trim());
-        newOrigins.push(newUrl.toString());
-      } catch {
-        errors.value.push(`Invalid origin: ${origin}`);
-      }
-    });
-  }
-
-  return newOrigins;
-});
-
-const setAllowedOrigins = () => {
-  apiSettingsStore.setAllowedOrigins(origins.value);
-};
-</script>
-
-<template>
-  <div class="space-y-3 max-w-4xl">
-    <Input
-      v-model="originsText"
-      type="text"
-      placeholder="https://abc.myreverseproxy.com,https://xyz.rvrsprx.com"
-    />
-    <BrandButton type="button" variant="outline" text="Apply" @click="setAllowedOrigins()">
-    </BrandButton>
-    <div v-for="(error, index) of errors" :key="index">
-      <p>{{ error }}</p>
-    </div>
-  </div>
-</template>
diff --git a/web/components/ConnectSettings/RemoteAccess.vue b/web/components/ConnectSettings/RemoteAccess.vue
deleted file mode 100644
index 948cfba62d..0000000000
--- a/web/components/ConnectSettings/RemoteAccess.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts" setup>
-import { WanAccessType, WanForwardType } from '~/composables/gql/graphql';
-import { useUnraidApiSettingsStore } from '~/store/unraidApiSettings';
-
-const apiSettingsStore = useUnraidApiSettingsStore();
-
-const accessType = ref<WanAccessType>(WanAccessType.DISABLED);
-const forwardType = ref<WanForwardType | null>(null);
-const port = ref<number | null>(null);
-
-onMounted(async () => {
-  const remoteAccessSettings = await apiSettingsStore.getRemoteAccess();
-  accessType.value =
-    remoteAccessSettings?.accessType ?? WanAccessType.DISABLED;
-  forwardType.value = remoteAccessSettings?.forwardType ?? null;
-  port.value = remoteAccessSettings?.port ?? null;
-});
-
-const setRemoteAccess = () => {
-  apiSettingsStore.setupRemoteAccess({
-    accessType: accessType.value,
-    ...(forwardType.value ? { forwardType: forwardType.value } : {}),
-    ...(port.value ? { port: port.value } : {}),
-  });
-};
-
-watch(accessType, (newVal) => {
-  if (newVal !== WanAccessType.DISABLED) {
-    forwardType.value = WanForwardType.STATIC;
-  }
-});
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <h2>Setup Remote Access</h2>
-    <label for="forwardType">Forward Type</label>
-    <select id="accessType" v-model="accessType">
-      <option v-for="(val, index) in Object.values(WanAccessType)" :key="index" :value="val">
-        {{ val }}
-      </option>
-    </select>
-    <template v-if="accessType !== WanAccessType.DISABLED">
-      <label for="forwardType">Forward Type</label>
-      <select id="forwardType" v-model="forwardType">
-        <option v-for="(val, index) in Object.values(WanForwardType)" :key="index" :value="val">
-          {{ val }}
-        </option>
-      </select>
-    </template>
-    <template v-if="forwardType === WanForwardType.STATIC && accessType !== WanAccessType.DISABLED">
-      <label for="port">Port</label>
-      <input id="port" v-model="port" type="number">
-    </template>
-
-    <button @click="setRemoteAccess">
-      Save
-    </button>
-  </div>
-</template>
diff --git a/web/composables/gql/gql.ts b/web/composables/gql/gql.ts
index c1d698db77..6c01786a1b 100644
--- a/web/composables/gql/gql.ts
+++ b/web/composables/gql/gql.ts
@@ -48,10 +48,6 @@ type Documents = {
     "\n  fragment PartialCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n": typeof types.PartialCloudFragmentDoc,
     "\n  query serverState {\n    cloud {\n      ...PartialCloud\n    }\n    config {\n      error\n      valid\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      avatar\n      username\n    }\n    registration {\n      state\n      expiration\n      keyFile {\n        contents\n      }\n      updateExpiration\n    }\n    vars {\n      regGen\n      regState\n      configError\n      configValid\n    }\n  }\n": typeof types.ServerStateDocument,
     "\n  query getTheme {\n    publicTheme {\n      name\n      showBannerImage\n      showBannerGradient\n      headerBackgroundColor\n      showHeaderDescription\n      headerPrimaryTextColor\n      headerSecondaryTextColor\n    }\n  }\n": typeof types.GetThemeDocument,
-    "\n  query getExtraAllowedOrigins {\n    extraAllowedOrigins\n  }\n": typeof types.GetExtraAllowedOriginsDocument,
-    "\n  query getRemoteAccess {\n    remoteAccess {\n      accessType\n      forwardType\n      port\n    }\n  }\n": typeof types.GetRemoteAccessDocument,
-    "\n  mutation setAdditionalAllowedOrigins($input: AllowedOriginInput!) {\n    setAdditionalAllowedOrigins(input: $input)\n  }\n": typeof types.SetAdditionalAllowedOriginsDocument,
-    "\n    mutation setupRemoteAccess($input: SetupRemoteAccessInput!) {\n        setupRemoteAccess(input: $input)\n    }\n": typeof types.SetupRemoteAccessDocument,
 };
 const documents: Documents = {
     "\n  query PartnerInfo {\n    publicPartnerInfo {\n      hasPartnerLogo\n      partnerName\n      partnerUrl\n      partnerLogoUrl\n    }\n  }\n": types.PartnerInfoDocument,
@@ -88,10 +84,6 @@ const documents: Documents = {
     "\n  fragment PartialCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n": types.PartialCloudFragmentDoc,
     "\n  query serverState {\n    cloud {\n      ...PartialCloud\n    }\n    config {\n      error\n      valid\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      avatar\n      username\n    }\n    registration {\n      state\n      expiration\n      keyFile {\n        contents\n      }\n      updateExpiration\n    }\n    vars {\n      regGen\n      regState\n      configError\n      configValid\n    }\n  }\n": types.ServerStateDocument,
     "\n  query getTheme {\n    publicTheme {\n      name\n      showBannerImage\n      showBannerGradient\n      headerBackgroundColor\n      showHeaderDescription\n      headerPrimaryTextColor\n      headerSecondaryTextColor\n    }\n  }\n": types.GetThemeDocument,
-    "\n  query getExtraAllowedOrigins {\n    extraAllowedOrigins\n  }\n": types.GetExtraAllowedOriginsDocument,
-    "\n  query getRemoteAccess {\n    remoteAccess {\n      accessType\n      forwardType\n      port\n    }\n  }\n": types.GetRemoteAccessDocument,
-    "\n  mutation setAdditionalAllowedOrigins($input: AllowedOriginInput!) {\n    setAdditionalAllowedOrigins(input: $input)\n  }\n": types.SetAdditionalAllowedOriginsDocument,
-    "\n    mutation setupRemoteAccess($input: SetupRemoteAccessInput!) {\n        setupRemoteAccess(input: $input)\n    }\n": types.SetupRemoteAccessDocument,
 };
 
 /**
@@ -244,22 +236,6 @@ export function graphql(source: "\n  query serverState {\n    cloud {\n      ...
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  query getTheme {\n    publicTheme {\n      name\n      showBannerImage\n      showBannerGradient\n      headerBackgroundColor\n      showHeaderDescription\n      headerPrimaryTextColor\n      headerSecondaryTextColor\n    }\n  }\n"): (typeof documents)["\n  query getTheme {\n    publicTheme {\n      name\n      showBannerImage\n      showBannerGradient\n      headerBackgroundColor\n      showHeaderDescription\n      headerPrimaryTextColor\n      headerSecondaryTextColor\n    }\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n  query getExtraAllowedOrigins {\n    extraAllowedOrigins\n  }\n"): (typeof documents)["\n  query getExtraAllowedOrigins {\n    extraAllowedOrigins\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n  query getRemoteAccess {\n    remoteAccess {\n      accessType\n      forwardType\n      port\n    }\n  }\n"): (typeof documents)["\n  query getRemoteAccess {\n    remoteAccess {\n      accessType\n      forwardType\n      port\n    }\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n  mutation setAdditionalAllowedOrigins($input: AllowedOriginInput!) {\n    setAdditionalAllowedOrigins(input: $input)\n  }\n"): (typeof documents)["\n  mutation setAdditionalAllowedOrigins($input: AllowedOriginInput!) {\n    setAdditionalAllowedOrigins(input: $input)\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n    mutation setupRemoteAccess($input: SetupRemoteAccessInput!) {\n        setupRemoteAccess(input: $input)\n    }\n"): (typeof documents)["\n    mutation setupRemoteAccess($input: SetupRemoteAccessInput!) {\n        setupRemoteAccess(input: $input)\n    }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/web/composables/gql/graphql.ts b/web/composables/gql/graphql.ts
index e3a221c92f..61e7c920ae 100644
--- a/web/composables/gql/graphql.ts
+++ b/web/composables/gql/graphql.ts
@@ -129,14 +129,10 @@ export type AddRoleForApiKeyInput = {
   role: Role;
 };
 
-export type AllowedOriginInput = {
-  /** A list of origins allowed to interact with the API */
-  origins: Array<Scalars['String']['input']>;
-};
-
 export type ApiConfig = {
   __typename?: 'ApiConfig';
   extraOrigins: Array<Scalars['String']['output']>;
+  plugins: Array<Scalars['String']['output']>;
   sandbox?: Maybe<Scalars['Boolean']['output']>;
   ssoSubIds: Array<Scalars['String']['output']>;
   version: Scalars['String']['output'];
@@ -214,21 +210,6 @@ export type ApiKeyWithSecret = Node & {
   roles: Array<Role>;
 };
 
-export type ApiSettingsInput = {
-  /** The type of WAN access to use for Remote Access */
-  accessType?: InputMaybe<WanAccessType>;
-  /** A list of origins allowed to interact with the API */
-  extraOrigins?: InputMaybe<Array<Scalars['String']['input']>>;
-  /** The type of port forwarding to use for Remote Access */
-  forwardType?: InputMaybe<WanForwardType>;
-  /** The port to use for Remote Access. Not required for UPNP forwardType. Required for STATIC forwardType. Ignored if accessType is DISABLED or forwardType is UPNP. */
-  port?: InputMaybe<Scalars['Int']['input']>;
-  /** If true, the GraphQL sandbox will be enabled and available at /graphql. If false, the GraphQL sandbox will be disabled and only the production API will be available. */
-  sandbox?: InputMaybe<Scalars['Boolean']['input']>;
-  /** A list of Unique Unraid Account ID's */
-  ssoUserIds?: InputMaybe<Array<Scalars['String']['input']>>;
-};
-
 export type ArrayCapacity = {
   __typename?: 'ArrayCapacity';
   /** Capacity in number of disks */
@@ -486,20 +467,23 @@ export type ConnectSettings = Node & {
   values: ConnectSettingsValues;
 };
 
+export type ConnectSettingsInput = {
+  /** The type of WAN access to use for Remote Access */
+  accessType?: InputMaybe<WanAccessType>;
+  /** The type of port forwarding to use for Remote Access */
+  forwardType?: InputMaybe<WanForwardType>;
+  /** The port to use for Remote Access. Not required for UPNP forwardType. Required for STATIC forwardType. Ignored if accessType is DISABLED or forwardType is UPNP. */
+  port?: InputMaybe<Scalars['Int']['input']>;
+};
+
 export type ConnectSettingsValues = {
   __typename?: 'ConnectSettingsValues';
   /** The type of WAN access used for Remote Access */
   accessType: WanAccessType;
-  /** A list of origins allowed to interact with the API */
-  extraOrigins: Array<Scalars['String']['output']>;
   /** The type of port forwarding used for Remote Access */
   forwardType?: Maybe<WanForwardType>;
   /** The port used for Remote Access */
   port?: Maybe<Scalars['Int']['output']>;
-  /** If true, the GraphQL sandbox is enabled and available at /graphql. If false, the GraphQL sandbox is disabled and only the production API will be available. */
-  sandbox: Scalars['Boolean']['output'];
-  /** A list of Unique Unraid Account ID's */
-  ssoUserIds: Array<Scalars['String']['output']>;
 };
 
 export type ConnectSignInInput = {
@@ -950,6 +934,8 @@ export type MinigraphqlResponse = {
 
 export type Mutation = {
   __typename?: 'Mutation';
+  /** Add one or more plugins to the API. Returns false if restart was triggered automatically, true if manual restart is required. */
+  addPlugin: Scalars['Boolean']['output'];
   apiKey: ApiKeyMutations;
   archiveAll: NotificationOverview;
   /** Marks a notification as archived. */
@@ -971,7 +957,8 @@ export type Mutation = {
   rclone: RCloneMutations;
   /** Reads each notification to recompute & update the overview. */
   recalculateOverview: NotificationOverview;
-  setAdditionalAllowedOrigins: Array<Scalars['String']['output']>;
+  /** Remove one or more plugins from the API. Returns false if restart was triggered automatically, true if manual restart is required. */
+  removePlugin: Scalars['Boolean']['output'];
   setupRemoteAccess: Scalars['Boolean']['output'];
   unarchiveAll: NotificationOverview;
   unarchiveNotifications: NotificationOverview;
@@ -983,6 +970,11 @@ export type Mutation = {
 };
 
 
+export type MutationAddPluginArgs = {
+  input: PluginManagementInput;
+};
+
+
 export type MutationArchiveAllArgs = {
   importance?: InputMaybe<NotificationImportance>;
 };
@@ -1024,8 +1016,8 @@ export type MutationInitiateFlashBackupArgs = {
 };
 
 
-export type MutationSetAdditionalAllowedOriginsArgs = {
-  input: AllowedOriginInput;
+export type MutationRemovePluginArgs = {
+  input: PluginManagementInput;
 };
 
 
@@ -1050,7 +1042,7 @@ export type MutationUnreadNotificationArgs = {
 
 
 export type MutationUpdateApiSettingsArgs = {
-  input: ApiSettingsInput;
+  input: ConnectSettingsInput;
 };
 
 
@@ -1220,6 +1212,27 @@ export type Permission = {
   resource: Resource;
 };
 
+export type Plugin = {
+  __typename?: 'Plugin';
+  /** Whether the plugin has an API module */
+  hasApiModule?: Maybe<Scalars['Boolean']['output']>;
+  /** Whether the plugin has a CLI module */
+  hasCliModule?: Maybe<Scalars['Boolean']['output']>;
+  /** The name of the plugin package */
+  name: Scalars['String']['output'];
+  /** The version of the plugin package */
+  version: Scalars['String']['output'];
+};
+
+export type PluginManagementInput = {
+  /** Whether to treat plugins as bundled plugins. Bundled plugins are installed to node_modules at build time and controlled via config only. */
+  bundled?: Scalars['Boolean']['input'];
+  /** Array of plugin package names to add or remove */
+  names: Array<Scalars['String']['input']>;
+  /** Whether to restart the API after the operation. When false, a restart has already been queued. */
+  restart?: Scalars['Boolean']['input'];
+};
+
 export type ProfileModel = Node & {
   __typename?: 'ProfileModel';
   avatar: Scalars['String']['output'];
@@ -1255,7 +1268,6 @@ export type Query = {
   disks: Array<Disk>;
   display: Display;
   docker: Docker;
-  extraAllowedOrigins: Array<Scalars['String']['output']>;
   flash: Flash;
   info: Info;
   logFile: LogFileContent;
@@ -1267,6 +1279,8 @@ export type Query = {
   online: Scalars['Boolean']['output'];
   owner: Owner;
   parityHistory: Array<ParityCheck>;
+  /** List all installed plugins with their metadata */
+  plugins: Array<Plugin>;
   publicPartnerInfo?: Maybe<PublicPartnerInfo>;
   publicTheme: Theme;
   rclone: RCloneBackupSettings;
@@ -1645,6 +1659,14 @@ export type UnraidArray = Node & {
   state: ArrayState;
 };
 
+export type UpdateApiKeyInput = {
+  description?: InputMaybe<Scalars['String']['input']>;
+  id: Scalars['PrefixedID']['input'];
+  name?: InputMaybe<Scalars['String']['input']>;
+  permissions?: InputMaybe<Array<AddPermissionInput>>;
+  roles?: InputMaybe<Array<Role>>;
+};
+
 export type UpdateSettingsResponse = {
   __typename?: 'UpdateSettingsResponse';
   /** Whether a restart is required for the changes to take effect */
@@ -2198,30 +2220,6 @@ export type GetThemeQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetThemeQuery = { __typename?: 'Query', publicTheme: { __typename?: 'Theme', name: ThemeName, showBannerImage: boolean, showBannerGradient: boolean, headerBackgroundColor: string, showHeaderDescription: boolean, headerPrimaryTextColor: string, headerSecondaryTextColor?: string | null } };
 
-export type GetExtraAllowedOriginsQueryVariables = Exact<{ [key: string]: never; }>;
-
-
-export type GetExtraAllowedOriginsQuery = { __typename?: 'Query', extraAllowedOrigins: Array<string> };
-
-export type GetRemoteAccessQueryVariables = Exact<{ [key: string]: never; }>;
-
-
-export type GetRemoteAccessQuery = { __typename?: 'Query', remoteAccess: { __typename?: 'RemoteAccess', accessType: WanAccessType, forwardType?: WanForwardType | null, port?: number | null } };
-
-export type SetAdditionalAllowedOriginsMutationVariables = Exact<{
-  input: AllowedOriginInput;
-}>;
-
-
-export type SetAdditionalAllowedOriginsMutation = { __typename?: 'Mutation', setAdditionalAllowedOrigins: Array<string> };
-
-export type SetupRemoteAccessMutationVariables = Exact<{
-  input: SetupRemoteAccessInput;
-}>;
-
-
-export type SetupRemoteAccessMutation = { __typename?: 'Mutation', setupRemoteAccess: boolean };
-
 export const ApiKeyFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ApiKey"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ApiKey"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"roles"}},{"kind":"Field","name":{"kind":"Name","value":"permissions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"}},{"kind":"Field","name":{"kind":"Name","value":"actions"}}]}}]}}]} as unknown as DocumentNode<ApiKeyFragment, unknown>;
 export const ApiKeyWithKeyFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ApiKeyWithKey"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ApiKeyWithSecret"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"roles"}},{"kind":"Field","name":{"kind":"Name","value":"permissions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"}},{"kind":"Field","name":{"kind":"Name","value":"actions"}}]}}]}}]} as unknown as DocumentNode<ApiKeyWithKeyFragment, unknown>;
 export const NotificationFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"NotificationFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Notification"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"subject"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"importance"}},{"kind":"Field","name":{"kind":"Name","value":"link"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"timestamp"}},{"kind":"Field","name":{"kind":"Name","value":"formattedTimestamp"}}]}}]} as unknown as DocumentNode<NotificationFragmentFragment, unknown>;
@@ -2255,8 +2253,4 @@ export const ListRCloneRemotesDocument = {"kind":"Document","definitions":[{"kin
 export const ConnectSignInDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ConnectSignIn"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ConnectSignInInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"connectSignIn"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]} as unknown as DocumentNode<ConnectSignInMutation, ConnectSignInMutationVariables>;
 export const SignOutDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SignOut"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"connectSignOut"}}]}}]} as unknown as DocumentNode<SignOutMutation, SignOutMutationVariables>;
 export const ServerStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"serverState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PartialCloud"}}]}},{"kind":"Field","name":{"kind":"Name","value":"config"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}}]}},{"kind":"Field","name":{"kind":"Name","value":"info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"os"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hostname"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"owner"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}},{"kind":"Field","name":{"kind":"Name","value":"registration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"expiration"}},{"kind":"Field","name":{"kind":"Name","value":"keyFile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}},{"kind":"Field","name":{"kind":"Name","value":"updateExpiration"}}]}},{"kind":"Field","name":{"kind":"Name","value":"vars"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regGen"}},{"kind":"Field","name":{"kind":"Name","value":"regState"}},{"kind":"Field","name":{"kind":"Name","value":"configError"}},{"kind":"Field","name":{"kind":"Name","value":"configValid"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PartialCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]} as unknown as DocumentNode<ServerStateQuery, ServerStateQueryVariables>;
-export const GetThemeDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getTheme"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"publicTheme"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"showBannerImage"}},{"kind":"Field","name":{"kind":"Name","value":"showBannerGradient"}},{"kind":"Field","name":{"kind":"Name","value":"headerBackgroundColor"}},{"kind":"Field","name":{"kind":"Name","value":"showHeaderDescription"}},{"kind":"Field","name":{"kind":"Name","value":"headerPrimaryTextColor"}},{"kind":"Field","name":{"kind":"Name","value":"headerSecondaryTextColor"}}]}}]}}]} as unknown as DocumentNode<GetThemeQuery, GetThemeQueryVariables>;
-export const GetExtraAllowedOriginsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getExtraAllowedOrigins"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"extraAllowedOrigins"}}]}}]} as unknown as DocumentNode<GetExtraAllowedOriginsQuery, GetExtraAllowedOriginsQueryVariables>;
-export const GetRemoteAccessDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getRemoteAccess"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"remoteAccess"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"accessType"}},{"kind":"Field","name":{"kind":"Name","value":"forwardType"}},{"kind":"Field","name":{"kind":"Name","value":"port"}}]}}]}}]} as unknown as DocumentNode<GetRemoteAccessQuery, GetRemoteAccessQueryVariables>;
-export const SetAdditionalAllowedOriginsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"setAdditionalAllowedOrigins"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AllowedOriginInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setAdditionalAllowedOrigins"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]} as unknown as DocumentNode<SetAdditionalAllowedOriginsMutation, SetAdditionalAllowedOriginsMutationVariables>;
-export const SetupRemoteAccessDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"setupRemoteAccess"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SetupRemoteAccessInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setupRemoteAccess"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]} as unknown as DocumentNode<SetupRemoteAccessMutation, SetupRemoteAccessMutationVariables>;
\ No newline at end of file
+export const GetThemeDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getTheme"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"publicTheme"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"showBannerImage"}},{"kind":"Field","name":{"kind":"Name","value":"showBannerGradient"}},{"kind":"Field","name":{"kind":"Name","value":"headerBackgroundColor"}},{"kind":"Field","name":{"kind":"Name","value":"showHeaderDescription"}},{"kind":"Field","name":{"kind":"Name","value":"headerPrimaryTextColor"}},{"kind":"Field","name":{"kind":"Name","value":"headerSecondaryTextColor"}}]}}]}}]} as unknown as DocumentNode<GetThemeQuery, GetThemeQueryVariables>;
\ No newline at end of file
diff --git a/web/store/unraidApiSettings.fragment.ts b/web/store/unraidApiSettings.fragment.ts
deleted file mode 100644
index 821846c4c7..0000000000
--- a/web/store/unraidApiSettings.fragment.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { graphql } from '~/composables/gql/gql';
-
-export const GET_ALLOWED_ORIGINS = graphql(/* GraphQL */ `
-  query getExtraAllowedOrigins {
-    extraAllowedOrigins
-  }
-`);
-
-export const GET_REMOTE_ACCESS = graphql(/* GraphQL */ `
-  query getRemoteAccess {
-    remoteAccess {
-      accessType
-      forwardType
-      port
-    }
-  }
-`);
-
-export const SET_ADDITIONAL_ALLOWED_ORIGINS = graphql(/* GraphQL */ `
-  mutation setAdditionalAllowedOrigins($input: AllowedOriginInput!) {
-    setAdditionalAllowedOrigins(input: $input)
-  }
-`);
-
-export const SETUP_REMOTE_ACCESS = graphql(/* GraphQL */ `
-    mutation setupRemoteAccess($input: SetupRemoteAccessInput!) {
-        setupRemoteAccess(input: $input)
-    }
-`);

From 609050b5938321b982bd37925df02a82630ce7b1 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Wed, 18 Jun 2025 10:11:27 -0400
Subject: [PATCH 21/21] refactor: remove unraidApiSettings store and associated
 tests

---
 web/__test__/store/unraidApiSettings.test.ts | 111 -------------------
 web/store/unraidApiSettings.ts               |  46 --------
 2 files changed, 157 deletions(-)
 delete mode 100644 web/__test__/store/unraidApiSettings.test.ts
 delete mode 100644 web/store/unraidApiSettings.ts

diff --git a/web/__test__/store/unraidApiSettings.test.ts b/web/__test__/store/unraidApiSettings.test.ts
deleted file mode 100644
index 6d66908146..0000000000
--- a/web/__test__/store/unraidApiSettings.test.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * UnraidApiSettings store test coverage
- */
-
-import { createPinia, setActivePinia } from 'pinia';
-
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { WanAccessType, WanForwardType } from '~/composables/gql/graphql';
-import { useUnraidApiSettingsStore } from '~/store/unraidApiSettings';
-
-const mockOrigins = ['http://example.com'];
-const mockRemoteAccess = {
-  accessType: WanAccessType.ALWAYS,
-  forwardType: WanForwardType.UPNP,
-  port: 8080,
-};
-
-const mockLoadFn = vi.fn();
-const mockMutateFn = vi.fn();
-
-vi.mock('@vue/apollo-composable', () => ({
-  useLazyQuery: () => ({
-    load: mockLoadFn,
-    result: {
-      value: {
-        extraAllowedOrigins: mockOrigins,
-        remoteAccess: mockRemoteAccess,
-      },
-    },
-  }),
-  useMutation: () => ({
-    mutate: mockMutateFn.mockImplementation((args) => {
-      if (args?.input?.origins) {
-        return Promise.resolve({
-          data: {
-            setAdditionalAllowedOrigins: args.input.origins,
-          },
-        });
-      }
-      return Promise.resolve({
-        data: {
-          setupRemoteAccess: true,
-        },
-      });
-    }),
-  }),
-}));
-
-describe('UnraidApiSettings Store', () => {
-  let store: ReturnType<typeof useUnraidApiSettingsStore>;
-
-  beforeEach(() => {
-    setActivePinia(createPinia());
-    store = useUnraidApiSettingsStore();
-    vi.clearAllMocks();
-  });
-
-  describe('getAllowedOrigins', () => {
-    it('should get origins successfully', async () => {
-      const origins = await store.getAllowedOrigins();
-
-      expect(mockLoadFn).toHaveBeenCalled();
-      expect(Array.isArray(origins)).toBe(true);
-      expect(origins).toEqual(mockOrigins);
-    });
-  });
-
-  describe('setAllowedOrigins', () => {
-    it('should set origins and return the updated list of allowed origins', async () => {
-      const newOrigins = ['http://example.com', 'http://test.com'];
-      const result = await store.setAllowedOrigins(newOrigins);
-
-      expect(mockMutateFn).toHaveBeenCalledWith({
-        input: { origins: newOrigins },
-      });
-      expect(result).toEqual(newOrigins);
-    });
-  });
-
-  describe('getRemoteAccess', () => {
-    it('should get remote access configuration successfully', async () => {
-      const result = await store.getRemoteAccess();
-
-      expect(mockLoadFn).toHaveBeenCalled();
-      expect(result).toBeDefined();
-
-      if (result) {
-        expect(result).toEqual(mockRemoteAccess);
-        expect(result.accessType).toBe(WanAccessType.ALWAYS);
-        expect(result.forwardType).toBe(WanForwardType.UPNP);
-        expect(result.port).toBe(8080);
-      }
-    });
-  });
-
-  describe('setupRemoteAccess', () => {
-    it('should setup remote access successfully and return true', async () => {
-      const input = {
-        accessType: WanAccessType.ALWAYS,
-        forwardType: WanForwardType.STATIC,
-        port: 9090,
-      };
-
-      const result = await store.setupRemoteAccess(input);
-
-      expect(mockMutateFn).toHaveBeenCalledWith({ input });
-      expect(result).toBe(true);
-    });
-  });
-});
diff --git a/web/store/unraidApiSettings.ts b/web/store/unraidApiSettings.ts
deleted file mode 100644
index d21296072a..0000000000
--- a/web/store/unraidApiSettings.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { defineStore } from 'pinia';
-import { useLazyQuery, useMutation } from '@vue/apollo-composable';
-
-import type { SetupRemoteAccessInput } from '~/composables/gql/graphql';
-
-import {
-  GET_ALLOWED_ORIGINS,
-  GET_REMOTE_ACCESS,
-  SET_ADDITIONAL_ALLOWED_ORIGINS,
-  SETUP_REMOTE_ACCESS,
-} from '~/store/unraidApiSettings.fragment';
-
-export const useUnraidApiSettingsStore = defineStore('unraidApiSettings', () => {
-  const { load: loadOrigins, result: origins } = useLazyQuery(GET_ALLOWED_ORIGINS);
-
-  const { mutate: mutateOrigins } = useMutation(SET_ADDITIONAL_ALLOWED_ORIGINS);
-  const { load: loadRemoteAccess, result: remoteAccessResult } = useLazyQuery(GET_REMOTE_ACCESS);
-
-  const { mutate: setupRemoteAccessMutation } = useMutation(SETUP_REMOTE_ACCESS);
-  const getAllowedOrigins = async () => {
-    await loadOrigins();
-    return origins?.value?.extraAllowedOrigins ?? [];
-  };
-
-  const setAllowedOrigins = async (origins: string[]) => {
-    const result = await mutateOrigins({ input: { origins } });
-    return result?.data?.setAdditionalAllowedOrigins;
-  };
-
-  const getRemoteAccess = async () => {
-    await loadRemoteAccess();
-    return remoteAccessResult?.value?.remoteAccess;
-  };
-
-  const setupRemoteAccess = async (input: SetupRemoteAccessInput) => {
-    const response = await setupRemoteAccessMutation({ input });
-    return response?.data?.setupRemoteAccess;
-  };
-
-  return {
-    getAllowedOrigins,
-    setAllowedOrigins,
-    getRemoteAccess,
-    setupRemoteAccess,
-  };
-});