From d6e889979e5bf1cfe209fafe4345c0d5a7fb8ea6 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Sat, 8 Feb 2025 12:23:06 +0000
Subject: [PATCH 01/29] feat: begin adding gpu views

---
 src/components/MobileNavigation.vue      |  5 ++
 src/components/SideNavigation.vue        |  5 ++
 src/modules/gpu/components/GPUSelect.vue | 93 ++++++++++++++++++++++++
 src/modules/gpu/views/GPUDeploy.vue      | 24 ++++++
 src/modules/gpu/views/GPUList.vue        | 83 +++++++++++++++++++++
 src/router/index.js                      | 10 +++
 6 files changed, 220 insertions(+)
 create mode 100644 src/modules/gpu/components/GPUSelect.vue
 create mode 100644 src/modules/gpu/views/GPUDeploy.vue
 create mode 100644 src/modules/gpu/views/GPUList.vue

diff --git a/src/components/MobileNavigation.vue b/src/components/MobileNavigation.vue
index 819f4ed9..ac6cde43 100644
--- a/src/components/MobileNavigation.vue
+++ b/src/components/MobileNavigation.vue
@@ -51,6 +51,11 @@ export default {
           link: '/servers',
           text: 'Servers'
         },
+        {
+          _key: 'gpu',
+          link: '/gpus',
+          text: 'GPUs'
+        },
         {
           _key: 'dns',
           link: '/domains',
diff --git a/src/components/SideNavigation.vue b/src/components/SideNavigation.vue
index 3777863f..c9112d74 100644
--- a/src/components/SideNavigation.vue
+++ b/src/components/SideNavigation.vue
@@ -34,6 +34,11 @@ export default {
           link: '/servers',
           text: 'Servers'
         },
+        {
+          _key: 'gpu',
+          link: '/gpus',
+          text: 'GPUs'
+        },
         {
           _key: 'dns',
           link: '/domains',
diff --git a/src/modules/gpu/components/GPUSelect.vue b/src/modules/gpu/components/GPUSelect.vue
new file mode 100644
index 00000000..09759f65
--- /dev/null
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { defineModel } from 'vue'
+import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+
+const model = defineModel()
+
+const gpus = [
+  {
+    id: 'nvidia-a100-pcie',
+    vendorName: 'nvidia',
+    modelName: 'A100 PCI-E',
+    memoryGib: 80
+  },
+  {
+    id: 'nvidia-h100-nvl-pcie',
+    vendorName: 'nvidia',
+    modelName: 'H100 NVL PCI-E',
+    memoryGib: 96
+  }
+]
+</script>
+
+<template>
+  <RadioGroup v-model="model">
+    <RadioGroupLabel class="sr-only">GPU Model</RadioGroupLabel>
+
+    <div class="box__grid">
+      <RadioGroupOption
+        v-for="gpu in gpus"
+        v-slot="{ active, checked, disabled }"
+        as="template"
+        :disabled="disabled"
+        :key="gpu.id"
+        :value="gpu.id"
+      >
+        <div
+          :class="{ active, checked, disabled }"
+          class="radioOption"
+        >
+          <div class="flex flex-col items-center w-full">
+            <RadioGroupLabel
+              as="div"
+              class="optionTitle"
+              :class="{ active, checked, disabled }"
+            >
+              <h4 class="capitalize">{{ gpu.modelName }}</h4>
+            </RadioGroupLabel>
+          </div>
+        </div>
+      </RadioGroupOption>
+    </div>
+  </RadioGroup>
+</template>
+
+<style scoped>
+  .box__grid {
+    @apply mt-6 w-full grid grid-cols-1 gap-4;
+    @apply sm:grid-cols-1 lg:grid-cols-3;
+  }
+
+  /* radio option */
+  .radioOption {
+    @apply relative flex space-x-3 items-start p-5 border border-gray-300 rounded-md cursor-pointer;
+    @apply hover:bg-gray-100 hover:bg-opacity-50;
+    @apply focus:outline-none;
+  }
+  .radioOption.active {
+    @apply border-green border-opacity-40;
+  }
+  .radioOption.checked {
+    @apply bg-gray-100 border-green bg-opacity-75;
+    @apply ring-4 ring-green ring-opacity-10;
+  }
+  .radioOption.disabled {
+    @apply cursor-not-allowed opacity-50;
+  }
+
+  /* option title */
+  .optionTitle {
+    @apply text-center w-full;
+  }
+  .optionTitle.active {
+
+  }
+  .optionTitle.checked {
+
+  }
+
+  /* option specs */
+  .optionSpecs {
+    @apply flex flex-col items-center w-full mt-4 text-sm text-gray-500;
+  }
+</style>
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
new file mode 100644
index 00000000..335614e0
--- /dev/null
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -0,0 +1,24 @@
+<script setup>
+import GPUSelect from '../components/GPUSelect.vue'
+import { reactive } from 'vue'
+import { required } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+
+const formState = reactive({
+  gpu: ''
+})
+
+const v$ = useVuelidate({
+  gpu: [required]
+}, formState)
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <h1>Deploy a new Edge GPU</h1>
+
+    <div class="box">
+      <GPUSelect v-model="v$.gpu.$model" />
+    </div>
+  </div>
+</template>
diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
new file mode 100644
index 00000000..73f8e9dd
--- /dev/null
+++ b/src/modules/gpu/views/GPUList.vue
@@ -0,0 +1,83 @@
+<script setup>
+import ListSortingMenu from '../../../components/ListSortingMenu.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Pagination from '../../../components/Pagination.vue'
+
+const gpus = []
+
+const currentPage = 1
+const limit = 20
+const loaded = true
+const totalCount = 0
+
+const sortFields = [
+  { label: 'Name', param: 'name' },
+  { label: 'Created', param: 'created' }
+]
+
+function changePage(e) {
+  console.log(e)
+}
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <div class="flex flex-col sm:flex-row justify-between">
+      <h1>Edge GPUs</h1>
+      <router-link
+        v-if="gpus.length"
+        :to="{ name: 'ServerDeploy' }"
+        class="button button--success button--small h-full mb-5 sm:mb-0"
+      >
+        Deploy Server
+      </router-link>
+    </div>
+
+    <div v-if="!loaded" class="flex items-center">
+      <span>Loading servers</span>
+      <div class="ml-2"><LoadingSpinner /></div>
+    </div>
+
+    <ul v-else-if="gpus.length" role="list" class="gpuList">
+      <div class="float-right mb-2">
+        <ListSortingMenu
+          :fields="sortFields"
+          :query="sortQuery"
+          @update-sort="updateSortQuery"
+        />
+      </div>
+      <!--
+      <ServerListItem
+        v-for="gpu in gpus"
+        :key="gpu._key"
+        :regions=regions
+        :server=server
+      />
+      -->
+      <Pagination
+        :currentPage="currentPage"
+        :limit="limit"
+        :totalCount="totalCount"
+        @change-page="changePage"
+      />
+    </ul>
+
+    <div v-else class="box">
+      <div class="flex flex-col space-y-4 items-center justify-center py-4">
+        <p>You haven't deployed any GPUs yet. Once you deploy your first GPU it will be available here.</p>
+        <router-link
+          :to="{ name: 'Deploy GPU' }"
+          class="button button--success button--small"
+        >
+          Deploy GPU
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .gpuList {
+    @apply space-y-2;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index bc93f410..d8aa012c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -138,6 +138,16 @@ const routes = [
         name: 'Getting Started',
         component: GettingStarted
       },
+      {
+        path: 'gpus',
+        name: 'GPUs',
+        component: () => import('../modules/gpu/views/GPUList.vue')
+      },
+      {
+        path: 'gpus/deploy',
+        name: 'Deploy GPU',
+        component: () => import('../modules/gpu/views/GPUDeploy.vue')
+      },
       {
         path: 'notifications',
         name: 'Notifications',

From f4ccd1c6f2dc74ea71442d8ce3ee6ee6c91e85be Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Sat, 8 Feb 2025 12:29:02 +0000
Subject: [PATCH 02/29] chore: copy EditableTitle, Slider from vpn branch

---
 src/layout/EditableTitle.vue | 98 ++++++++++++++++++++++++++++++++++++
 src/layout/Slider.vue        | 60 ++++++++++++++++++++++
 2 files changed, 158 insertions(+)
 create mode 100644 src/layout/EditableTitle.vue
 create mode 100644 src/layout/Slider.vue

diff --git a/src/layout/EditableTitle.vue b/src/layout/EditableTitle.vue
new file mode 100644
index 00000000..a33c6b40
--- /dev/null
+++ b/src/layout/EditableTitle.vue
@@ -0,0 +1,98 @@
+<script setup>
+import LoadingSpinner from '@/components/icons/LoadingSpinner.vue'
+import { CheckIcon, PencilIcon, XIcon } from '@heroicons/vue/outline'
+import { defineEmits, defineModel, defineProps, ref, watchPostEffect } from 'vue'
+
+const emit = defineEmits(['cancel', 'edit','save'])
+
+const props = defineProps({
+  busy: Boolean,
+  disabled: Boolean,
+  invalid: Boolean,
+  placeholder: String
+})
+
+const editing = ref(false)
+const input = ref(null)
+const model = defineModel()
+const previousValue = ref(model.value)
+
+function cancel() {
+  editing.value = false
+  model.value = previousValue.value
+
+  emit('cancel')
+}
+
+function edit() {
+  editing.value = true
+
+  emit('edit')
+}
+
+function save() {
+  if (props.invalid) return
+
+  editing.value = false
+  previousValue.value = model.value
+
+  emit('save')
+}
+
+watchPostEffect(() => {
+  if (input.value) {
+    input.value.focus()
+  }
+})
+</script>
+
+<template>
+  <div v-if="editing" class="editable-title__container flex">
+    <input
+      v-model="model"
+      @keypress.enter="save"
+      class="editable-title__value"
+      :placeholder="placeholder"
+      ref="input"
+      type="text"
+    />
+
+    <div class="mt-3 flex">
+      <button class="ml-2" @click="save" :disabled="invalid || disabled">
+        <CheckIcon class="button__icon text-green hover:text-green-600" />
+      </button>
+      <button @click="cancel" class="ml-2">
+        <XIcon class="button__icon text-red hover:text-red-600" />
+      </button>
+    </div>
+  </div>
+
+  <div v-else class="editable-title__container flex">
+    <h1 class="w-max mb-0">{{ model }}</h1>
+
+    <div class="mt-3">
+      <button v-if="busy" class="ml-2" disabled>
+        <LoadingSpinner />
+      </button>
+      <button v-else class="ml-2" @click="edit" :disabled="disabled">
+        <PencilIcon class="button__icon text-gray-400 hover:text-green" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.editable-title__value {
+  @apply bg-transparent text-3xl text-gray-600 border-b border-gray-400 w-full;
+  @apply focus:outline-none focus:border-green focus:text-green;
+}
+
+.editable-title__container .button__icon {
+  @apply w-5 ml-1;
+}
+
+.editable-title__container button:disabled,
+.editable-title__container button:disabled .button__icon {
+  @apply text-gray-400 hover:no-underline;
+}
+</style>
diff --git a/src/layout/Slider.vue b/src/layout/Slider.vue
new file mode 100644
index 00000000..68871cb9
--- /dev/null
+++ b/src/layout/Slider.vue
@@ -0,0 +1,60 @@
+<script setup>
+import 'vue-slider-component/theme/antd.css'
+import VueSlider from 'vue-slider-component'
+import { defineEmits, defineModel, defineProps } from 'vue'
+
+defineProps({
+  disabled: Boolean,
+  formatter: Function,
+  marks: Object,
+  max: Number,
+  min: Number,
+  title: String,
+  tooltip: String
+})
+
+const emit = defineEmits(['change'])
+
+const model = defineModel()
+</script>
+
+<template>
+  <div class="slider__container" :class="{ disabled }">
+    <span v-if="title" class="slider__title">{{ title }}</span>
+    <vue-slider
+      v-model="model"
+      adsorb
+      tooltipPlacement="top"
+      width="100%"
+      :contained="true"
+      :disabled="disabled"
+      :dot-style="{ background: '#4ecd5f', boxShadow: '0 0 2px 1px #eee', border: 'none' }"
+      :dotSize="20"
+      :label-style="{ color: '#999', fontSize: '12px' }"
+      :marks="marks"
+      :max="max"
+      :min="min"
+      :process-style="{ background: '#4ecd5f' }"
+      :step-active-style="{ background: '#fff', opacity: '1', border: 'none', boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px' }"
+      :tooltip="tooltip || 'hover'"
+      :tooltip-formatter="formatter"
+      :tooltip-style="{ background: '#4ecd5f', borderColor: '#4ecd5f' }"
+      @change="val => emit('change', val)"
+    />
+  </div>
+</template>
+
+<style>
+.slider__container {
+  @apply relative flex space-x-3 items-start justify-center pr-5 pl-2 pt-14 pb-8 border border-gray-300 rounded-md;
+}
+
+.slider__container.disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+.slider__title {
+  @apply absolute top-0 inline-block px-3 text-gray-500 transform -translate-y-1/2 bg-white;
+}
+
+</style>

From 11b596649f1389e5fc8b144f038e7a2c93a41c83 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Sat, 8 Feb 2025 14:45:35 +0000
Subject: [PATCH 03/29] feat: add sliders to gpu deploy

---
 src/modules/gpu/components/GPUSelect.vue | 10 +++--
 src/modules/gpu/views/GPUDeploy.vue      | 53 +++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/modules/gpu/components/GPUSelect.vue b/src/modules/gpu/components/GPUSelect.vue
index 09759f65..f796bcbd 100644
--- a/src/modules/gpu/components/GPUSelect.vue
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -6,13 +6,15 @@ const model = defineModel()
 
 const gpus = [
   {
-    id: 'nvidia-a100-pcie',
+    _key: 'a100',
+    cudoId: 'nvidia-a100-pcie',
     vendorName: 'nvidia',
     modelName: 'A100 PCI-E',
     memoryGib: 80
   },
   {
-    id: 'nvidia-h100-nvl-pcie',
+    _key: 'h100',
+    cudoId: 'nvidia-h100-nvl-pcie',
     vendorName: 'nvidia',
     modelName: 'H100 NVL PCI-E',
     memoryGib: 96
@@ -30,8 +32,8 @@ const gpus = [
         v-slot="{ active, checked, disabled }"
         as="template"
         :disabled="disabled"
-        :key="gpu.id"
-        :value="gpu.id"
+        :key="gpu._key"
+        :value="gpu._key"
       >
         <div
           :class="{ active, checked, disabled }"
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index 335614e0..58862b41 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -1,15 +1,24 @@
 <script setup>
 import GPUSelect from '../components/GPUSelect.vue'
+import Slider from '../../../layout/Slider.vue'
 import { reactive } from 'vue'
 import { required } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 
 const formState = reactive({
-  gpu: ''
+  gpu: '',
+  disk: 10,
+  gpus: 1,
+  ram: 2,
+  vcpus: 1
 })
 
 const v$ = useVuelidate({
-  gpu: [required]
+  gpu: [required],
+  disk: [],
+  gpus: [],
+  ram: [],
+  vcpus: []
 }, formState)
 </script>
 
@@ -19,6 +28,46 @@ const v$ = useVuelidate({
 
     <div class="box">
       <GPUSelect v-model="v$.gpu.$model" />
+
+      <div class="grid grid-cols-2 gap-4">
+        <Slider
+          v-model="v$.gpus.$model"
+          :marks="[1,2,4,8]"
+          :max="8"
+          :min="1"
+          title="GPUs"
+          tooltip="always"
+        />
+
+        <Slider
+          v-model="v$.vcpus.$model"
+          :marks="[1,2,4,8,12,16,24,32]"
+          :max="32"
+          :min="1"
+          title="vCPUs"
+          tooltip="always"
+        />
+
+        <Slider
+          v-model="v$.ram.$model"
+          :formatter="size => `${size} GiB`"
+          :marks="[2,4,8,12,16,24,32]"
+          :max="32"
+          :min="2"
+          title="RAM (GiB)"
+          tooltip="always"
+        />
+
+        <Slider
+          v-model="v$.disk.$model"
+          :formatter="size => `${size} GiB`"
+          :marks="[10,20,50,100,200]"
+          :max="200"
+          :min="10"
+          title="Disk (GiB)"
+          tooltip="always"
+        />
+      </div>
     </div>
   </div>
 </template>

From bfc76bf9f6b60d36a0748ae2051730bd2658e57d Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 17 Feb 2025 13:37:19 +0000
Subject: [PATCH 04/29] feat: complete deploy form

---
 src/modules/gpu/components/GPUSelect.vue |   5 +-
 src/modules/gpu/views/GPUDeploy.vue      | 178 +++++++++++++++++------
 2 files changed, 137 insertions(+), 46 deletions(-)

diff --git a/src/modules/gpu/components/GPUSelect.vue b/src/modules/gpu/components/GPUSelect.vue
index f796bcbd..be536cf9 100644
--- a/src/modules/gpu/components/GPUSelect.vue
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -1,8 +1,11 @@
 <script setup>
-import { defineModel } from 'vue'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+import { defineModel, defineProps } from 'vue'
 
 const model = defineModel()
+defineProps({
+  disabled: Boolean
+})
 
 const gpus = [
   {
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index 58862b41..db4a70d8 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -1,73 +1,161 @@
 <script setup>
 import GPUSelect from '../components/GPUSelect.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Password from '../../../components/server/deploy/Password.vue'
 import Slider from '../../../layout/Slider.vue'
-import { reactive } from 'vue'
-import { required } from '@vuelidate/validators'
+import ValidationError from '../../../components/ValidationError.vue'
 import useVuelidate from '@vuelidate/core'
+import { computed, reactive, ref } from 'vue'
+import { maxValue, minLength, minValue, required } from '@vuelidate/validators'
 
 const formState = reactive({
   gpu: '',
   disk: 10,
   gpus: 1,
   ram: 2,
-  vcpus: 1
+  vcpus: 1,
+  name: '',
+  password: ''
 })
 
 const v$ = useVuelidate({
   gpu: [required],
-  disk: [],
-  gpus: [],
-  ram: [],
-  vcpus: []
+  disk: [minValue(10), maxValue(200)],
+  gpus: [minValue(1), maxValue(8)],
+  ram: [minValue(2), maxValue(32)],
+  vcpus: [minValue(1), maxValue(32)],
+  name: [required, minLength(3)],
+  password: [required, minLength(8)]
 }, formState)
+
+const busy = ref(false)
+const canDeploy = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
+
+function setPassword(value) {
+  v$.value.password.$model = value
+}
+
+async function submit() {
+  const data = {
+    gpu: v$.value.gpu.$model,
+    disk: v$.value.disk.$model,
+    gpus: v$.value.gpus.$model,
+    ram: v$.value.ram.$model,
+    vcpus: v$.value.vcpus.$model,
+    name: v$.value.name.$model,
+    password: v$.value.password.$model
+  }
+  console.log(data)
+}
 </script>
 
 <template>
   <div class="mainContent__inner">
     <h1>Deploy a new Edge GPU</h1>
 
-    <div class="box">
-      <GPUSelect v-model="v$.gpu.$model" />
+    <form class="flex flex-col col-span-12 pb-20 space-y-4" @submit.prevent="submit">
+      <div class="box">
+        <h4>Select GPU</h4>
+        <GPUSelect v-model="v$.gpu.$model" />
+        <ValidationError :errors="v$.gpu.$errors" />
+      </div>
+
+      <div class="box">
+        <h4>Specs</h4>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <Slider
+              v-model="v$.gpus.$model"
+              :disabled="busy"
+              :marks="[1,2,4,8]"
+              :max="8"
+              :min="1"
+              title="GPUs"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.gpus.$errors" />
+          </div>
 
-      <div class="grid grid-cols-2 gap-4">
-        <Slider
-          v-model="v$.gpus.$model"
-          :marks="[1,2,4,8]"
-          :max="8"
-          :min="1"
-          title="GPUs"
-          tooltip="always"
-        />
+          <div>
+            <Slider
+              v-model="v$.vcpus.$model"
+              :disabled="busy"
+              :marks="[1,2,4,8,12,16,24,32]"
+              :max="32"
+              :min="1"
+              title="vCPUs"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.vcpus.$errors" />
+          </div>
 
-        <Slider
-          v-model="v$.vcpus.$model"
-          :marks="[1,2,4,8,12,16,24,32]"
-          :max="32"
-          :min="1"
-          title="vCPUs"
-          tooltip="always"
-        />
+          <div>
+            <Slider
+              v-model="v$.ram.$model"
+              :disabled="busy"
+              :formatter="size => `${size} GiB`"
+              :marks="[2,4,8,12,16,24,32]"
+              :max="32"
+              :min="2"
+              title="RAM (GiB)"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.ram.$errors" />
+          </div>
 
-        <Slider
-          v-model="v$.ram.$model"
-          :formatter="size => `${size} GiB`"
-          :marks="[2,4,8,12,16,24,32]"
-          :max="32"
-          :min="2"
-          title="RAM (GiB)"
-          tooltip="always"
-        />
+          <div>
+            <Slider
+              v-model="v$.disk.$model"
+              :disabled="busy"
+              :formatter="size => `${size} GiB`"
+              :marks="[10,20,50,100,200]"
+              :max="200"
+              :min="10"
+              title="Disk (GiB)"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.disk.$errors" />
+          </div>
+        </div>
+      </div>
+
+      <div class="box">
+        <!-- Name -->
+        <div class="flex flex-col pb-2 space-y-6">
+          <div class="input-group">
+            <label class="label">Name</label>
+            <input
+              v-model="v$.name.$model"
+              :disabled="busy"
+              :class="busy ? 'disabled' : ''"
+              class="input input--floating"
+              placeholder="Name of your server e.g. My Edge GPU"
+              required
+              type="text"
+            />
+            <ValidationError :errors="v$.name.$errors" />
+          </div>
+        </div>
+      </div>
+
+      <div class="box">
+        <Password :disableControls="busy" @password-changed="setPassword" />
+        <ValidationError :errors="v$.password.$errors" />
+      </div>
 
-        <Slider
-          v-model="v$.disk.$model"
-          :formatter="size => `${size} GiB`"
-          :marks="[10,20,50,100,200]"
-          :max="200"
-          :min="10"
-          title="Disk (GiB)"
-          tooltip="always"
-        />
+      <div class="flex flex-col w-full space-y-2">
+        <button
+          :disabled="!canDeploy"
+          class="button button--success self-end w-full md:max-w-xs"
+          type="submit"
+        >
+          <span v-if="busy" class="flex">
+            <span>Deploying</span>
+            <span class="ml-2"><LoadingSpinner /></span>
+          </span>
+          <span v-else>Deploy</span>
+        </button>
       </div>
-    </div>
+    </form>
   </div>
 </template>

From ebbf3302d7e93aa20cb22d99b0073f201e28d900 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 10:30:43 +0000
Subject: [PATCH 05/29] feat: begin to integrate gpu endpoints

---
 src/modules/gpu/components/GPUSelect.vue | 70 ++++++++++++-----
 src/modules/gpu/views/GPUDeploy.vue      | 99 +++++++++++++++++-------
 src/modules/gpu/views/GPUDetail.vue      | 69 +++++++++++++++++
 src/router/index.js                      |  5 ++
 4 files changed, 199 insertions(+), 44 deletions(-)
 create mode 100644 src/modules/gpu/views/GPUDetail.vue

diff --git a/src/modules/gpu/components/GPUSelect.vue b/src/modules/gpu/components/GPUSelect.vue
index be536cf9..0975d722 100644
--- a/src/modules/gpu/components/GPUSelect.vue
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -1,28 +1,62 @@
 <script setup>
+/* global process */
+
+import superagent from 'superagent'
+import { useStore } from 'vuex'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
-import { defineModel, defineProps } from 'vue'
+import { defineModel, defineProps, effect, ref } from 'vue'
 
 const model = defineModel()
+const store = useStore()
+
 defineProps({
   disabled: Boolean
 })
 
-const gpus = [
-  {
-    _key: 'a100',
-    cudoId: 'nvidia-a100-pcie',
-    vendorName: 'nvidia',
-    modelName: 'A100 PCI-E',
-    memoryGib: 80
-  },
-  {
-    _key: 'h100',
-    cudoId: 'nvidia-h100-nvl-pcie',
-    vendorName: 'nvidia',
-    modelName: 'H100 NVL PCI-E',
-    memoryGib: 96
+const error = ref()
+const gpus = ref([])
+const loading = ref(true)
+
+async function reload() {
+  if (!store.state.session || !store.state.session._key) return
+
+  try {
+    loading.value = true
+    error.value = undefined
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/gpu-models`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    gpus.value = res.body
   }
-]
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+
+// const gpus = [
+//   {
+//     _key: 'a100',
+//     cudoId: 'nvidia-a100-pcie',
+//     vendorName: 'nvidia',
+//     modelName: 'A100 PCI-E',
+//     memoryGib: 80
+//   },
+//   {
+//     _key: 'h100',
+//     cudoId: 'nvidia-h100-nvl-pcie',
+//     vendorName: 'nvidia',
+//     modelName: 'H100 NVL PCI-E',
+//     memoryGib: 96
+//   }
+// ]
 </script>
 
 <template>
@@ -35,8 +69,8 @@ const gpus = [
         v-slot="{ active, checked, disabled }"
         as="template"
         :disabled="disabled"
-        :key="gpu._key"
-        :value="gpu._key"
+        :key="gpu.id"
+        :value="gpu.id"
       >
         <div
           :class="{ active, checked, disabled }"
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index db4a70d8..88dcbd0f 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -1,51 +1,83 @@
 <script setup>
+/* global process */
+
 import GPUSelect from '../components/GPUSelect.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import Password from '../../../components/server/deploy/Password.vue'
 import Slider from '../../../layout/Slider.vue'
 import ValidationError from '../../../components/ValidationError.vue'
+import { serverNameChars } from '../../../utils/validation'
+import superagent from 'superagent'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
 import { computed, reactive, ref } from 'vue'
 import { maxValue, minLength, minValue, required } from '@vuelidate/validators'
 
+const router = useRouter()
+const store = useStore()
+
 const formState = reactive({
-  gpu: '',
-  disk: 10,
-  gpus: 1,
-  ram: 2,
-  vcpus: 1,
   name: '',
+  hostname: '',
+  gpuModel: '',
+  gpuCount: 1,
+  cpuCount: 1,
+  memoryGiB: 2,
+  diskGiB: 10,
   password: ''
 })
 
 const v$ = useVuelidate({
-  gpu: [required],
-  disk: [minValue(10), maxValue(200)],
-  gpus: [minValue(1), maxValue(8)],
-  ram: [minValue(2), maxValue(32)],
-  vcpus: [minValue(1), maxValue(32)],
   name: [required, minLength(3)],
+  hostname: [required, minLength(3), serverNameChars],
+  gpuModel: [required],
+  gpuCount: [minValue(1), maxValue(8)],
+  cpuCount: [minValue(1), maxValue(32)],
+  memoryGiB: [minValue(2), maxValue(32)],
+  diskGiB: [minValue(10), maxValue(200)],
   password: [required, minLength(8)]
 }, formState)
 
 const busy = ref(false)
 const canDeploy = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
+const error = ref()
+
 
 function setPassword(value) {
   v$.value.password.$model = value
 }
 
 async function submit() {
+  if (!store.state.session || !store.state.session._key) return
+
   const data = {
-    gpu: v$.value.gpu.$model,
-    disk: v$.value.disk.$model,
-    gpus: v$.value.gpus.$model,
-    ram: v$.value.ram.$model,
-    vcpus: v$.value.vcpus.$model,
     name: v$.value.name.$model,
+    hostname: v$.value.hostname.$model,
+    gpuModel: v$.value.gpuModel.$model,
+    gpuCount: v$.value.gpuCount.$model,
+    cpuCount: v$.value.cpuCount.$model,
+    memoryGiB: v$.value.memoryGiB.$model,
+    diskGiB: v$.value.diskGiB.$model,
     password: v$.value.password.$model
   }
-  console.log(data)
+
+  try {
+    busy.value = true
+    error.value = undefined
+
+    const res = await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+      .send(data)
+
+    router.push({ name: 'GPU', params: { id: res.id } })
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
 }
 </script>
 
@@ -56,8 +88,8 @@ async function submit() {
     <form class="flex flex-col col-span-12 pb-20 space-y-4" @submit.prevent="submit">
       <div class="box">
         <h4>Select GPU</h4>
-        <GPUSelect v-model="v$.gpu.$model" />
-        <ValidationError :errors="v$.gpu.$errors" />
+        <GPUSelect v-model="v$.gpuModel.$model" />
+        <ValidationError :errors="v$.gpuModel.$errors" />
       </div>
 
       <div class="box">
@@ -65,7 +97,7 @@ async function submit() {
         <div class="grid grid-cols-2 gap-4">
           <div>
             <Slider
-              v-model="v$.gpus.$model"
+              v-model="v$.gpuCount.$model"
               :disabled="busy"
               :marks="[1,2,4,8]"
               :max="8"
@@ -73,12 +105,12 @@ async function submit() {
               title="GPUs"
               tooltip="always"
             />
-            <ValidationError :errors="v$.gpus.$errors" />
+            <ValidationError :errors="v$.gpuCount.$errors" />
           </div>
 
           <div>
             <Slider
-              v-model="v$.vcpus.$model"
+              v-model="v$.cpuCount.$model"
               :disabled="busy"
               :marks="[1,2,4,8,12,16,24,32]"
               :max="32"
@@ -86,12 +118,12 @@ async function submit() {
               title="vCPUs"
               tooltip="always"
             />
-            <ValidationError :errors="v$.vcpus.$errors" />
+            <ValidationError :errors="v$.cpuCount.$errors" />
           </div>
 
           <div>
             <Slider
-              v-model="v$.ram.$model"
+              v-model="v$.memoryGiB.$model"
               :disabled="busy"
               :formatter="size => `${size} GiB`"
               :marks="[2,4,8,12,16,24,32]"
@@ -100,12 +132,12 @@ async function submit() {
               title="RAM (GiB)"
               tooltip="always"
             />
-            <ValidationError :errors="v$.ram.$errors" />
+            <ValidationError :errors="v$.memoryGiB.$errors" />
           </div>
 
           <div>
             <Slider
-              v-model="v$.disk.$model"
+              v-model="v$.diskGiB.$model"
               :disabled="busy"
               :formatter="size => `${size} GiB`"
               :marks="[10,20,50,100,200]"
@@ -114,7 +146,7 @@ async function submit() {
               title="Disk (GiB)"
               tooltip="always"
             />
-            <ValidationError :errors="v$.disk.$errors" />
+            <ValidationError :errors="v$.diskGiB.$errors" />
           </div>
         </div>
       </div>
@@ -135,6 +167,21 @@ async function submit() {
             />
             <ValidationError :errors="v$.name.$errors" />
           </div>
+
+          <!-- Hostname -->
+          <div class="input-group">
+            <label class="label">Hostname</label>
+            <input
+              v-model="v$.hostname.$model"
+              :disabled="busy"
+              :class="busy ? 'disabled' : ''"
+              class="input input--floating"
+              placeholder="Hostname of your server e.g. my-gpu.example.com"
+              required
+              type="text"
+            />
+            <ValidationError :errors="v$.hostname.$errors" />
+          </div>
         </div>
       </div>
 
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
new file mode 100644
index 00000000..173dd51e
--- /dev/null
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -0,0 +1,69 @@
+<script setup>
+/* global process */
+
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import superagent from 'superagent'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import { effect, ref } from 'vue'
+
+const route = useRoute()
+const store = useStore()
+
+const error = ref()
+const gpu = ref()
+const loading = ref(true)
+
+async function reload() {
+  if (!route.params.id || !store.state.session || !store.state.session._key) return
+
+  try {
+    loading.value = true
+    error.value = undefined
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/${route.params.id}`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    console.log(res)
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <div class="flex flex-col sm:flex-row justify-between">
+      <h1>Edge GPU</h1>
+    </div>
+
+    <div v-if="loading" class="flex items-center">
+      <span>Loading GPU</span>
+      <div class="ml-2"><LoadingSpinner /></div>
+    </div>
+
+    <div v-else-if="gpu" class="box">
+      {{ gpu.name }}
+    </div>
+
+    <div v-else class="box">
+      <div class="flex flex-col space-y-4 items-center justify-center py-4">
+        <p>Not found</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .gpuList {
+    @apply space-y-2;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index d8aa012c..f3f6e65b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -148,6 +148,11 @@ const routes = [
         name: 'Deploy GPU',
         component: () => import('../modules/gpu/views/GPUDeploy.vue')
       },
+      {
+        path: 'gpu/:id',
+        name: 'GPU',
+        component: () => import('../modules/gpu/views/GPUDetail.vue')
+      },
       {
         path: 'notifications',
         name: 'Notifications',

From 96a454583e07bab321ed9f809f32bbe97b363db7 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 12:10:57 +0000
Subject: [PATCH 06/29] feat: integrate gpu list view

---
 src/modules/gpu/views/GPUList.vue | 117 ++++++++++++++++++++++++------
 1 file changed, 93 insertions(+), 24 deletions(-)

diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
index 73f8e9dd..79d5ab64 100644
--- a/src/modules/gpu/views/GPUList.vue
+++ b/src/modules/gpu/views/GPUList.vue
@@ -1,23 +1,55 @@
 <script setup>
-import ListSortingMenu from '../../../components/ListSortingMenu.vue'
+/* global process */
+
+// import ListSortingMenu from '../../../components/ListSortingMenu.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import Pagination from '../../../components/Pagination.vue'
+import StatusDot from '../../../components/StatusDot.vue'
+import superagent from 'superagent'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { effect, ref } from 'vue'
 
-const gpus = []
+const router = useRouter()
+const store = useStore()
 
 const currentPage = 1
+const error = ref()
+const gpus = ref([])
 const limit = 20
-const loaded = true
+const loading = ref(true)
 const totalCount = 0
 
-const sortFields = [
-  { label: 'Name', param: 'name' },
-  { label: 'Created', param: 'created' }
-]
+// const sortFields = [
+//   { label: 'Name', param: 'name' },
+//   { label: 'Created', param: 'created' }
+// ]
 
 function changePage(e) {
   console.log(e)
 }
+
+async function reload() {
+  try {
+    loading.value = true
+    error.value = undefined
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    gpus.value = res.body.vms
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
 </script>
 
 <template>
@@ -33,12 +65,13 @@ function changePage(e) {
       </router-link>
     </div>
 
-    <div v-if="!loaded" class="flex items-center">
-      <span>Loading servers</span>
+    <div v-if="loading" class="flex items-center">
+      <span>Loading GPUs</span>
       <div class="ml-2"><LoadingSpinner /></div>
     </div>
 
-    <ul v-else-if="gpus.length" role="list" class="gpuList">
+    <div v-else-if="gpus.length">
+      <!--
       <div class="float-right mb-2">
         <ListSortingMenu
           :fields="sortFields"
@@ -46,21 +79,63 @@ function changePage(e) {
           @update-sort="updateSortQuery"
         />
       </div>
-      <!--
-      <ServerListItem
-        v-for="gpu in gpus"
-        :key="gpu._key"
-        :regions=regions
-        :server=server
-      />
       -->
+      <ul role="list" class="space-y-2">
+        <li
+          v-for="gpu in gpus"
+          class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-t-8 border-gray-400 rounded-md w-full p-5 pr-8 cursor-pointer transition-all duration-100"
+          :class="{ 'border-green': gpu.status === 'active', 'border-red': gpu.status !== 'active' }"
+          :key="gpu.id"
+          @click="router.push({ name: 'GPU', params: { id: gpu.id }})"
+        >
+          <!-- Basic details -->
+          <div class="flex flex-col details overflow-hidden">
+            <!-- Name -->
+            <span class="text-md text-gray-500 truncate">{{ gpu.name }}</span>
+            <!-- IP address / hostname -->
+            <div class="flex flex-row space-x-1 text-m">
+              <span v-if="gpu.ipAddress">{{ gpu.ipAddress }}</span>
+              <span v-if="gpu.ipAddress" class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <div class="truncate" :data="gpu.hostname">{{ gpu.hostname }}</div>
+            </div>
+          </div>
+
+          <!-- Specs -->
+          <div class="flex flex-col lg:flex-shrink-0" style="flex-basis: 320px">
+            <!-- GPU model -->
+            <div class="text-md mr-2 sm:mr-0">
+              <span>{{ gpu.gpuModel }}</span>
+            </div>
+            <!-- specs -->
+            <div class="flex flex-col space-x-0 sm:flex-row sm:space-x-1.5 text-m">
+              <span>{{ gpu.cpuCount }} vCPU</span>
+              <span class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <span>{{ gpu.diskGiB }} Disk</span>
+              <span class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <span>{{ gpu.memoryGiB }} RAM</span>
+            </div>
+          </div>
+
+          <!-- Created -->
+          <div class="flex flex-col">
+            <span class="text-md mr-2 sm:mr-0">Created</span>
+            <span class="text-m">{{ gpu.created }}</span>
+          </div>
+
+          <!-- status dot -->
+          <div class="flex flex-col">
+            <span class="text-md mr-2 sm:mr-0">Status</span>
+            <StatusDot :isActive="gpu.status === 'active'" :isInactive="gpu.status !== 'active'" small :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'" />
+          </div>
+        </li>
+      </ul>
       <Pagination
         :currentPage="currentPage"
         :limit="limit"
         :totalCount="totalCount"
         @change-page="changePage"
       />
-    </ul>
+    </div>
 
     <div v-else class="box">
       <div class="flex flex-col space-y-4 items-center justify-center py-4">
@@ -75,9 +150,3 @@ function changePage(e) {
     </div>
   </div>
 </template>
-
-<style scoped>
-  .gpuList {
-    @apply space-y-2;
-  }
-</style>

From f38db8bb2b0ea8ab2c8e8dc5df96c57f2738e59c Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 12:29:00 +0000
Subject: [PATCH 07/29] feat: misc development

---
 src/modules/gpu/views/GPUDetail.vue | 192 +++++++++++++++++++++++++---
 src/modules/gpu/views/GPUList.vue   |   2 +
 2 files changed, 179 insertions(+), 15 deletions(-)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 173dd51e..b8dc818d 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -1,19 +1,35 @@
 <script setup>
 /* global process */
 
+import { ArrowLeftIcon } from '@heroicons/vue/solid'
+import EditableTitle from '../../../layout/EditableTitle.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import ValidationError from '../../../components/ValidationError.vue'
 import superagent from 'superagent'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
-import { effect, ref } from 'vue'
+import useVuelidate from '@vuelidate/core'
+import { effect, reactive, ref } from 'vue'
+import { minLength, required } from '@vuelidate/validators'
+import StatusDot from '../../../components/StatusDot.vue'
 
 const route = useRoute()
 const store = useStore()
 
+const busy = ref(false)
+const disabled = ref(false)
 const error = ref()
 const gpu = ref()
 const loading = ref(true)
 
+const formState = reactive({
+  name: ''
+})
+
+const v$ = useVuelidate({
+  name: [required, minLength(3)]
+}, formState)
+
 async function reload() {
   if (!route.params.id || !store.state.session || !store.state.session._key) return
 
@@ -24,7 +40,8 @@ async function reload() {
     const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/${route.params.id}`)
       .set('Authorization', `Bearer ${store.state.session._key}`)
 
-    console.log(res)
+    gpu.value = res.body
+    reset()
   }
   catch (err) {
     error.value = err
@@ -34,36 +51,181 @@ async function reload() {
   }
 }
 
+function reset() {
+  v$.value.name.$model = gpu.value.name
+}
+
+/** @todo */
+async function updateName() {
+  console.log(v$.value.name.$model)
+}
+
 effect(() => {
   reload()
 })
 </script>
 
 <template>
-  <div class="mainContent__inner">
-    <div class="flex flex-col sm:flex-row justify-between">
-      <h1>Edge GPU</h1>
+  <div v-if="loading" class="mainContent__inner pt-0 mt-6">
+    <div class="flex items-center">
+      <span>Loading GPU</span>
+      <LoadingSpinner />
     </div>
+  </div>
 
-    <div v-if="loading" class="flex items-center">
-      <span>Loading GPU</span>
-      <div class="ml-2"><LoadingSpinner /></div>
+  <div v-else-if="error">
+    <div class="box">
+      <div class="flex flex-col items-center justify-center text-center">
+        <div class="flex items-center mt-4">
+          <h4>Error</h4>
+        </div>
+        <p class="mt-3 mb-1 text-gray-500">{{ error.message }}</p>
+        <router-link :to="{ name: 'GPUs' }" class="mt-4 button button--success button--small">
+          <span>Return to Edge GPUs</span>
+        </router-link>
+      </div>
+    </div>
+  </div>
+
+  <div v-else-if="gpu" class="mainContent__inner pt-0 mt-6">
+    <!-- Backlink -->
+    <div class="w-max">
+      <router-link :to="{ name: 'GPUs' }" class="flex items-center space-x-1 hover:text-green mb-4">
+        <ArrowLeftIcon class="w-4" /><span>GPUs</span>
+      </router-link>
     </div>
 
-    <div v-else-if="gpu" class="box">
-      {{ gpu.name }}
+    <!-- Name -->
+    <EditableTitle
+      v-model="v$.name.$model"
+      :busy="busy || loading"
+      :disabled="busy || disabled"
+      :invalid="v$.name.$invalid"
+      @save="updateName"
+    />
+    <ValidationError :errors="v$.name.$errors" />
+
+    <!-- IP address and hostname -->
+    <div
+      class="flex items-center mt-1 text-gray-500 truncate collapse sub-header"
+      :class="gpu.ipAddress ? 'space-x-2' : ''"
+    >
+      <span v-if="gpu.ipAddress">{{ gpu.ipAddress }}</span>
+      <span v-if="gpu.ipAddress" class="divider"/>
+      <span class="truncate">{{ gpu.hostname }}</span>
     </div>
 
-    <div v-else class="box">
-      <div class="flex flex-col space-y-4 items-center justify-center py-4">
-        <p>Not found</p>
+    <!-- Overview and power toggle -->
+    <div class="flex items-center mt-3 space-x-3 text-gray-500 md:justify-between sm:mt-4 collapse status-row">
+      <div class="relative flex-1">
+        <div class="flex items-center justify-start space-x-2 collapse gpu-info">
+          <div class="flex items-center flex-shrink-0 space-x-1 text-gray-900">
+            <span class="gpu-detail">{{ gpu.gpuModel }}</span>
+          </div>
+          <span class="divider"/>
+          <div class="flex items-center space-x-2 flex-shrink-0 specs">
+            <span class="gpu-detail">{{ gpu.gpuCount }} GPU</span>
+            <span class="divider"/>
+            <span class="gpu-detail">{{ gpu.cpuCount }} vCPU</span>
+            <span class="divider"/>
+            <span class="gpu-detail">{{ gpu.diskGiB }} Disk</span>
+            <span class="divider"/>
+            <span class="gpu-detail">{{ gpu.memoryGiB }} RAM</span>
+          </div>
+          <span class="divider"/>
+          <div class="flex items-center space-x-1">
+            <StatusDot
+              :isActive="gpu.status === 'active'"
+              :isInactive="gpu.status !== 'active'"
+              :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="flex-shrink-0" v-if="!isDestroyed && !isCrashed">
+        <ServerPowerToggle
+          :activeTasks=activeTasks
+          :disableActions=disableActions
+          :server=server
+        />
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="mainContent__inner pt-0 mt-6">
+    <div class="box">
+      <div class="flex flex-col items-center justify-center text-center">
+        <div class="flex items-center mt-4">
+          <h4>GPU not found</h4>
+        </div>
+        <p class="mt-3 mb-1 text-gray-500">This GPU does not exist or has been destroyed.</p>
+        <router-link :to="{ name: 'GPUs' }" class="mt-4 button button--success button--small">
+          <span>Return to Edge GPUs</span>
+        </router-link>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-  .gpuList {
-    @apply space-y-2;
+.divider {
+  @apply h-4 bg-gray-400 w-px flex-shrink-0;
+}
+
+@media (max-width: 450px) {
+  .collapse.sub-header {
+    @apply flex-col space-x-0 items-start;
   }
+  .collapse .divider {
+    @apply hidden;
+  }
+  .collapse .specs {
+    @apply flex-col items-start space-x-0
+  }
+  .collapse .specs .divider {
+    @apply hidden;
+  }
+}
+
+@media (min-width: 450px) and (max-width: 650px) {
+  .collapse .specs .divider {
+    @apply block
+  }
+  .collapse.sub-header .divider {
+    @apply block
+  }
+}
+
+@media (max-width: 650px) {
+  .collapse.gpu-info {
+    @apply flex-col items-start space-x-0 space-y-1;
+  }
+  .collapse .sub-header {
+    @apply flex-col space-x-0 items-start;
+  }
+  .collapse .divider {
+    @apply hidden;
+  }
+}
+
+@screen md {
+  .collapse.gpu-info {
+    @apply flex-col items-start space-x-0 space-y-1;
+  }
+  .collapse.gpu-info .divider {
+    @apply hidden;
+  }
+  .collapse .specs .divider {
+    @apply block
+  }
+}
+
+@screen lg {
+  .collapse.gpu-info {
+    @apply flex-row items-center space-x-2 space-y-0;
+  }
+  .collapse.gpu-info .divider {
+    @apply block;
+  }
+}
 </style>
diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
index 79d5ab64..88f39664 100644
--- a/src/modules/gpu/views/GPUList.vue
+++ b/src/modules/gpu/views/GPUList.vue
@@ -108,6 +108,8 @@ effect(() => {
             </div>
             <!-- specs -->
             <div class="flex flex-col space-x-0 sm:flex-row sm:space-x-1.5 text-m">
+              <span>{{ gpu.gpuCount }} GPU</span>
+              <span class="h-full bg-gray-400 block" style="width: 1px"></span>
               <span>{{ gpu.cpuCount }} vCPU</span>
               <span class="h-full bg-gray-400 block" style="width: 1px"></span>
               <span>{{ gpu.diskGiB }} Disk</span>

From 3000fa62c08aea9cacc67a08d9bde8b3120c9099 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 14:29:54 +0000
Subject: [PATCH 08/29] feat: add gpu overview

---
 src/layout/PowerToggle.vue          |  46 +++++++
 src/modules/gpu/views/GPUDetail.vue | 202 ++++++++++++++++++++++++++--
 2 files changed, 238 insertions(+), 10 deletions(-)
 create mode 100644 src/layout/PowerToggle.vue

diff --git a/src/layout/PowerToggle.vue b/src/layout/PowerToggle.vue
new file mode 100644
index 00000000..427d4cd4
--- /dev/null
+++ b/src/layout/PowerToggle.vue
@@ -0,0 +1,46 @@
+<script setup>
+import LoadingSpinner from '../components/icons/LoadingSpinner.vue'
+import { Switch } from '@headlessui/vue'
+import { defineEmits, defineModel, defineProps } from 'vue'
+
+const emit = defineEmits(['click'])
+
+/** v-model must be a Boolean ref! */
+const model = defineModel()
+
+defineProps({
+  busy: Boolean,
+  disabled: Boolean,
+  offText: String,
+  on: Boolean,
+  onText: String
+})
+</script>
+
+<template>
+  <Switch
+    v-model="model"
+    class="relative inline-flex flex-shrink-0 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-16 md:w-20 h-7 md:h-8 focus:outline-none"
+    :class="model ? 'bg-green' : 'bg-gray-300'"
+    :disabled="busy || disabled"
+    @click="emit('click', !model)"
+  >
+    <span class="sr-only">Status</span>
+
+    <span v-if="model" class="absolute w-full h-full flex items-center text-xs leading-none justify-start text-white pl-3 md:pl-4">
+      <span v-if="busy">
+        <LoadingSpinner />
+      </span>
+      <span v-else>{{ onText || 'ON' }}</span>
+    </span>
+    <span v-else class="absolute w-full h-full flex items-center text-xs leading-none justify-end text-gray-500 pr-2.5 md:pr-3.5">
+      <span v-if="busy">
+        <LoadingSpinner />
+      </span>
+      <span v-else>{{ offText || 'OFF' }}</span>
+    </span>
+
+    <span v-if="model" aria-hidden class="translate-x-9 md:translate-x-12 transform inline-block w-6 h-6 md:w-7 md:h-7 transition duration-200 ease-in-out bg-white rounded-full shadow-lg pointer-events-none ring-0"/>
+    <span v-else aria-hidden class="translate-x-0 transform inline-block w-6 h-6 md:w-7 md:h-7 transition duration-200 ease-in-out bg-white rounded-full shadow-lg pointer-events-none ring-0"/>
+  </Switch>
+</template>
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index b8dc818d..4ac87b91 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -1,17 +1,19 @@
 <script setup>
 /* global process */
 
-import { ArrowLeftIcon } from '@heroicons/vue/solid'
 import EditableTitle from '../../../layout/EditableTitle.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import PowerToggle from '../../../layout/PowerToggle.vue'
+import StatusDot from '../../../components/StatusDot.vue'
 import ValidationError from '../../../components/ValidationError.vue'
 import superagent from 'superagent'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
+import { ArrowLeftIcon, DuplicateIcon } from '@heroicons/vue/solid'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { effect, reactive, ref } from 'vue'
 import { minLength, required } from '@vuelidate/validators'
-import StatusDot from '../../../components/StatusDot.vue'
 
 const route = useRoute()
 const store = useStore()
@@ -23,11 +25,13 @@ const gpu = ref()
 const loading = ref(true)
 
 const formState = reactive({
-  name: ''
+  name: '',
+  active: true
 })
 
 const v$ = useVuelidate({
-  name: [required, minLength(3)]
+  name: [required, minLength(3)],
+  active: []
 }, formState)
 
 async function reload() {
@@ -53,6 +57,17 @@ async function reload() {
 
 function reset() {
   v$.value.name.$model = gpu.value.name
+  v$.value.active.$model = gpu.value.status === 'active'
+
+  v$.value.$reset()
+}
+
+async function togglePower(toActive) {
+  console.log(toActive)
+  busy.value = true
+  setTimeout(() => {
+    busy.value = false
+  }, 5000)
 }
 
 /** @todo */
@@ -142,14 +157,103 @@ effect(() => {
           </div>
         </div>
       </div>
-      <div class="flex-shrink-0" v-if="!isDestroyed && !isCrashed">
-        <ServerPowerToggle
-          :activeTasks=activeTasks
-          :disableActions=disableActions
-          :server=server
-        />
+
+      <div class="flex-shrink-0">
+        <PowerToggle v-model="v$.active.$model" :busy="busy" @click="togglePower" />
       </div>
     </div>
+
+    <div class="mt-4 space-x-10">
+      <!-- Tabs -->
+      <TabGroup as="div" class="tabGroup">
+        <div class="absolute top-0 right-0 w-10 h-5 bg-gradient-to-l from-gray-200" />
+        <TabList class="tabs pr-6">
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Overview</button>
+          </Tab>
+        </TabList>
+
+        <TabPanels class="mt-4">
+          <!-- Overview -->
+          <TabPanel>
+            <div class="grid gap-4 xl:grid-cols-2">
+              <div class="box overflow_hidden server__details xl:col-span-2">
+                <h4 class="section__title">Details</h4>
+                <div class="overview__grid">
+                  <!-- Name, hostname, IP address -->
+                  <div class="grid__col col__1">
+                    <div class="info__section">
+                      <span class="label">Name</span><span class="info">{{ gpu.name }}</span>
+                    </div>
+                    <div class="info__section">
+                      <span class="label">Hostname</span><span class="info">{{ gpu.hostname }}</span>
+                    </div>
+                    <div class="info__section">
+                      <span class="label">IP Address</span>
+                      <div class="relative flex w-max">
+                        <span>{{ gpu.ipAddress }}</span>
+                        <!--
+                        <button
+                          @click.prevent="copyToClipboard(gpu.ipAddress)"
+                          class="text-gray-400 hover:text-green"
+                        >
+                          <DuplicateIcon class="ml-2 w-5 h-5" />
+                        </button>
+                        <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
+                        -->
+                      </div>
+                    </div>
+                  </div>
+                  <div class="grid__col col__2">
+                    <div class="info__section">
+                      <span class="label">Status</span>
+                      <span class="info">
+                        <StatusDot
+                          :isActive="gpu.status === 'active'"
+                          :isInactive="gpu.status !== 'active'"
+                          :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'"
+                        />
+                      </span>
+                    </div>
+                    <div class="info__section">
+                      <span class="label">Created</span>
+                      <span class="info">{{ gpu.created }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="box overflow_hidden server__specs">
+                <h4 class="section__title">GPU specs</h4>
+                <!-- vcpus, ram, disk, bandwidth -->
+                <div class="overview__grid">
+                  <div class="info__section col-span-2 lg:col-span-4">
+                    <span class="label">GPU Model</span>
+                    <span class="info">{{ gpu.gpuModel }}</span>
+                  </div>
+                  <div class="info__section">
+                    <span class="label">GPU</span>
+                    <span class="info">{{ gpu.gpuCount }}</span>
+                  </div>
+                  <div class="info__section">
+                    <span class="label">vCPUs</span>
+                    <span class="info">{{ gpu.cpuCount }}</span>
+                  </div>
+                  <div class="info__section">
+                    <span class="label">RAM</span>
+                    <span class="info">{{ gpu.memoryGiB }}</span>
+                  </div>
+                  <div class="info__section">
+                    <span class="label">Disk</span>
+                    <span class="info">{{ gpu.diskGiB }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </div>
   </div>
 
   <div v-else class="mainContent__inner pt-0 mt-6">
@@ -228,4 +332,82 @@ effect(() => {
     @apply block;
   }
 }
+
+.section__title {
+  @apply mb-4;
+}
+.overview__grid {
+  @apply grid grid-cols-1 gap-y-4;
+}
+.grid__col {
+  @apply flex flex-col space-y-4
+}
+.info__section {
+  @apply flex overflow-hidden w-full;
+}
+.label {
+  @apply font-bold block mr-2 flex-shrink-0 w-24;
+}
+.server__details .info__section {
+  @apply flex-col;
+}
+
+.info {
+  @apply flex-shrink-0 truncate w-full;
+}
+
+.copied {
+  @apply absolute pointer-events-none opacity-0 top-0 left-0 flex items-center justify-center w-full h-full font-medium bg-white bg-opacity-95 text-green;
+  @apply transition-opacity duration-200 ease-in;
+}
+.copied.visible {
+  @apply opacity-100;
+}
+
+@media (max-width: 450px) {
+  .server__details .info__section {
+    @apply flex-col;
+  }
+}
+
+@media (min-width: 450px) {
+  .server__details .info__section {
+    @apply flex-row;
+  }
+
+  .server__specs .overview__grid, .server__costs .overview__grid {
+    @apply grid-cols-2;
+  }
+  .server__specs .label, .server__costs .label {
+    @apply w-20;
+  }
+
+  /* .overview__grid {
+    @apply grid-cols-2
+  } */
+}
+@screen lg {
+  .server__specs .overview__grid {
+    @apply grid-cols-4;
+  }
+  .server__specs .label {
+    @apply w-max;
+  }
+  .server__costs .label {
+    @apply w-max;
+  }
+}
+@screen xl {
+  .server__details .overview__grid {
+    @apply grid-cols-2
+  }
+  .server__specs .overview__grid {
+    @apply grid-cols-2
+  }
+}
+@screen 2xl {
+  .server__specs .overview__grid {
+    grid-template-columns: repeat(3, 1fr) auto;
+  }
+}
 </style>

From 3ef9b282163ab8fa3b5c0a075b0367a615aee014 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 15:06:51 +0000
Subject: [PATCH 09/29] feat: working power toggle, misc fixes

---
 src/modules/gpu/views/GPUDeploy.vue |  3 +-
 src/modules/gpu/views/GPUDetail.vue | 50 ++++++++++++++++++++++++++---
 src/modules/gpu/views/GPUList.vue   |  4 +--
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index 88dcbd0f..d822d117 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -43,7 +43,6 @@ const busy = ref(false)
 const canDeploy = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
 const error = ref()
 
-
 function setPassword(value) {
   v$.value.password.$model = value
 }
@@ -70,7 +69,7 @@ async function submit() {
       .set('Authorization', `Bearer ${store.state.session._key}`)
       .send(data)
 
-    router.push({ name: 'GPU', params: { id: res.id } })
+    router.push({ name: 'GPU', params: { id: res.body.id } })
   }
   catch (err) {
     error.value = err
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 4ac87b91..991b2429 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -23,6 +23,7 @@ const disabled = ref(false)
 const error = ref()
 const gpu = ref()
 const loading = ref(true)
+const poll = ref()
 
 const formState = reactive({
   name: '',
@@ -62,12 +63,49 @@ function reset() {
   v$.value.$reset()
 }
 
+function stopPoll() {
+  if (poll.value) {
+    clearInterval(poll.value)
+    poll.value = undefined
+  }
+}
+
+function startPoll(cb) {
+  if (poll.value) return
+  poll.value = setInterval(() => {
+    reload().then(() => {
+      cb?.()
+    })
+  }, 5000)
+}
+
 async function togglePower(toActive) {
-  console.log(toActive)
-  busy.value = true
-  setTimeout(() => {
+  if (!gpu.value) return
+  if (!store.state.session || !store.state.session._key) return
+
+  try {
+    busy.value = true
+
+    if (toActive) {
+      await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/start/${gpu.value.id}`)
+        .set('Authorization', `Bearer ${store.state.session._key}`)
+    }
+    else {
+      await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/stop/${gpu.value.id}`)
+        .set('Authorization', `Bearer ${store.state.session._key}`)
+    }
+
+    startPoll(() => {
+      if (gpu.value.status === 'active' || gpu.value.status === 'stopped') {
+        stopPoll()
+        busy.value = false
+      }
+    })
+  }
+  catch (err) {
+    error.value = err
     busy.value = false
-  }, 5000)
+  }
 }
 
 /** @todo */
@@ -77,6 +115,10 @@ async function updateName() {
 
 effect(() => {
   reload()
+
+  return () => {
+    stopPoll()
+  }
 })
 </script>
 
diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
index 88f39664..15299698 100644
--- a/src/modules/gpu/views/GPUList.vue
+++ b/src/modules/gpu/views/GPUList.vue
@@ -58,10 +58,10 @@ effect(() => {
       <h1>Edge GPUs</h1>
       <router-link
         v-if="gpus.length"
-        :to="{ name: 'ServerDeploy' }"
+        :to="{ name: 'Deploy GPU' }"
         class="button button--success button--small h-full mb-5 sm:mb-0"
       >
-        Deploy Server
+        Deploy GPU
       </router-link>
     </div>
 

From be39e28ce21a92724666261414205053d9e2e315 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 15:38:17 +0000
Subject: [PATCH 10/29] feat: more polling fixes, add ip address copy

---
 src/modules/gpu/views/GPUDetail.vue | 40 ++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 991b2429..278e035d 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -10,7 +10,7 @@ import superagent from 'superagent'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
-import { ArrowLeftIcon, DuplicateIcon } from '@heroicons/vue/solid'
+import { ArrowLeftIcon, DuplicateIcon } from '@heroicons/vue/outline'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { effect, reactive, ref } from 'vue'
 import { minLength, required } from '@vuelidate/validators'
@@ -19,6 +19,7 @@ const route = useRoute()
 const store = useStore()
 
 const busy = ref(false)
+const copied = ref(false)
 const disabled = ref(false)
 const error = ref()
 const gpu = ref()
@@ -35,6 +36,15 @@ const v$ = useVuelidate({
   active: []
 }, formState)
 
+async function copyToClipboard(str) {
+  await navigator.clipboard.writeText(str)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 1000)
+}
+
 async function reload() {
   if (!route.params.id || !store.state.session || !store.state.session._key) return
 
@@ -67,14 +77,20 @@ function stopPoll() {
   if (poll.value) {
     clearInterval(poll.value)
     poll.value = undefined
+    busy.value = false
   }
 }
 
-function startPoll(cb) {
+function startPoll() {
   if (poll.value) return
+  busy.value = true
+
   poll.value = setInterval(() => {
     reload().then(() => {
-      cb?.()
+      if (gpu.value.status === 'active' || gpu.value.status === 'stopped') {
+        stopPoll()
+        busy.value = false
+      }
     })
   }, 5000)
 }
@@ -84,8 +100,6 @@ async function togglePower(toActive) {
   if (!store.state.session || !store.state.session._key) return
 
   try {
-    busy.value = true
-
     if (toActive) {
       await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/start/${gpu.value.id}`)
         .set('Authorization', `Bearer ${store.state.session._key}`)
@@ -95,16 +109,10 @@ async function togglePower(toActive) {
         .set('Authorization', `Bearer ${store.state.session._key}`)
     }
 
-    startPoll(() => {
-      if (gpu.value.status === 'active' || gpu.value.status === 'stopped') {
-        stopPoll()
-        busy.value = false
-      }
-    })
+    startPoll()
   }
   catch (err) {
     error.value = err
-    busy.value = false
   }
 }
 
@@ -114,7 +122,11 @@ async function updateName() {
 }
 
 effect(() => {
-  reload()
+  reload().then(() => {
+    if (gpu.value.status !== 'active' && gpu.value.status !== 'stopped') {
+      startPoll()
+    }
+  })
 
   return () => {
     stopPoll()
@@ -234,7 +246,6 @@ effect(() => {
                       <span class="label">IP Address</span>
                       <div class="relative flex w-max">
                         <span>{{ gpu.ipAddress }}</span>
-                        <!--
                         <button
                           @click.prevent="copyToClipboard(gpu.ipAddress)"
                           class="text-gray-400 hover:text-green"
@@ -242,7 +253,6 @@ effect(() => {
                           <DuplicateIcon class="ml-2 w-5 h-5" />
                         </button>
                         <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
-                        -->
                       </div>
                     </div>
                   </div>

From 70afe71fc595f9f6061b0815d2eea39763bda08e Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 15:40:31 +0000
Subject: [PATCH 11/29] fix: gpu list design

---
 src/modules/gpu/views/GPUList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
index 15299698..11b10c9f 100644
--- a/src/modules/gpu/views/GPUList.vue
+++ b/src/modules/gpu/views/GPUList.vue
@@ -83,7 +83,7 @@ effect(() => {
       <ul role="list" class="space-y-2">
         <li
           v-for="gpu in gpus"
-          class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-t-8 border-gray-400 rounded-md w-full p-5 pr-8 cursor-pointer transition-all duration-100"
+          class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-l-8 border-gray-400 rounded-md w-full p-5 pr-8 cursor-pointer transition-all duration-100"
           :class="{ 'border-green': gpu.status === 'active', 'border-red': gpu.status !== 'active' }"
           :key="gpu.id"
           @click="router.push({ name: 'GPU', params: { id: gpu.id }})"

From 4d24187b9ac136fc5120d8bebe265fd9093b74e9 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 15:46:53 +0000
Subject: [PATCH 12/29] fix: flickering while polling; name change validation

---
 src/modules/gpu/views/GPUDetail.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 278e035d..c862c663 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -13,7 +13,7 @@ import useVuelidate from '@vuelidate/core'
 import { ArrowLeftIcon, DuplicateIcon } from '@heroicons/vue/outline'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { effect, reactive, ref } from 'vue'
-import { minLength, required } from '@vuelidate/validators'
+import { helpers, minLength, required } from '@vuelidate/validators'
 
 const route = useRoute()
 const store = useStore()
@@ -32,7 +32,7 @@ const formState = reactive({
 })
 
 const v$ = useVuelidate({
-  name: [required, minLength(3)],
+  name: [required, minLength(3), helpers.withMessage('Currently unable to change GPU name. This feature is coming soon', () => false)],
   active: []
 }, formState)
 
@@ -135,7 +135,7 @@ effect(() => {
 </script>
 
 <template>
-  <div v-if="loading" class="mainContent__inner pt-0 mt-6">
+  <div v-if="!gpu && loading" class="mainContent__inner pt-0 mt-6">
     <div class="flex items-center">
       <span>Loading GPU</span>
       <LoadingSpinner />

From 1471e8015123ae0c56bc6597383d1b46d3347352 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 15:48:54 +0000
Subject: [PATCH 13/29] fix: clear validation error on name edit

---
 src/modules/gpu/views/GPUDetail.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index c862c663..ec2a8bc9 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -170,6 +170,7 @@ effect(() => {
       :busy="busy || loading"
       :disabled="busy || disabled"
       :invalid="v$.name.$invalid"
+      @cancel="v$.name.$reset()"
       @save="updateName"
     />
     <ValidationError :errors="v$.name.$errors" />

From 1a0e41ec9be9af470a2a107066d92f6ba48e5aab Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 17:38:21 +0000
Subject: [PATCH 14/29] feat: implement destroy gpu flow

---
 .../gpu/components/GPUDestroyPanel.vue        |  77 ++++++++
 .../gpu/components/GPUOverviewPanel.vue       | 175 ++++++++++++++++++
 src/modules/gpu/views/GPUDetail.vue           | 151 +++++++--------
 3 files changed, 314 insertions(+), 89 deletions(-)
 create mode 100644 src/modules/gpu/components/GPUDestroyPanel.vue
 create mode 100644 src/modules/gpu/components/GPUOverviewPanel.vue

diff --git a/src/modules/gpu/components/GPUDestroyPanel.vue b/src/modules/gpu/components/GPUDestroyPanel.vue
new file mode 100644
index 00000000..f7761e51
--- /dev/null
+++ b/src/modules/gpu/components/GPUDestroyPanel.vue
@@ -0,0 +1,77 @@
+<script setup>
+// import HttpError from '../../../components/HttpError.vue'
+import { ExclamationIcon } from '@heroicons/vue/outline'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Modal from '../../../components/Modal.vue'
+import { defineEmits, defineProps, ref } from 'vue'
+
+const emit = defineEmits(['destroy'])
+
+defineProps({
+  busy: Boolean,
+  disabled: Boolean,
+  gpu: Object
+})
+
+const showModal = ref(false)
+
+function toggleModal() {
+  showModal.value = !showModal.value
+}
+</script>
+
+<template>
+  <div class="pb-20">
+    <div class="box">
+      <h4>Destroy GPU</h4>
+      <p class="mt-3 mb-1 text-gray-500">This is irreversible. All data will be irretrievable.</p>
+      <p class="text-gray-500">Upon destruction, you will no longer be billed for this GPU.</p>
+      <div class="flex flex-col space-y-2">
+        <button
+          class="mt-4 button button--error button--small w-full md:max-w-xs"
+          :disabled="disabled"
+          @click.prevent="toggleModal"
+        >
+          <div v-if="busy" class="flex">
+            <span>Destroying</span>
+            <span class="ml-2"><LoadingSpinner /></span>
+          </div>
+          <span v-else>Destroy this GPU</span>
+        </button>
+
+        <!--<HttpError :error=httpError />-->
+      </div>
+    </div>
+    <!-- destroy confirmation modal -->
+    <Modal v-if="showModal">
+      <template v-slot:icon>
+        <ExclamationIcon class="w-8 h-8" aria-hidden="true" />
+      </template>
+      <template v-slot:header>
+        <span>Destroy {{ gpu.name }}</span>
+      </template>
+      <template v-slot:body>
+        <span class="font-semibold">Warning: this cannot be undone.</span>
+        <div class="flex flex-col space-y-2 pt-4">
+          <li>All data will be lost and cannot be recovered</li>
+          <li>Server will be powered off immediately</li>
+          <li>IP Address will be unassigned</li>
+        </div>
+      </template>
+      <template v-slot:buttons>
+        <button
+          class="w-full mt-3 button button--small button--outline sm:mt-0"
+          @click="toggleModal"
+        >
+          Cancel
+        </button>
+        <button
+          class="w-full button button--small button--error"
+          @click="emit('destroy')"
+        >
+          Yes, Destroy GPU
+        </button>
+      </template>
+    </Modal>
+  </div>
+</template>
diff --git a/src/modules/gpu/components/GPUOverviewPanel.vue b/src/modules/gpu/components/GPUOverviewPanel.vue
new file mode 100644
index 00000000..d776129b
--- /dev/null
+++ b/src/modules/gpu/components/GPUOverviewPanel.vue
@@ -0,0 +1,175 @@
+<script setup>
+import { DuplicateIcon } from '@heroicons/vue/outline'
+import StatusDot from '../../../components/StatusDot.vue'
+import { defineProps, ref } from 'vue'
+
+defineProps({
+  gpu: Object
+})
+
+const copied = ref(false)
+
+async function copyToClipboard(str) {
+  await navigator.clipboard.writeText(str)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 1000)
+}
+</script>
+
+<template>
+  <div class="grid gap-4 xl:grid-cols-2">
+    <div class="box overflow_hidden gpu-details xl:col-span-2">
+      <h4 class="section__title">Details</h4>
+      <div class="overview__grid">
+        <!-- Name, hostname, IP address -->
+        <div class="grid__col col__1">
+          <div class="info__section">
+            <span class="label">Name</span><span class="info">{{ gpu.name }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">Hostname</span><span class="info">{{ gpu.hostname }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">IP Address</span>
+            <div class="relative flex w-max">
+              <span>{{ gpu.ipAddress }}</span>
+              <button
+                @click.prevent="copyToClipboard(gpu.ipAddress)"
+                class="text-gray-400 hover:text-green"
+              >
+                <DuplicateIcon class="ml-2 w-5 h-5" />
+              </button>
+              <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
+            </div>
+          </div>
+        </div>
+        <div class="grid__col col__2">
+          <div class="info__section">
+            <span class="label">Status</span>
+            <span class="info">
+              <StatusDot
+                :isActive="gpu.status === 'active'"
+                :isInactive="gpu.status !== 'active'"
+                :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'"
+              />
+            </span>
+          </div>
+          <div class="info__section">
+            <span class="label">Created</span>
+            <span class="info">{{ gpu.created }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="box overflow_hidden gpu-specs">
+      <h4 class="section__title">GPU specs</h4>
+      <!-- vcpus, ram, disk, bandwidth -->
+      <div class="overview__grid">
+        <div class="info__section col-span-2 lg:col-span-4">
+          <span class="label">GPU Model</span>
+          <span class="info">{{ gpu.gpuModel }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">GPU</span>
+          <span class="info">{{ gpu.gpuCount }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">vCPUs</span>
+          <span class="info">{{ gpu.cpuCount }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">RAM</span>
+          <span class="info">{{ gpu.memoryGiB }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">Disk</span>
+          <span class="info">{{ gpu.diskGiB }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.section__title {
+  @apply mb-4;
+}
+.overview__grid {
+  @apply grid grid-cols-1 gap-y-4;
+}
+.grid__col {
+  @apply flex flex-col space-y-4
+}
+.info__section {
+  @apply flex overflow-hidden w-full;
+}
+.label {
+  @apply font-bold block mr-2 flex-shrink-0 w-24;
+}
+.gpu-details .info__section {
+  @apply flex-col;
+}
+
+.info {
+  @apply flex-shrink-0 truncate w-full;
+}
+
+.copied {
+  @apply absolute pointer-events-none opacity-0 top-0 left-0 flex items-center justify-center w-full h-full font-medium bg-white bg-opacity-95 text-green;
+  @apply transition-opacity duration-200 ease-in;
+}
+.copied.visible {
+  @apply opacity-100;
+}
+
+@media (max-width: 450px) {
+  .gpu-details .info__section {
+    @apply flex-col;
+  }
+}
+
+@media (min-width: 450px) {
+  .gpu-details .info__section {
+    @apply flex-row;
+  }
+
+  .gpu-specs .overview__grid, .gpu-costs .overview__grid {
+    @apply grid-cols-2;
+  }
+  .gpu-specs .label, .gpu-costs .label {
+    @apply w-20;
+  }
+
+  /* .overview__grid {
+    @apply grid-cols-2
+  } */
+}
+@screen lg {
+  .gpu-specs .overview__grid {
+    @apply grid-cols-4;
+  }
+  .gpu-specs .label {
+    @apply w-max;
+  }
+  .gpu-costs .label {
+    @apply w-max;
+  }
+}
+@screen xl {
+  .gpu-details .overview__grid {
+    @apply grid-cols-2
+  }
+  .gpu-specs .overview__grid {
+    @apply grid-cols-2
+  }
+}
+@screen 2xl {
+  .gpu-specs .overview__grid {
+    grid-template-columns: repeat(3, 1fr) auto;
+  }
+}
+</style>
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index ec2a8bc9..f56f6e0c 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -1,7 +1,10 @@
 <script setup>
 /* global process */
 
+import { ArrowLeftIcon } from '@heroicons/vue/outline'
 import EditableTitle from '../../../layout/EditableTitle.vue'
+import GPUDestroyPanel from '../components/GPUDestroyPanel.vue'
+import GPUOverviewPanel from '../components/GPUOverviewPanel.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import PowerToggle from '../../../layout/PowerToggle.vue'
 import StatusDot from '../../../components/StatusDot.vue'
@@ -10,22 +13,23 @@ import superagent from 'superagent'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
-import { ArrowLeftIcon, DuplicateIcon } from '@heroicons/vue/outline'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
-import { effect, reactive, ref } from 'vue'
+import { computed, effect, reactive, ref } from 'vue'
 import { helpers, minLength, required } from '@vuelidate/validators'
 
 const route = useRoute()
 const store = useStore()
 
 const busy = ref(false)
-const copied = ref(false)
+const destroying = ref(false)
 const disabled = ref(false)
 const error = ref()
 const gpu = ref()
 const loading = ref(true)
 const poll = ref()
 
+const destroyed = computed(() => gpu.value && gpu.value.status === 'deleted')
+
 const formState = reactive({
   name: '',
   active: true
@@ -36,13 +40,19 @@ const v$ = useVuelidate({
   active: []
 }, formState)
 
-async function copyToClipboard(str) {
-  await navigator.clipboard.writeText(str)
-  copied.value = true
+async function destroy() {
+  try {
+    destroying.value = true
+    error.value = undefined
+
+    await superagent.delete(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/${route.params.id}`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
 
-  setTimeout(() => {
-    copied.value = false
-  }, 1000)
+    startPoll(['deleted'])
+  }
+  catch (err) {
+    error.value = err
+  }
 }
 
 async function reload() {
@@ -59,7 +69,13 @@ async function reload() {
     reset()
   }
   catch (err) {
-    error.value = err
+    // Workaround for deletion
+    if (destroying.value && gpu.value && err.status === 404) {
+      gpu.value.status = 'deleted'
+    }
+    else {
+      error.value = err
+    }
   }
   finally {
     loading.value = false
@@ -81,13 +97,13 @@ function stopPoll() {
   }
 }
 
-function startPoll() {
+function startPoll(stopOnStatus) {
   if (poll.value) return
   busy.value = true
 
   poll.value = setInterval(() => {
     reload().then(() => {
-      if (gpu.value.status === 'active' || gpu.value.status === 'stopped') {
+      if (stopOnStatus.includes(gpu.value.status)) {
         stopPoll()
         busy.value = false
       }
@@ -109,7 +125,7 @@ async function togglePower(toActive) {
         .set('Authorization', `Bearer ${store.state.session._key}`)
     }
 
-    startPoll()
+    startPoll(['active', 'deleted', 'stopped'])
   }
   catch (err) {
     error.value = err
@@ -123,8 +139,8 @@ async function updateName() {
 
 effect(() => {
   reload().then(() => {
-    if (gpu.value.status !== 'active' && gpu.value.status !== 'stopped') {
-      startPoll()
+    if (!['active', 'deleted', 'stopped'].includes(gpu.value.status)) {
+      startPoll(['active', 'deleted', 'stopped'])
     }
   })
 
@@ -135,14 +151,34 @@ effect(() => {
 </script>
 
 <template>
-  <div v-if="!gpu && loading" class="mainContent__inner pt-0 mt-6">
+  <div v-if="destroying || destroyed" class="mainContent__inner pt-0 mt-6">
+    <div v-if="destroyed" class="box">
+      <h4>Destroy GPU</h4>
+      <p class="mt-3 mb-1 text-gray-500">Your GPU and backups have been successfully deleted.</p>
+      <router-link
+        class="button button--success button--small w-full md:max-w-xs"
+        :to="{ name: 'GPUs' }"
+      >
+      <span>Return to GPUs</span>
+      </router-link>
+    </div>
+    <div v-else class="box">
+      <h4>Destroy GPU</h4>
+      <div class="flex">
+        <span>Destroying {{ gpu && gpu.name }}</span>
+        <span class="ml-2"><LoadingSpinner /></span>
+      </div>
+    </div>
+  </div>
+
+  <div v-else-if="!gpu && loading" class="mainContent__inner pt-0 mt-6">
     <div class="flex items-center">
       <span>Loading GPU</span>
       <LoadingSpinner />
     </div>
   </div>
 
-  <div v-else-if="error">
+  <div v-else-if="error" class="mainContent__inner pt-0 mt-6">
     <div class="box">
       <div class="flex flex-col items-center justify-center text-center">
         <div class="flex items-center mt-4">
@@ -226,83 +262,20 @@ effect(() => {
           <Tab v-slot="{selected}">
             <button :class="{ tab: true, 'tab--selected': selected }">Overview</button>
           </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Destroy</button>
+          </Tab>
         </TabList>
 
         <TabPanels class="mt-4">
           <!-- Overview -->
           <TabPanel>
-            <div class="grid gap-4 xl:grid-cols-2">
-              <div class="box overflow_hidden server__details xl:col-span-2">
-                <h4 class="section__title">Details</h4>
-                <div class="overview__grid">
-                  <!-- Name, hostname, IP address -->
-                  <div class="grid__col col__1">
-                    <div class="info__section">
-                      <span class="label">Name</span><span class="info">{{ gpu.name }}</span>
-                    </div>
-                    <div class="info__section">
-                      <span class="label">Hostname</span><span class="info">{{ gpu.hostname }}</span>
-                    </div>
-                    <div class="info__section">
-                      <span class="label">IP Address</span>
-                      <div class="relative flex w-max">
-                        <span>{{ gpu.ipAddress }}</span>
-                        <button
-                          @click.prevent="copyToClipboard(gpu.ipAddress)"
-                          class="text-gray-400 hover:text-green"
-                        >
-                          <DuplicateIcon class="ml-2 w-5 h-5" />
-                        </button>
-                        <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="grid__col col__2">
-                    <div class="info__section">
-                      <span class="label">Status</span>
-                      <span class="info">
-                        <StatusDot
-                          :isActive="gpu.status === 'active'"
-                          :isInactive="gpu.status !== 'active'"
-                          :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'"
-                        />
-                      </span>
-                    </div>
-                    <div class="info__section">
-                      <span class="label">Created</span>
-                      <span class="info">{{ gpu.created }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="box overflow_hidden server__specs">
-                <h4 class="section__title">GPU specs</h4>
-                <!-- vcpus, ram, disk, bandwidth -->
-                <div class="overview__grid">
-                  <div class="info__section col-span-2 lg:col-span-4">
-                    <span class="label">GPU Model</span>
-                    <span class="info">{{ gpu.gpuModel }}</span>
-                  </div>
-                  <div class="info__section">
-                    <span class="label">GPU</span>
-                    <span class="info">{{ gpu.gpuCount }}</span>
-                  </div>
-                  <div class="info__section">
-                    <span class="label">vCPUs</span>
-                    <span class="info">{{ gpu.cpuCount }}</span>
-                  </div>
-                  <div class="info__section">
-                    <span class="label">RAM</span>
-                    <span class="info">{{ gpu.memoryGiB }}</span>
-                  </div>
-                  <div class="info__section">
-                    <span class="label">Disk</span>
-                    <span class="info">{{ gpu.diskGiB }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <GPUOverviewPanel :gpu="gpu" />
+          </TabPanel>
+
+          <!-- Destroy -->
+          <TabPanel>
+            <GPUDestroyPanel :gpu="gpu" @destroy="destroy" />
           </TabPanel>
         </TabPanels>
       </TabGroup>

From 35f53fe0ff93401a58a13e44ac3a24fce43d5c22 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Tue, 25 Feb 2025 12:22:37 +0000
Subject: [PATCH 15/29] feat: begin to add api key integration

---
 .../gpu/components/GPUAPIKeysPanel.vue        | 96 +++++++++++++++++++
 src/modules/gpu/views/GPUDetail.vue           |  9 ++
 2 files changed, 105 insertions(+)
 create mode 100644 src/modules/gpu/components/GPUAPIKeysPanel.vue

diff --git a/src/modules/gpu/components/GPUAPIKeysPanel.vue b/src/modules/gpu/components/GPUAPIKeysPanel.vue
new file mode 100644
index 00000000..1ff412af
--- /dev/null
+++ b/src/modules/gpu/components/GPUAPIKeysPanel.vue
@@ -0,0 +1,96 @@
+<script setup>
+/* global process */
+
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import superagent from 'superagent'
+import { useStore } from 'vuex'
+import { effect, ref } from 'vue'
+
+const store = useStore()
+
+const busy = ref(false)
+const error = ref()
+const generatedKey = ref()
+const loading = ref(true)
+const keys = ref([])
+
+async function generate() {
+  try {
+    busy.value = true
+
+    const res = await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/admin/api-keys`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    generatedKey.value = res.body
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+async function reload() {
+  if (!store.state.session || !store.state.session._key) return
+
+  try {
+    loading.value = true
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/admin/api-keys`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    keys.value = res.body
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+</script>
+
+<template>
+  <div v-if="loading" class="pb-20">
+    <div class="box">
+      <h4>API Keys</h4>
+
+      <div class="flex">
+        <span class="mr-2">Loading</span>
+        <LoadingSpinner />
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="pb-20">
+    <div class="box">
+      <h4>API Keys</h4>
+
+      <div v-if="generatedKey">
+        <span>Your new API key:</span>
+        <span>{{ generatedKey.secret }}</span>
+      </div>
+
+      <ul>
+        <li v-for="key in keys" v-bind:key="key._key">
+          {{ key.id }}
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex flex-col w-full mt-4 space-y-2">
+      <button
+        :disabled="busy"
+        class="button button--success self-end w-full md:max-w-xs"
+        @click="generate"
+      >
+        Generate API Key
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index f56f6e0c..25189e4b 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -16,6 +16,7 @@ import useVuelidate from '@vuelidate/core'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { computed, effect, reactive, ref } from 'vue'
 import { helpers, minLength, required } from '@vuelidate/validators'
+import GPUAPIKeysPanel from '../components/GPUAPIKeysPanel.vue'
 
 const route = useRoute()
 const store = useStore()
@@ -262,6 +263,9 @@ effect(() => {
           <Tab v-slot="{selected}">
             <button :class="{ tab: true, 'tab--selected': selected }">Overview</button>
           </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">API Keys</button>
+          </Tab>
           <Tab v-slot="{selected}">
             <button :class="{ tab: true, 'tab--selected': selected }">Destroy</button>
           </Tab>
@@ -273,6 +277,11 @@ effect(() => {
             <GPUOverviewPanel :gpu="gpu" />
           </TabPanel>
 
+          <!-- API keys -->
+          <TabPanel>
+            <GPUAPIKeysPanel :gpu="gpu" />
+          </TabPanel>
+
           <!-- Destroy -->
           <TabPanel>
             <GPUDestroyPanel :gpu="gpu" @destroy="destroy" />

From a4b7c297e8636bd7a4ba311dbf909635bf7da17f Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 3 Mar 2025 11:05:43 +0000
Subject: [PATCH 16/29] feat: improve error handling in deploy, destroy

---
 src/layout/ErrorV2.vue              | 35 +++++++++++++++++++++++++++++
 src/modules/gpu/views/GPUDeploy.vue |  5 ++++-
 src/modules/gpu/views/GPUDetail.vue |  1 +
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/layout/ErrorV2.vue

diff --git a/src/layout/ErrorV2.vue b/src/layout/ErrorV2.vue
new file mode 100644
index 00000000..1bfebdcd
--- /dev/null
+++ b/src/layout/ErrorV2.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { ExclamationIcon } from '@heroicons/vue/outline'
+import { computed, defineProps } from 'vue'
+
+const props = defineProps({
+  error: Object
+})
+
+const message = computed(() => {
+  if (!props.error) return ''
+
+  if (props.error && props.error.response && props.error.response.body) {
+    const body = props.error.response.body
+    if (body.hint) return body.hint
+    if (body.reason) return body.reason
+    if (body.error) return body.error
+    if (body.message) return body.message
+  }
+
+  if (props.error.value && props.error.message) {
+    return props.error.message
+  }
+
+  return 'Unknown error'
+})
+</script>
+
+<template>
+  <div v-if="error" class="error_wrapper block errorMessage">
+    <div class="float-left">
+      <ExclamationIcon class="w-3.5 text-red" />
+    </div>
+    <span class="errorMessage__text text-red">{{ message }}</span>
+  </div>
+</template>
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index d822d117..3573f5c0 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -1,6 +1,7 @@
 <script setup>
 /* global process */
 
+import ErrorV2 from '../../../layout/ErrorV2.vue'
 import GPUSelect from '../components/GPUSelect.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import Password from '../../../components/server/deploy/Password.vue'
@@ -189,7 +190,9 @@ async function submit() {
         <ValidationError :errors="v$.password.$errors" />
       </div>
 
-      <div class="flex flex-col w-full space-y-2">
+      <div class="flex flex-col w-full space-y-2 items-end">
+        <ErrorV2 :error="error" />
+
         <button
           :disabled="!canDeploy"
           class="button button--success self-end w-full md:max-w-xs"
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 25189e4b..915a14c0 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -53,6 +53,7 @@ async function destroy() {
   }
   catch (err) {
     error.value = err
+    destroying.value = false
   }
 }
 

From a74576287731125169dc48ef85bc3ed957acd167 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 3 Mar 2025 14:54:24 +0000
Subject: [PATCH 17/29] feat: create tabulated settings view, replaces account

---
 src/components/UserMenu.vue                   |   2 +-
 src/components/billing/Invoices.vue           |   4 +-
 src/components/billing/PaymentCards.vue       |   2 +-
 src/components/billing/Wallet.vue             |   2 +-
 src/modules/gpu/views/GPUDetail.vue           |   9 --
 .../components/APIKeysPanel.vue}              |   0
 .../settings/components/AccountPanel.vue      |  77 ++++++++++
 .../components/CryptoPaymentsPanel.vue        |  32 ++++
 src/modules/settings/views/SettingsView.vue   |  48 ++++++
 src/router/index.js                           |  11 +-
 src/views/dashboard/Account.vue               | 144 ------------------
 11 files changed, 167 insertions(+), 164 deletions(-)
 rename src/modules/{gpu/components/GPUAPIKeysPanel.vue => settings/components/APIKeysPanel.vue} (100%)
 create mode 100644 src/modules/settings/components/AccountPanel.vue
 create mode 100644 src/modules/settings/components/CryptoPaymentsPanel.vue
 create mode 100644 src/modules/settings/views/SettingsView.vue
 delete mode 100644 src/views/dashboard/Account.vue

diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index 957885b3..c76028cc 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -28,7 +28,7 @@
         </MenuItem>
         <MenuItem v-slot="{ active }">
           <button
-            @click.prevent="navigate('/account')"
+            @click.prevent="navigate({ name: 'Settings' })"
             :class="[
               'menu__item',
               active ? 'active' : ''
diff --git a/src/components/billing/Invoices.vue b/src/components/billing/Invoices.vue
index 42687553..44923059 100644
--- a/src/components/billing/Invoices.vue
+++ b/src/components/billing/Invoices.vue
@@ -43,11 +43,11 @@ const isCryptoView = Boolean(store.state.account?.useCryptoView)
               If you add an email address to your account, you will receive an email notification when a new invoice is generated and whenever your account status changes.
               You can also use your email address to log in to your Edge Account, keeping your account number secure.
               <span v-if="!accountEmail">
-                <RouterLink :to="{ name: 'Account' }" class="text-green">Add an email address</RouterLink>.
+                <RouterLink :to="{ name: 'Settings' }" class="text-green">Add an email address</RouterLink>.
               </span>
               <span v-else>
                 Your email address is <span class="text-green">{{ accountEmail }}</span>.
-                You can <RouterLink :to="{ name: 'Account' }" class="text-green">change your email address</RouterLink> if you need to.
+                You can <RouterLink :to="{ name: 'Settings' }" class="text-green">change your email address</RouterLink> if you need to.
               </span>
             </p>
             <p>
diff --git a/src/components/billing/PaymentCards.vue b/src/components/billing/PaymentCards.vue
index 0363789d..dc55ef3b 100644
--- a/src/components/billing/PaymentCards.vue
+++ b/src/components/billing/PaymentCards.vue
@@ -101,7 +101,7 @@
                 <RouterLink :to="{ name: 'Wallet' }" class="text-green">View your wallet</RouterLink> to start funding your account manually.
               </p>
               <p v-else>
-                <RouterLink :to="{ name: 'Account' }" class="text-green">Enable Crypto View</RouterLink> to start funding your account manually.
+                <RouterLink :to="{ name: 'Settings' }" class="text-green">Enable Crypto View</RouterLink> to start funding your account manually.
               </p>
             </section>
           </article>
diff --git a/src/components/billing/Wallet.vue b/src/components/billing/Wallet.vue
index 6a1ec4c6..fc43eb09 100644
--- a/src/components/billing/Wallet.vue
+++ b/src/components/billing/Wallet.vue
@@ -108,7 +108,7 @@ async function startPurchase() {
                 You're currently using the crypto view, which provides comprehensive visibility of your wallet and transactions on the XE blockchain.
                 This page enables you to manage your account balance directly using XE.
                 If you're new to cryptocurrency, you can <a href="https://wiki.edge.network/getting-and-storing-tokens/wallets" target="_blank" class="text-green">learn more about XE on the Edge Wiki</a>.
-                Alternatively, if you prefer a more streamlined interface, you can <RouterLink :to="{ name: 'Account' }" class="text-green">disable the crypto view</RouterLink>.
+                Alternatively, if you prefer a more streamlined interface, you can <RouterLink :to="{ name: 'Settings' }" class="text-green">disable the crypto view</RouterLink>.
               </p>
             </section>
           </article>
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 915a14c0..80035990 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -16,7 +16,6 @@ import useVuelidate from '@vuelidate/core'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { computed, effect, reactive, ref } from 'vue'
 import { helpers, minLength, required } from '@vuelidate/validators'
-import GPUAPIKeysPanel from '../components/GPUAPIKeysPanel.vue'
 
 const route = useRoute()
 const store = useStore()
@@ -264,9 +263,6 @@ effect(() => {
           <Tab v-slot="{selected}">
             <button :class="{ tab: true, 'tab--selected': selected }">Overview</button>
           </Tab>
-          <Tab v-slot="{selected}">
-            <button :class="{ tab: true, 'tab--selected': selected }">API Keys</button>
-          </Tab>
           <Tab v-slot="{selected}">
             <button :class="{ tab: true, 'tab--selected': selected }">Destroy</button>
           </Tab>
@@ -278,11 +274,6 @@ effect(() => {
             <GPUOverviewPanel :gpu="gpu" />
           </TabPanel>
 
-          <!-- API keys -->
-          <TabPanel>
-            <GPUAPIKeysPanel :gpu="gpu" />
-          </TabPanel>
-
           <!-- Destroy -->
           <TabPanel>
             <GPUDestroyPanel :gpu="gpu" @destroy="destroy" />
diff --git a/src/modules/gpu/components/GPUAPIKeysPanel.vue b/src/modules/settings/components/APIKeysPanel.vue
similarity index 100%
rename from src/modules/gpu/components/GPUAPIKeysPanel.vue
rename to src/modules/settings/components/APIKeysPanel.vue
diff --git a/src/modules/settings/components/AccountPanel.vue b/src/modules/settings/components/AccountPanel.vue
new file mode 100644
index 00000000..3008d894
--- /dev/null
+++ b/src/modules/settings/components/AccountPanel.vue
@@ -0,0 +1,77 @@
+<script setup>
+import * as format from '@/utils/format'
+import AddAccountEmail from '../../../components/account/AddAccountEmail.vue'
+import Disable2FA from '../../../components/account/Disable2FA.vue'
+import Enable2FA from '../../../components/account/Enable2FA.vue'
+import ManageAccountEmail from '../../../components/account/ManageAccountEmail.vue'
+import { useStore } from 'vuex'
+import { EyeIcon, EyeOffIcon } from '@heroicons/vue/solid'
+import { computed, ref } from 'vue'
+
+const store = useStore()
+
+const showAccountNumber = ref(false)
+const showAddTwoFactor = ref(false)
+
+const accountNumber = computed(() => {
+  if (showAccountNumber.value) return format.accountNumber(store.state.account._key)
+  return format.accountNumberMasked(store.state.account._key)
+})
+
+const hasEmail = computed(() => Boolean(store.state.account && store.state.account.email && store.state.account.email.address))
+const hasTwoFactor = computed(() => Boolean(store.state.account && store.state.account.totps))
+
+function toggleShowAccountNumber() {
+  showAccountNumber.value = !showAccountNumber.value
+}
+
+function toggleShowAddTwoFactor() {
+  showAddTwoFactor.value = !showAddTwoFactor.value
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="box">
+      <div>
+        <h4>Account Number</h4>
+        <p class="text-gray-500">Write down your account number and keep it secret. You can use your account number to sign into the account.</p>
+      </div>
+      <!-- account number display -->
+      <div class="flex items-center justify-between relative w-max max-w-full">
+        <span class="text-3xl pr-4 monospace" :class="{ 'text-gray': !showAccountNumber, 'text-green': showAccountNumber }">{{ accountNumber }}</span>
+        <!-- hide/show account number button button -->
+        <button
+          @click.prevent="toggleShowAccountNumber"
+          class="ml-2 text-gray-400 hover:text-green"
+        >
+          <EyeIcon v-if="showAccountNumber" class="ml-2 w-5 h-5" />
+          <EyeOffIcon v-else class="ml-2 w-5 h-5" />
+        </button>
+      </div>
+    </div>
+
+    <div class="box">
+      <h4>Account Email</h4>
+      <div>
+        <ManageAccountEmail v-if="hasEmail" />
+        <AddAccountEmail v-else />
+      </div>
+    </div>
+
+    <div class="box">
+      <h4>Two-factor Authentication (2FA)</h4>
+      <div>
+        <Disable2FA v-if="hasTwoFactor && !showAddTwoFactor && !backupCodes" />
+        <Enable2FA v-else @enable2FA="toggleShowAddTwoFactor" />
+        <button
+          v-if="hasTwoFactor && !backupCodes"
+          @click="toggleShowAddTwoFactor"
+          class="mt-2 underline text-gray-500 hover:text-green"
+        >
+          {{ showAddTwoFactor ? 'Return to remove existing 2FA code' : 'Add extra 2FA code' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/settings/components/CryptoPaymentsPanel.vue b/src/modules/settings/components/CryptoPaymentsPanel.vue
new file mode 100644
index 00000000..f3e9eed5
--- /dev/null
+++ b/src/modules/settings/components/CryptoPaymentsPanel.vue
@@ -0,0 +1,32 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+async function toggleCryptoView() {
+  if (!store.state.account) return
+
+  await utils.updateAccount(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, {
+    account: store.state.account._key,
+    useCryptoView: !store.state.account.useCryptoView
+  })
+
+  store.dispatch('updateAccount')
+}
+</script>
+
+<template>
+  <div class="box">
+    <h4>Crypto Payments</h4>
+    <p class="text-gray-500">
+      Edge runs on its own layer 0 blockchain, and payments are settled in its own coin, called XE, in the background.
+      By default payment information in the account interface is presented in fiat.
+      If you would prefer to see payment information in crypto, you can enable it here.
+    </p>
+    <button v-if="store.state.account.useCryptoView" @click="toggleCryptoView" class="text-sm py-3 button button--outline-error">Disable Crypto Payments</button>
+    <button v-else @click="toggleCryptoView" class="text-sm py-3 button button--outline-success">Enable Crypto Payments</button>
+  </div>
+</template>
diff --git a/src/modules/settings/views/SettingsView.vue b/src/modules/settings/views/SettingsView.vue
new file mode 100644
index 00000000..6a518f6a
--- /dev/null
+++ b/src/modules/settings/views/SettingsView.vue
@@ -0,0 +1,48 @@
+<script setup>
+import APIKeysPanel from '../components/APIKeysPanel.vue'
+import AccountPanel from '../components/AccountPanel.vue'
+import CryptoPaymentsPanel from '../components/CryptoPaymentsPanel.vue'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
+
+</script>
+
+<template>
+  <div class="mainContent__inner space-y-4">
+    <h1>Settings</h1>
+
+    <div class="mt-4 space-x-10">
+      <TabGroup as="div" class="tabGroup">
+        <div class="absolute top-0 right-0 w-10 h-5 bg-gradient-to-l from-gray-200" />
+
+        <TabList class="tabs pr-6">
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Account</button>
+          </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">API Keys</button>
+          </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Crypto Payments</button>
+          </Tab>
+        </TabList>
+
+        <TabPanels class="mt-4">
+          <!-- Account -->
+          <TabPanel>
+            <AccountPanel />
+          </TabPanel>
+
+          <!-- API Keys -->
+          <TabPanel>
+            <APIKeysPanel />
+          </TabPanel>
+
+          <!-- Crypto Payments -->
+          <TabPanel>
+            <CryptoPaymentsPanel />
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </div>
+  </div>
+</template>
diff --git a/src/router/index.js b/src/router/index.js
index f3f6e65b..b5cda9be 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,6 @@
 /* global process */
 
 import * as utils from '@edge/account-utils'
-import Account from '@/views/dashboard/Account'
 import BareMetal from '../modules/bareMetals/views/BareMetal.vue'
 import BareMetals from '../modules/bareMetals/views/BareMetals.vue'
 import Billing from '@/views/dashboard/Billing'
@@ -56,11 +55,6 @@ const routes = [
         name: 'Index',
         component: Index
       },
-      {
-        path: 'account',
-        name: 'Account',
-        component: Account
-      },
       {
         path: 'bare-metals',
         name: 'Bare Metals',
@@ -193,6 +187,11 @@ const routes = [
         name: 'Server',
         component: Server
       },
+      {
+        path: 'settings',
+        name: 'Settings',
+        component: () => import('../modules/settings/views/SettingsView.vue')
+      },
       {
         path: 'shield',
         name: 'Shield',
diff --git a/src/views/dashboard/Account.vue b/src/views/dashboard/Account.vue
deleted file mode 100644
index 33542910..00000000
--- a/src/views/dashboard/Account.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <div class="mainContent__inner space-y-4">
-    <h1>Account</h1>
-    <div class="box">
-      <div>
-        <h4>Account Number</h4>
-        <p class="text-gray-500">Write down your account number and keep it secret. You can use your account number to sign into the account.</p>
-      </div>
-      <!-- account number display -->
-      <div class="account-number-wrapper">
-        <span v-if="showAccountNumber" class="account-number monospace">{{ formattedAccountNumber }}</span>
-        <span v-else class="account-number masked monospace">{{ formattedAccountNumberMasked }}</span>
-        <!-- hide/show account number button button -->
-        <button
-          @click.prevent="toggleShowAccountNumber"
-          class="ml-2 text-gray-400 hover:text-green"
-        >
-          <EyeIcon v-if="showAccountNumber" class="ml-2 w-5 h-5" />
-          <EyeOffIcon v-if="!showAccountNumber" class="ml-2 w-5 h-5" />
-        </button>
-      </div>
-    </div>
-    <div class="box">
-      <h4>Account Email</h4>
-      <div>
-        <ManageAccountEmail v-if="isEmailEnabled" />
-        <AddAccountEmail v-else />
-      </div>
-    </div>
-    <div class="box">
-      <h4>Two-factor Authentication (2FA)</h4>
-      <div>
-        <Disable2FA v-if="is2FAEnabled && !showAddExtra2FA && !backupCodes" />
-        <Enable2FA v-else @enable2FA="onEnable2FA" />
-        <button
-          v-if="is2FAEnabled && !backupCodes"
-          @click="toggleAddExtra2FA"
-          class="mt-2 underline text-gray-500 hover:text-green"
-        >
-          {{ showAddExtra2FA ? 'Return to remove existing 2FA code' : 'Add extra 2FA code' }}
-        </button>
-      </div>
-    </div>
-
-    <div class="box">
-      <h4>Crypto Payments</h4>
-      <p class="text-gray-500">
-        Edge runs on its own layer 0 blockchain, and payments are settled in its own coin, called XE, in the background.
-        By default payment information in the account interface is presented in fiat.
-        If you would prefer to see payment information in crypto, you can enable it here.
-      </p>
-      <button v-if="account.useCryptoView" @click="toggleCryptoView" class="text-sm py-3 button button--outline-error">Disable Crypto Payments</button>
-      <button v-else @click="toggleCryptoView" class="text-sm py-3 button button--outline-success">Enable Crypto Payments</button>
-    </div>
-  </div>
-</template>
-
-<script>
-/* global process */
-
-import * as format from '@/utils/format'
-import * as utils from '@edge/account-utils'
-import AddAccountEmail from '@/components/account/AddAccountEmail'
-import Disable2FA from '@/components/account/Disable2FA'
-import Enable2FA from '@/components/account/Enable2FA'
-import ManageAccountEmail from '@/components/account/ManageAccountEmail'
-import ReferralCode from '@/components/ReferralCode'
-import { mapState } from 'vuex'
-import { EyeIcon, EyeOffIcon } from '@heroicons/vue/solid'
-
-export default {
-  name: 'Account',
-  title() {
-    return 'Edge Account Portal » Account'
-  },
-  components: {
-    AddAccountEmail,
-    Disable2FA,
-    EyeIcon,
-    EyeOffIcon,
-    Enable2FA,
-    ManageAccountEmail,
-    ReferralCode
-  },
-  computed: {
-    ...mapState(['account', 'backupCodes', 'session']),
-    formattedAccountNumber() {
-      return format.accountNumber(this.account._key)
-    },
-    formattedAccountNumberMasked() {
-      return format.accountNumberMasked(this.account._key)
-    },
-    is2FAEnabled() {
-      return this.account.totps
-    },
-    isEmailEnabled() {
-      return this.account.email && this.account.email.address
-    }
-  },
-  data() {
-    return {
-      copied: false,
-      showAccountNumber: false,
-      showAddExtra2FA: false
-    }
-  },
-  methods: {
-    async copyToClipboard () {
-      this.copied = true
-      await navigator.clipboard.writeText(this.account._key)
-      setTimeout(() => {
-        this.copied = false
-      }, 2000)
-    },
-    onEnable2FA() {
-      this.showAddExtra2FA = false
-    },
-    async toggleCryptoView() {
-      await utils.updateAccount(process.env.VUE_APP_ACCOUNT_API_URL, this.session._key, {
-        account: this.account._key,
-        useCryptoView: !this.account.useCryptoView
-      })
-      this.$store.dispatch('updateAccount')
-    },
-    toggleShowAccountNumber() {
-      this.showAccountNumber = !this.showAccountNumber
-    },
-    toggleAddExtra2FA() {
-      this.showAddExtra2FA = !this.showAddExtra2FA
-    }
-  }
-}
-</script>
-<style scoped>
-.account-number-wrapper {
-  @apply flex items-center justify-between relative w-max max-w-full;
-}
-.account-number {
-  @apply text-3xl text-green pr-4;
-}
-.account-number.masked {
-  @apply text-gray;
-}
-</style>

From 3644db3260eb8981abe01818800ccd9aa2464ccc Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 3 Mar 2025 15:46:02 +0000
Subject: [PATCH 18/29] feat: visual improvements to api keys panel

---
 .../settings/components/APIKeysPanel.vue      | 112 ++++++++++++++----
 1 file changed, 90 insertions(+), 22 deletions(-)

diff --git a/src/modules/settings/components/APIKeysPanel.vue b/src/modules/settings/components/APIKeysPanel.vue
index 1ff412af..1e741222 100644
--- a/src/modules/settings/components/APIKeysPanel.vue
+++ b/src/modules/settings/components/APIKeysPanel.vue
@@ -4,16 +4,48 @@
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import superagent from 'superagent'
 import { useStore } from 'vuex'
+import { DuplicateIcon, TrashIcon } from '@heroicons/vue/solid'
 import { effect, ref } from 'vue'
 
 const store = useStore()
 
 const busy = ref(false)
+const copied = ref(false)
 const error = ref()
 const generatedKey = ref()
 const loading = ref(true)
 const keys = ref([])
 
+async function copyToClipboard(str) {
+  await navigator.clipboard.writeText(str)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 1000)
+}
+
+async function deleteKey(id) {
+  try {
+    busy.value = true
+
+    await superagent.delete(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/admin/api-keys/${id}`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    return reload()
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+function hideGeneratedKey() {
+  generatedKey.value = undefined
+}
+
 async function generate() {
   try {
     busy.value = true
@@ -22,6 +54,8 @@ async function generate() {
       .set('Authorization', `Bearer ${store.state.session._key}`)
 
     generatedKey.value = res.body
+
+    return reload()
   }
   catch (err) {
     error.value = err
@@ -56,31 +90,50 @@ effect(() => {
 </script>
 
 <template>
-  <div v-if="loading" class="pb-20">
-    <div class="box">
-      <h4>API Keys</h4>
-
-      <div class="flex">
-        <span class="mr-2">Loading</span>
-        <LoadingSpinner />
-      </div>
-    </div>
+  <div v-if="loading" class="box flex pb-20">
+    <span class="mr-2">Loading</span>
+    <LoadingSpinner />
   </div>
 
-  <div v-else class="pb-20">
-    <div class="box">
-      <h4>API Keys</h4>
-
-      <div v-if="generatedKey">
-        <span>Your new API key:</span>
-        <span>{{ generatedKey.secret }}</span>
+  <div v-else-if="keys.length" class="pb-20">
+    <ul class="space-y-2">
+      <li
+        v-for="key in keys"
+        class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-l-8 border-green rounded-md w-full p-5 pr-8 transition-all duration-100"
+        :key="key.id"
+      >
+        <span class="text-md text-gray-500 truncate">{{ key.id }}</span>
+        <div class="flex flex-col">
+          <span class="text-md text-gray-500">Created</span>
+          <span class="text-sm text-gray-500">{{ key.created }}</span>
+        </div>
+        <div class="flex flex-col items-end">
+          <button class="button button--error" @click.prevent="deleteKey(key.id)">
+            <TrashIcon class="w-4" />
+            <span>Delete</span>
+          </button>
+        </div>
+      </li>
+    </ul>
+
+    <div v-if="generatedKey" class="box flex flex-col mt-4">
+      <h4>Your new API key</h4>
+      <div class="mb-2">
+        <code class="font-mono text-green text-lg">{{ generatedKey.secret }}</code>
+        <button
+          class="text-gray-400 hover:text-green"
+          @click.prevent="copyToClipboard(generatedKey.secret)"
+        >
+          <DuplicateIcon class="ml-2 w-5 h-5" />
+        </button>
       </div>
-
-      <ul>
-        <li v-for="key in keys" v-bind:key="key._key">
-          {{ key.id }}
-        </li>
-      </ul>
+      <p>
+        Copy this API key to a safe place.
+        This key's ID is {{ generatedKey.id }}.
+      </p>
+      <button @click="hideGeneratedKey" class="button button--success">
+        <span>I confirm have stored my API key in a safe place</span>
+      </button>
     </div>
 
     <div class="flex flex-col w-full mt-4 space-y-2">
@@ -93,4 +146,19 @@ effect(() => {
       </button>
     </div>
   </div>
+
+  <div v-else class="pb-20">
+    <div class="box box-flex">
+      <div class="flex flex-col items-center justify-center py-4">
+        <p>You haven't created any API keys yet.</p>
+        <button
+          :disabled="busy"
+          class="button button--success w-full md:max-w-xs"
+          @click="generate"
+        >
+          Generate API Key
+        </button>
+      </div>
+    </div>
+  </div>
 </template>

From 94bac27fa4425ed47e9c7853a29738aad988ffaf Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Tue, 4 Mar 2025 09:50:45 +0000
Subject: [PATCH 19/29] feat: improve error display, grid layout for api keys

---
 .../settings/components/APIKeysPanel.vue      | 123 ++++++++++--------
 1 file changed, 67 insertions(+), 56 deletions(-)

diff --git a/src/modules/settings/components/APIKeysPanel.vue b/src/modules/settings/components/APIKeysPanel.vue
index 1e741222..660fedee 100644
--- a/src/modules/settings/components/APIKeysPanel.vue
+++ b/src/modules/settings/components/APIKeysPanel.vue
@@ -1,6 +1,7 @@
 <script setup>
 /* global process */
 
+import ErrorV2 from '../../../layout/ErrorV2.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import superagent from 'superagent'
 import { useStore } from 'vuex'
@@ -90,75 +91,85 @@ effect(() => {
 </script>
 
 <template>
-  <div v-if="loading" class="box flex pb-20">
-    <span class="mr-2">Loading</span>
-    <LoadingSpinner />
-  </div>
+  <div>
+    <ErrorV2 class="mb-2 text-center w-full" :error="error" />
 
-  <div v-else-if="keys.length" class="pb-20">
-    <ul class="space-y-2">
-      <li
-        v-for="key in keys"
-        class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-l-8 border-green rounded-md w-full p-5 pr-8 transition-all duration-100"
-        :key="key.id"
-      >
-        <span class="text-md text-gray-500 truncate">{{ key.id }}</span>
-        <div class="flex flex-col">
-          <span class="text-md text-gray-500">Created</span>
-          <span class="text-sm text-gray-500">{{ key.created }}</span>
-        </div>
-        <div class="flex flex-col items-end">
-          <button class="button button--error" @click.prevent="deleteKey(key.id)">
-            <TrashIcon class="w-4" />
-            <span>Delete</span>
-          </button>
-        </div>
-      </li>
-    </ul>
+    <div v-if="loading" class="box flex pb-20">
+      <span class="mr-2">Loading</span>
+      <LoadingSpinner />
+    </div>
 
-    <div v-if="generatedKey" class="box flex flex-col mt-4">
-      <h4>Your new API key</h4>
-      <div class="mb-2">
-        <code class="font-mono text-green text-lg">{{ generatedKey.secret }}</code>
-        <button
-          class="text-gray-400 hover:text-green"
-          @click.prevent="copyToClipboard(generatedKey.secret)"
+    <div v-if="keys.length" class="pb-20">
+      <ul class="space-y-2">
+        <li
+          v-for="key in keys"
+          class="flex flex-col lg:grid keys-grid gap-y-4 bg-white text-gray-500 border-l-8 border-green rounded-md w-full p-5 pr-8 transition-all duration-100"
+          :key="key.id"
         >
-          <DuplicateIcon class="ml-2 w-5 h-5" />
+          <span class="text-md text-gray-500 truncate">{{ key.id }}</span>
+          <div class="flex flex-col">
+            <span class="text-md text-gray-500">Created</span>
+            <span class="text-sm text-gray-500">{{ key.created }}</span>
+          </div>
+          <div class="flex flex-col items-end">
+            <button class="button button--error" @click.prevent="deleteKey(key.id)">
+              <TrashIcon class="w-4" />
+              <span>Delete</span>
+            </button>
+          </div>
+        </li>
+      </ul>
+
+      <div v-if="generatedKey" class="box flex flex-col mt-4">
+        <h4>Your new API key</h4>
+        <div class="mb-2">
+          <code class="font-mono text-green text-lg">{{ generatedKey.secret }}</code>
+          <button
+            class="text-gray-400 hover:text-green"
+            @click.prevent="copyToClipboard(generatedKey.secret)"
+          >
+            <DuplicateIcon class="ml-2 w-5 h-5" />
+          </button>
+        </div>
+        <p>
+          Copy this API key to a safe place.
+          This key's ID is {{ generatedKey.id }}.
+        </p>
+        <button @click="hideGeneratedKey" class="button button--success">
+          <span>I confirm have stored my API key in a safe place</span>
         </button>
       </div>
-      <p>
-        Copy this API key to a safe place.
-        This key's ID is {{ generatedKey.id }}.
-      </p>
-      <button @click="hideGeneratedKey" class="button button--success">
-        <span>I confirm have stored my API key in a safe place</span>
-      </button>
-    </div>
 
-    <div class="flex flex-col w-full mt-4 space-y-2">
-      <button
-        :disabled="busy"
-        class="button button--success self-end w-full md:max-w-xs"
-        @click="generate"
-      >
-        Generate API Key
-      </button>
-    </div>
-  </div>
-
-  <div v-else class="pb-20">
-    <div class="box box-flex">
-      <div class="flex flex-col items-center justify-center py-4">
-        <p>You haven't created any API keys yet.</p>
+      <div class="flex flex-col w-full mt-4 space-y-2">
         <button
           :disabled="busy"
-          class="button button--success w-full md:max-w-xs"
+          class="button button--success self-end w-full md:max-w-xs"
           @click="generate"
         >
           Generate API Key
         </button>
       </div>
     </div>
+
+    <div v-else class="pb-20">
+      <div class="box box-flex">
+        <div class="flex flex-col items-center justify-center py-4">
+          <p>You haven't created any API keys yet.</p>
+          <button
+            :disabled="busy"
+            class="button button--success w-full md:max-w-xs"
+            @click="generate"
+          >
+            Generate API Key
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.keys-grid {
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</style>

From 13baf6423055dadab3fb6efd586e73f683e1f039 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 6 Jan 2025 19:26:03 +0000
Subject: [PATCH 20/29] chore: update account-utils

---
 package-lock.json | 11 +++++------
 package.json      |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e1c48c99..6eb37853 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "GPL",
       "dependencies": {
         "@chenfengyuan/vue-qrcode": "^2.0.0",
-        "@edge/account-utils": "^0.4.1",
+        "@edge/account-utils": "github:edge/account-utils#feature/vpn",
         "@edge/cache-config": "^1.1.0",
         "@edge/index-utils": "^0.6.2",
         "@headlessui/vue": "^1.7.3",
@@ -1882,8 +1882,8 @@
     },
     "node_modules/@edge/account-utils": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@edge/account-utils/-/account-utils-0.4.1.tgz",
-      "integrity": "sha512-3NDXXR3B/518yVVOEhFLtyi179m4IyS3EbK9WAATC5BElnwKoF3DtZtJaRaMdRvdyAgjpAnrtPBIsWI+yo/cbQ==",
+      "resolved": "git+ssh://git@github.com/edge/account-utils.git#cdf256bf049ede09b2244c0fbb624384d7acf180",
+      "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@edge/cache-config": "^1.1.0",
         "@edge/xe-utils": "^1.11.1",
@@ -15412,9 +15412,8 @@
       "requires": {}
     },
     "@edge/account-utils": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@edge/account-utils/-/account-utils-0.4.1.tgz",
-      "integrity": "sha512-3NDXXR3B/518yVVOEhFLtyi179m4IyS3EbK9WAATC5BElnwKoF3DtZtJaRaMdRvdyAgjpAnrtPBIsWI+yo/cbQ==",
+      "version": "git+ssh://git@github.com/edge/account-utils.git#cdf256bf049ede09b2244c0fbb624384d7acf180",
+      "from": "@edge/account-utils@github:edge/account-utils#feature/vpn",
       "requires": {
         "@edge/cache-config": "^1.1.0",
         "@edge/xe-utils": "^1.11.1",
diff --git a/package.json b/package.json
index fc62592f..c409fc8a 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
   "main": "server/index.js",
   "dependencies": {
     "@chenfengyuan/vue-qrcode": "^2.0.0",
-    "@edge/account-utils": "^0.4.1",
+    "@edge/account-utils": "github:edge/account-utils#feature/vpn",
     "@edge/cache-config": "^1.1.0",
     "@edge/index-utils": "^0.6.2",
     "@headlessui/vue": "^1.7.3",

From 2c68990c977f648ea654315fd63acb50178ceb39 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Tue, 7 Jan 2025 11:30:59 +0000
Subject: [PATCH 21/29] chore: update account-utils

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6eb37853..82fd0803 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1882,7 +1882,7 @@
     },
     "node_modules/@edge/account-utils": {
       "version": "0.4.1",
-      "resolved": "git+ssh://git@github.com/edge/account-utils.git#cdf256bf049ede09b2244c0fbb624384d7acf180",
+      "resolved": "git+ssh://git@github.com/edge/account-utils.git#f5fb45ab1be29b722b43625dbba937735a71a794",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@edge/cache-config": "^1.1.0",
@@ -15412,7 +15412,7 @@
       "requires": {}
     },
     "@edge/account-utils": {
-      "version": "git+ssh://git@github.com/edge/account-utils.git#cdf256bf049ede09b2244c0fbb624384d7acf180",
+      "version": "git+ssh://git@github.com/edge/account-utils.git#f5fb45ab1be29b722b43625dbba937735a71a794",
       "from": "@edge/account-utils@github:edge/account-utils#feature/vpn",
       "requires": {
         "@edge/cache-config": "^1.1.0",

From ca7e622d236fac31ce0df5a58278383eb9428104 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Tue, 4 Mar 2025 10:42:36 +0000
Subject: [PATCH 22/29] feat: add vpn list view

---
 src/components/SideNavigation.vue |   5 +
 src/modules/vpns/views/VPNs.vue   | 266 ++++++++++++++++++++++++++++++
 src/router/index.js               |   6 +
 3 files changed, 277 insertions(+)
 create mode 100644 src/modules/vpns/views/VPNs.vue

diff --git a/src/components/SideNavigation.vue b/src/components/SideNavigation.vue
index c9112d74..d6315fd0 100644
--- a/src/components/SideNavigation.vue
+++ b/src/components/SideNavigation.vue
@@ -39,6 +39,11 @@ export default {
           link: '/gpus',
           text: 'GPUs'
         },
+        {
+          _key: 'vpn',
+          link: '/vpns',
+          text: 'VPN'
+        },
         {
           _key: 'dns',
           link: '/domains',
diff --git a/src/modules/vpns/views/VPNs.vue b/src/modules/vpns/views/VPNs.vue
new file mode 100644
index 00000000..3129db21
--- /dev/null
+++ b/src/modules/vpns/views/VPNs.vue
@@ -0,0 +1,266 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import LoadingSpinner from '@/components/icons/LoadingSpinner'
+import StatusDot from '@/components/StatusDot'
+import moment from 'moment'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { effect, ref } from 'vue'
+
+const router = useRouter()
+const store = useStore()
+
+const data = ref()
+const error = ref()
+const loading = ref(true)
+
+function getCreated(time) {
+  const created = moment(time).fromNow()
+  return created === 'a few seconds ago' ? 'Just now' : created
+}
+
+async function reload() {
+  try {
+    error.value = undefined
+    loading.value = true
+
+    data.value = await utils.getVpns(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, {
+      limit: 100,
+      page: 1
+    })
+  }
+  catch (err) {
+    console.error(err)
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <div class="flex flex-col sm:flex-row justify-between">
+      <h1>Edge VPN</h1>
+    </div>
+    <div v-if="error" class="box">
+      <div class="flex flex-col space-y-4 items-center justify-center py-4">
+        There was a problem loading your VPNs. Please try again or contact support for assistance.
+      </div>
+    </div>
+    <div v-else-if="loading" class="flex items-center">
+      <span>Loading VPNs</span>
+      <div class="ml-2"><LoadingSpinner /></div>
+    </div>
+    <div v-else-if="data">
+      <ul class="space-y-2">
+        <li
+          v-for="{ vpn, server } in data.results"
+          :key="vpn._key"
+          @click="router.push({ name: 'Bare Metal', params: { key: vpn._key }})"
+          class="vpns__item"
+          :class="vpn.active ? 'active' : 'inactive'"
+        >
+          <div class="vpns__field details overflow-hidden">
+            <!-- name -->
+            <div class="vpns__name">
+              <span
+                class="text-md truncate"
+                :class="vpn.active ? 'text-green' : 'text-red'"
+                :title="vpn.name"
+              >
+                {{ vpn.name }}
+              </span>
+            </div>
+            <div class="ip__and__domain text-m">
+              <span v-if="server.network">{{ server.network.ip[0] }}</span>
+              <span v-if="server.network" class="divider hidden"></span>
+              <div class="truncate" :data="server.settings.domain">{{ server.settings.domain }}</div>
+            </div>
+          </div>
+
+          <!-- server specs -->
+          <div class="vpns__field specs">
+            <span class="vpns__header">Type</span>
+            <!-- Multi or single user -->
+            <div class="text-m">
+              <span v-if="vpn.multiuser">Multiuser</span>
+              <span v-else>Single User</span>
+            </div>
+          </div>
+
+
+          <!-- Speed -->
+          <div class="vpns__field speed">
+            <span class="vpns__header">Speed</span>
+            <div class="text-m">
+
+              <span v-if="vpn.speed === 'fast'">Fast</span>
+              <span v-else-if="vpn.speed === 'faster'">Faster</span>
+              <span v-else-if="vpn.speed === 'fastest'">Fastest</span>
+              <span v-else>???</span>
+            </div>
+          </div>
+
+          <!-- created -->
+          <div class="vpns__field created">
+            <span class="vpns__header">Created</span>
+            <span class="text-m">{{ getCreated(vpn.created) }}</span>
+          </div>
+
+          <!-- status dot -->
+          <div class="vpns__field status">
+            <span class="vpns__header">Status</span>
+            <StatusDot :isActive="vpn.active" :isInactive="!vpn.active" :small="true" :statusText="vpn.active ? 'Active' : 'Inactive' " />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text-m {
+  font-size: 0.8rem;
+}
+
+.flagIcon {
+  @apply h-4 w-4 rounded-xl mr-1;
+}
+
+/* list item */
+.vpns__item {
+  @apply grid auto-rows-auto gap-y-4 bg-white text-gray-500 border-t-8 border-gray-400 rounded-md w-full p-5 pr-8;
+  @apply cursor-pointer transition-all duration-100;
+}
+.vpns__item.active {
+  @apply border-green;
+}
+.vpns__item.inactive {
+  @apply border-red;
+}
+
+/* list item content */
+.vpns__field {
+  @apply flex flex-col;
+}
+.vpns__header {
+  @apply text-md mr-2;
+}
+.ip__and__domain {
+  @apply flex flex-col overflow-hidden;
+}
+.zone, .created, .status {
+  @apply flex flex-col;
+}
+.vpns__name {
+  @apply text-md text-gray-500 truncate;
+}
+.active .vpns__name {
+  @apply text-green font-medium;
+}
+.inactive .vpns__name {
+  @apply text-red font-medium;
+}
+.vpns__stats {
+  @apply flex space-x-1.5;
+}
+/* status dot */
+.vpns__statusDot {
+  @apply w-2.5 h-2.5 rounded-full mr-1 bg-gray-400;
+}
+.active .vpns__statusDot {
+  @apply bg-green;
+}
+.inactive .vpns__statusDot {
+  @apply bg-red;
+}
+.divider {
+  @apply h-full bg-gray-400;
+  width: 1px
+}
+
+/* tablet sized screens up to desktop */
+@media (min-width: 470px) {
+  .vpns__item {
+    @apply grid-rows-3 gap-x-10;
+    grid-template-columns: auto;
+  }
+  .vpns__header {
+    @apply mr-0;
+  }
+  .details {
+    @apply col-span-2;
+  }
+  .ip__and__domain {
+    @apply flex-row space-x-1
+  }
+  .ip__and__domain.divider {
+    @apply block;
+  }
+  .zone {
+    @apply col-start-2 row-start-2;
+  }
+
+  .created {
+    @apply col-start-1 row-start-3;
+  }
+
+  .status {
+    @apply col-start-2 row-start-3;
+  }
+
+  .divider {
+    @apply block;
+  }
+}
+
+@screen lg {
+  .vpns__item {
+    @apply flex justify-between border-l-8 border-t-0 gap-x-4;
+  }
+  .details {
+    @apply col-span-1 flex-shrink;
+    flex-basis: 280px;
+  }
+  .zone {
+    @apply col-start-3 row-start-1 flex-shrink-0;
+    flex-basis: 100px;
+  }
+  .created {
+    @apply col-start-4 row-start-1 flex-shrink-0;
+    flex-basis: 120px;
+  }
+  .status {
+    @apply col-start-5 row-start-1;
+    flex-basis: 100px;
+  }
+  /* zone and created fields are hidden on small desktop screens */
+  .zone, .created {
+    @apply hidden;
+  }
+}
+
+@media (min-width: 1180px) {
+  .zone, .created {
+    @apply flex;
+  }
+}
+
+@media (max-width: 370px) {
+  .vpns__stats {
+    @apply flex-col space-x-0;
+  }
+
+  .vpns__stats .divider {
+    @apply hidden;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b5cda9be..a5640c86 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -39,6 +39,7 @@ import Storage from '@/views/dashboard/Storage'
 import StorageDeploy from '@/views/dashboard/StorageDeploy'
 import StorageIntegration from '@/views/dashboard/StorageIntegration'
 import Support from '@/views/dashboard/Support'
+import VPNs from '../modules/vpns/views/VPNs.vue'
 import Wallet from '@/components/billing/Wallet'
 import store from '@/store'
 import { createRouter, createWebHistory } from 'vue-router'
@@ -216,6 +217,11 @@ const routes = [
         path: '/support',
         name: 'Support',
         component: Support
+      },
+      {
+        path: '/vpns',
+        name: 'VPN',
+        component: VPNs
       }
     ]
   },

From 70116bd1193ec37af00bfd30b95884a89554ba54 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Tue, 4 Mar 2025 10:57:27 +0000
Subject: [PATCH 23/29] feat: vpn deploy view, detail view wip

---
 src/modules/vpns/views/DeployVPN.vue | 283 +++++++++++++++++++++++++++
 src/modules/vpns/views/VPN.vue       |  92 +++++++++
 src/modules/vpns/views/VPNs.vue      |  23 ++-
 src/router/index.js                  |  14 +-
 src/utils/validation.js              |   5 +
 5 files changed, 414 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/vpns/views/DeployVPN.vue
 create mode 100644 src/modules/vpns/views/VPN.vue

diff --git a/src/modules/vpns/views/DeployVPN.vue b/src/modules/vpns/views/DeployVPN.vue
new file mode 100644
index 00000000..ec19cf06
--- /dev/null
+++ b/src/modules/vpns/views/DeployVPN.vue
@@ -0,0 +1,283 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import * as validation from '@/utils/validation'
+import { CheckIcon } from '@heroicons/vue/outline'
+import DeploymentWarning from '../../../components/DeploymentWarning.vue'
+import HttpError from '../../../components/HttpError.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import NetworkRegion from '../../../components/server/deploy/NetworkRegion.vue'
+import Slider from '../../../layout/Slider.vue'
+import ValidationError from '../../../components/ValidationError.vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import useVuelidate from '@vuelidate/core'
+import { RadioGroup, RadioGroupDescription, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+import { computed, reactive, ref } from 'vue'
+
+const router = useRouter()
+const store = useStore()
+
+const disabled = computed(() => store.state.balanceWarning || store.state.balanceSuspend || store.state.isRegionDisabled)
+const error = ref()
+const loading = ref(false)
+
+const formState = reactive({
+  multiuser: false,
+  name: '',
+  region: '',
+  speed: 'fast'
+})
+
+const httpError = computed(() => {
+  if (error && typeof error.status === 'number') {
+    return error
+  }
+  return null
+})
+
+const internalServerError = computed(() => {
+  if (error && error.status === 500) {
+    return error
+  }
+  return null
+})
+
+const overCapacityError = computed(() => {
+  if (error && error.status === 500 && error.response.body.detail === 'there is no suitable node in cluster') {
+    return error
+  }
+  return null
+})
+
+const v$ = useVuelidate({
+  multiuser: [],
+  name: [validation.required],
+  region: [validation.required],
+  speed: [validation.oneOf(['fast', 'faster', 'fastest'])]
+}, formState)
+
+const canDeploy = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
+
+const speedMarks = { 0: 'Fast', 1: 'Faster', 2: 'Fastest' }
+
+async function deploy() {
+  await v$.value.$validate()
+  if (v$.$invalid) return
+
+  try {
+    error.value = null
+    loading.value = true
+
+    const res = await utils.createVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, {
+      vpn: {
+        ...formState,
+        account: store.state.session.account
+      }
+    })
+
+    for (const i in res.tasks) {
+      store.commit('addTask', res.tasks[i])
+    }
+
+    router.push({ name: 'VPN', params: { id: res.vpn._key }})
+  }
+  catch (err) {
+    error.value = err
+    return
+  }
+  finally {
+    loading.value = false
+  }
+
+  console.log({ ...formState })
+}
+
+function formatSpeedMark(value) {
+  if (value === 2) return 'Fastest'
+  if (value === 1) return 'Faster'
+  return 'Fast'
+}
+
+function setRegion(region) {
+  formState.region = region._key
+}
+
+function setSpeed(value) {
+  formState.speed = formatSpeedMark(value).toLowerCase()
+}
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <h1>Deploy a new VPN</h1>
+    <form class="flex flex-col col-span-12 pb-20 space-y-4">
+      <!-- balance warning -->
+      <DeploymentWarning v-if="store.state.balanceSuspend || store.state.balanceWarning" />
+
+      <!-- network region -->
+      <div class="box">
+        <h4>Network region</h4>
+        <NetworkRegion
+          :disableControls=disabled
+          @region-changed="setRegion"
+          ref="networkRegion"
+        />
+      </div>
+
+      <!-- server specs - cpu / ram / storage -->
+      <div class="box">
+        <h4>VPN specs</h4>
+
+        <!-- Single/multi-user -->
+        <RadioGroup v-model="formState.multiuser">
+          <div class="box__grid mb-8">
+            <RadioGroupOption as="template" :value="false" :disabled="disabled" v-slot="{ active, checked, disabled }">
+              <div :class="{ radioOption: true, active, checked, disabled }">
+                <div :class="{ checkmark: true, active, checked }">
+                  <CheckIcon class="checkmark__icon" />
+                </div>
+                <div class="optionDetails">
+                  <RadioGroupLabel as="h4" class="optionDetails__name">
+                    Single-user VPN
+                  </RadioGroupLabel>
+                  <RadioGroupDescription as="span" class="optionDetails__description">
+                    <span>Ideal for individual use.</span>
+                  </RadioGroupDescription>
+                </div>
+              </div>
+            </RadioGroupOption>
+
+            <RadioGroupOption as="template" :value="true" :disabled="disabled" v-slot="{ active, checked, disabled }">
+              <div :class="{ radioOption: true, active, checked, disabled }">
+                <div :class="{ checkmark: true, active, checked }">
+                  <CheckIcon class="checkmark__icon" />
+                </div>
+                <div class="optionDetails">
+                  <RadioGroupLabel as="h4" class="optionDetails__name">
+                    Multi-user VPN
+                  </RadioGroupLabel>
+                  <RadioGroupDescription as="span" class="optionDetails__description">
+                    <span>Multi-user VPN includes up to five users. You can pay for additional users.</span>
+                  </RadioGroupDescription>
+                </div>
+              </div>
+            </RadioGroupOption>
+          </div>
+        </RadioGroup>
+
+        <!-- VPN speed -->
+        <Slider
+          :disabled="disabled"
+          :formatter="formatSpeedMark"
+          :marks="speedMarks"
+          :max="2"
+          :min="0"
+          title="Speed"
+          tooltip="always"
+          @change="setSpeed"
+        />
+        <ValidationError :errors="v$.speed.$errors" />
+      </div>
+
+      <!-- server name -->
+      <div class="box">
+        <div class="flex flex-col pb-2 space-y-6">
+          <div class="input-group">
+            <label class="label">Name</label>
+            <input
+              class="input input--floating"
+              placeholder="My VPN"
+              required
+              type="text"
+              :class="{ disabled }"
+              :disabled="disabled"
+              v-model="v$.name.$model"
+            />
+          </div>
+        </div>
+        <ValidationError :errors="v$.name.$errors" />
+      </div>
+
+      <!-- deploy button & error message -->
+      <div class="flex flex-col w-full space-y-2">
+        <button
+          @click.prevent="deploy"
+          :disabled="!canDeploy"
+          class="button button--success self-end w-full md:max-w-xs"
+        >
+          <div v-if="loading" class="flex">
+            <span>Deploying</span>
+            <span class="ml-2"><LoadingSpinner /></span>
+          </div>
+          <span v-else>Deploy</span>
+        </button>
+
+        <div v-if="overCapacityError" class="server__error over-capacity">
+          <span class="font-bold">We're over capacity</span>
+          <span>It appears that we are at capacity in this region. We're working hard to increase this. Please check back soon.</span>
+        </div>
+        <div v-else-if="internalServerError" class="server__error">
+          <span class="font-bold">Something went wrong</span>
+          <span>There was an issue while deploying this VPN. Please try again, or contact support@edge.network if the issue persists.</span>
+        </div>
+        <div v-else-if="httpError" class="flex md:justify-end mt-2">
+          <HttpError :error="httpError" />
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.box__grid {
+  @apply mt-6 w-full grid grid-cols-1 gap-4;
+  @apply sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4;
+}
+
+/* radio option */
+.radioOption {
+  @apply relative flex space-x-3 items-start p-5 border border-gray-300 rounded-md cursor-pointer;
+  @apply hover:bg-gray-100 hover:bg-opacity-50;
+  @apply focus:outline-none;
+}
+.radioOption.active {
+  @apply border-green border-opacity-40;
+}
+.radioOption.checked {
+  @apply bg-gray-100 border-green bg-opacity-75;
+  @apply ring-4 ring-green ring-opacity-10;
+}
+.radioOption.disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+/* radio option details */
+.optionDetails {
+  @apply flex flex-col flex-1 text-sm;
+}
+.optionDetails__city {
+  @apply text-sm text-gray-500;
+}
+
+/* checkmark */
+.checkmark {
+  @apply flex items-center justify-center text-white flex-shrink-0 rounded-full w-5 h-5 bg-gray-100 border border-gray-300;
+}
+.checkmark.active {
+  @apply border-green border-opacity-40 bg-opacity-20;
+}
+.checkmark.checked {
+  @apply border-green bg-green;
+}
+.checkmark .checkmark__icon {
+  @apply opacity-0 w-3 h-3;
+}
+.checkmark.active .checkmark__icon {
+  @apply opacity-40;
+}
+.checkmark.checked .checkmark__icon {
+  @apply opacity-100;
+}
+</style>
diff --git a/src/modules/vpns/views/VPN.vue b/src/modules/vpns/views/VPN.vue
new file mode 100644
index 00000000..9c638810
--- /dev/null
+++ b/src/modules/vpns/views/VPN.vue
@@ -0,0 +1,92 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import { ArrowLeftIcon } from '@heroicons/vue/outline'
+import EditableTitle from '../../../layout/EditableTitle.vue'
+import ValidationError from '../../../components/ValidationError.vue'
+import { useStore } from 'vuex'
+import useVuelidate from '@vuelidate/core'
+import { RouterLink, useRoute } from 'vue-router'
+import { computed, effect, reactive, ref } from 'vue'
+import { minLength, required } from '@vuelidate/validators'
+
+const route = useRoute()
+const store = useStore()
+
+const busy = ref(false)
+const data = ref()
+const error = ref()
+const loading = ref(false)
+const vpn = computed(() => data.value && data.value.vpn)
+
+const formState = reactive({
+  name: ''
+})
+
+const v$ = useVuelidate({
+  name: [required, minLength(3)]
+}, formState)
+
+async function reload() {
+  try {
+    error.value = undefined
+    loading.value = true
+
+    data.value = await utils.getVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, route.params.id)
+    reset()
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function reset() {
+  v$.value.name.$model = data.value && data.value.vpn && data.value.vpn.name
+}
+
+async function updateName() {
+  try {
+    error.value = undefined
+    busy.value = true
+
+    data.value = await utils.updateVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, route.params.id, {
+      vpn: {
+        name: v$.value.name.$model
+      }
+    })
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+</script>
+
+<template>
+  <div class="mainContent__inner vpn" v-if="vpn">
+    <div class="w-max">
+      <RouterLink :to="{ name: 'VPNs' }" class="flex items-center space-x-1 hover:text-green mb-4">
+        <ArrowLeftIcon class="w-4" /><span>VPNs</span>
+      </RouterLink>
+    </div>
+
+    <EditableTitle
+      placeholder="VPN name"
+      v-model="v$.name.$model"
+      :busy="busy"
+      :invalid="v$.name.$invalid"
+      @save="updateName"
+    />
+    <ValidationError v-if="v$.name.$errors" :errors="v$.name.$errors" />
+  </div>
+</template>
diff --git a/src/modules/vpns/views/VPNs.vue b/src/modules/vpns/views/VPNs.vue
index 3129db21..338b2d75 100644
--- a/src/modules/vpns/views/VPNs.vue
+++ b/src/modules/vpns/views/VPNs.vue
@@ -49,6 +49,13 @@ effect(() => {
   <div class="mainContent__inner">
     <div class="flex flex-col sm:flex-row justify-between">
       <h1>Edge VPN</h1>
+      <router-link
+        v-if="data && data.results.length > 0"
+        :to="{ name: 'Deploy VPN' }"
+        class="button button--success button--small h-full mb-5 sm:mb-0"
+      >
+        Deploy VPN
+      </router-link>
     </div>
     <div v-if="error" class="box">
       <div class="flex flex-col space-y-4 items-center justify-center py-4">
@@ -60,11 +67,11 @@ effect(() => {
       <div class="ml-2"><LoadingSpinner /></div>
     </div>
     <div v-else-if="data">
-      <ul class="space-y-2">
+      <ul v-if="data.results.length > 0" class="space-y-2">
         <li
           v-for="{ vpn, server } in data.results"
           :key="vpn._key"
-          @click="router.push({ name: 'Bare Metal', params: { key: vpn._key }})"
+          @click="router.push({ name: 'VPN', params: { id: vpn._key }})"
           class="vpns__item"
           :class="vpn.active ? 'active' : 'inactive'"
         >
@@ -122,6 +129,18 @@ effect(() => {
           </div>
         </li>
       </ul>
+
+      <div v-else class="box">
+      <div class="flex flex-col space-y-4 items-center justify-center py-4">
+        <p>You haven't deployed any VPNs yet. Once you deploy your first VPN it will be available here.</p>
+        <router-link
+          :to="{ name: 'Deploy VPN' }"
+          class="button button--success button--small"
+        >
+          Deploy VPN
+        </router-link>
+      </div>
+    </div>
     </div>
   </div>
 </template>
diff --git a/src/router/index.js b/src/router/index.js
index a5640c86..8724286b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,7 @@ import CdnIntegration  from '@/views/dashboard/CdnIntegration'
 import CdnIntegrations from '@/views/dashboard/CdnIntegrations'
 import CreateAccount from '@/views/landing/CreateAccount'
 import Dashboard from '@/views/Dashboard'
+import DeployVPN from '../modules/vpns/views/DeployVPN.vue'
 import Domain from '@/views/dashboard/Domain'
 import Domains from '@/views/dashboard/Domains'
 import GettingStarted from '@/views/dashboard/GettingStarted'
@@ -39,6 +40,7 @@ import Storage from '@/views/dashboard/Storage'
 import StorageDeploy from '@/views/dashboard/StorageDeploy'
 import StorageIntegration from '@/views/dashboard/StorageIntegration'
 import Support from '@/views/dashboard/Support'
+import VPN from '../modules/vpns/views/VPN.vue'
 import VPNs from '../modules/vpns/views/VPNs.vue'
 import Wallet from '@/components/billing/Wallet'
 import store from '@/store'
@@ -220,8 +222,18 @@ const routes = [
       },
       {
         path: '/vpns',
-        name: 'VPN',
+        name: 'VPNs',
         component: VPNs
+      },
+      {
+        path: '/vpns/deploy',
+        name: 'Deploy VPN',
+        component: DeployVPN
+      },
+      {
+        path: '/vpn/:id',
+        name: 'VPN',
+        component: VPN
       }
     ]
   },
diff --git a/src/utils/validation.js b/src/utils/validation.js
index e9579f5b..cecde5f8 100644
--- a/src/utils/validation.js
+++ b/src/utils/validation.js
@@ -10,6 +10,11 @@ import { email as _email, required as _required, helpers, or } from '@vuelidate/
  */
 export const required = helpers.withMessage('A value is required.', _required)
 
+export const oneOf = values => {
+  const message = `Must be one of "${values.join('", "')}"`
+  return helpers.withMessage(message, value => values.includes(value))
+}
+
 /**
  * Account number validator.
  */

From 1d6e5d9f63e61781a4fe7acf9fae79c263cf7945 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Tue, 4 Mar 2025 10:58:23 +0000
Subject: [PATCH 24/29] tweak: improve usage of model in EditableTitle

---
 src/modules/vpns/views/VPN.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/modules/vpns/views/VPN.vue b/src/modules/vpns/views/VPN.vue
index 9c638810..e36f2610 100644
--- a/src/modules/vpns/views/VPN.vue
+++ b/src/modules/vpns/views/VPN.vue
@@ -45,7 +45,9 @@ async function reload() {
 }
 
 function reset() {
-  v$.value.name.$model = data.value && data.value.vpn && data.value.vpn.name
+  if (vpn.value) {
+    v$.value.name.$model = vpn.value.name
+  }
 }
 
 async function updateName() {
@@ -58,6 +60,7 @@ async function updateName() {
         name: v$.value.name.$model
       }
     })
+    reset()
   }
   catch (err) {
     error.value = err
@@ -81,12 +84,12 @@ effect(() => {
     </div>
 
     <EditableTitle
-      placeholder="VPN name"
       v-model="v$.name.$model"
+      placeholder="VPN name"
       :busy="busy"
       :invalid="v$.name.$invalid"
       @save="updateName"
     />
-    <ValidationError v-if="v$.name.$errors" :errors="v$.name.$errors" />
+    <ValidationError :errors="v$.name.$errors" />
   </div>
 </template>

From f8ded4f463cf3615233e4e6ebab6b5f11867c414 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 3 Feb 2025 16:07:47 +0000
Subject: [PATCH 25/29] feat: vpn overview

---
 src/components/server/ServerPowerToggle.vue |   5 +-
 src/modules/vpns/components/VPNOverview.vue | 273 ++++++++++++++++++++
 src/modules/vpns/views/VPN.vue              | 255 +++++++++++++++++-
 src/views/dashboard/Server.vue              |   6 +-
 4 files changed, 528 insertions(+), 11 deletions(-)
 create mode 100644 src/modules/vpns/components/VPNOverview.vue

diff --git a/src/components/server/ServerPowerToggle.vue b/src/components/server/ServerPowerToggle.vue
index c19173b6..a350d21a 100644
--- a/src/components/server/ServerPowerToggle.vue
+++ b/src/components/server/ServerPowerToggle.vue
@@ -55,7 +55,7 @@ import { mapGetters, mapState } from 'vuex'
 
 export default {
   name: 'ServerPowerToggle',
-  props: ['activeTasks', 'disableActions', 'server'],
+  props: ['disableActions', 'server'],
   data() {
     return {
       showConfirmationModal: false,
@@ -71,6 +71,9 @@ export default {
   computed: {
     ...mapGetters(['balanceSuspend']),
     ...mapState(['session']),
+    activeTasks() {
+      return this.$store.getters.tasksByServerId(this.serverId)
+    },
     destroying() {
       return this.activeTasks.some(task => task.action === 'destroy')
     },
diff --git a/src/modules/vpns/components/VPNOverview.vue b/src/modules/vpns/components/VPNOverview.vue
new file mode 100644
index 00000000..6145d5f4
--- /dev/null
+++ b/src/modules/vpns/components/VPNOverview.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="grid gap-4 xl:grid-cols-2">
+    <div class="box overflow_hidden vpn__details xl:col-span-2">
+      <h4 class="section__title">VPN details</h4>
+      <div class="overview__grid">
+        <!-- name, hostname, ip, region -->
+        <div class="grid__col col__1">
+          <div class="info__section">
+            <span class="label">VPN Name</span><span class="info">{{ vpn.name }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">Hostname</span><span class="info">{{ server.settings.domain }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">IP Address</span>
+            <div class="relative flex w-max">
+              <span class="">{{ server.network.ip[0] }}</span>
+              <button
+                @click.prevent="copyToClipboard(server.network.ip[0])"
+                class="text-gray-400 hover:text-green"
+              >
+                <DuplicateIcon class="ml-2 w-5 h-5" />
+              </button>
+              <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
+            </div>
+          </div>
+          <div class="info__section">
+            <span class="label">Region</span>
+            <span class="info">{{ region ? region.name : 'Unknown' }}</span>
+          </div>
+        </div>
+        <!-- status, os, created, updated -->
+        <div class="grid__col col__2">
+          <div class="info__section">
+            <span class="label">Status</span><span class="info">
+              <StatusDot
+                :isActive=isActive
+                :isInactive=isInactive
+                :statusText=statusText
+              />
+            </span>
+          </div>
+          <div class="info__section">
+            <span class="label">OS</span><span class="info">{{ server.settings.os.version }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">Created</span><span class="info">{{ created }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">Last Updated</span><span class="info">{{ updated }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="box overflow_hidden vpn__specs">
+      <h4 class="section__title">VPN specs</h4>
+      <div class="overview__grid">
+        <div class="info__section">
+          <span class="label">Type</span>
+          <span v-if="vpn.multiuser" class="info">Multiuser</span>
+          <span v-else class="info">Single-user</span>
+        </div>
+        <div class="info__section">
+          <span class="label">Speed</span>
+          <span v-if="vpn.speed === 'fastest'" class="info">Fastest</span>
+          <span v-else-if="vpn.speed === 'faster'" class="info">Faster</span>
+          <span v-if="vpn.speed === 'fast'" class="info">Fast</span>
+        </div>
+      </div>
+    </div>
+    <div class="box overflow_hidden vpn__costs">
+      <h4 class="section__title">Cost</h4>
+      <!-- hourly and daily costs -->
+      <div class="overview__grid">
+        <div class="info__section">
+          <span class="label">Hourly</span><span class="info">${{ formattedHourlyCost }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">Daily</span><span class="info">${{ formattedDailyCost }}</span>
+        </div>
+      </div>
+    </div>
+</div>
+</template>
+
+<script>
+import * as format from '@/utils/format'
+import { DuplicateIcon } from '@heroicons/vue/outline'
+import StatusDot from '@/components/StatusDot'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'VPNOverview',
+  props: ['region', 'server', 'vpn'],
+  components: {
+    DuplicateIcon,
+    StatusDot
+  },
+  data() {
+    return {
+      copied: false
+    }
+  },
+  computed: {
+    ...mapState(['config']),
+    activeTasks() {
+      if (this.server) return this.$store.getters.tasksByServerId(this.server._key)
+      return []
+    },
+    created() {
+      return this.formatTimestamp(this.server.created)
+    },
+    disablingTaskInProgress() {
+      return this.isStopping || this.isStarting || this.isResizing || this.isRestoring
+    },
+    formattedDailyCost() {
+      return format.usd(this.hourlyCost * 24, 2)
+    },
+    formattedDisk() {
+      return format.mib(this.server.spec.disk)
+    },
+    formattedHourlyCost() {
+      return format.usd(this.hourlyCost, 4)
+    },
+    formattedRAM() {
+      return format.mib(this.server.spec.ram)
+    },
+    hourlyCost() {
+      if (this.vpn.multiuser) {
+        const chargeableUsers = Math.max(0, this.vpn.users - this.config.vpn.multiuser.usersIncluded)
+        const userCost = this.config.vpn.multiuser.costPerUser * chargeableUsers
+        const periodCost = this.config.vpn.multiuser.cost + userCost
+        const hourlyCost = periodCost / this.config.vpn.multiuser.costBasis
+        return hourlyCost
+      }
+
+      return this.config.vpn.singleuser.cost / this.config.vpn.singleuser.costBasis
+    },
+    isCreating() {
+      return this.activeTasks.some(task => task.action === 'create')
+    },
+    isActive() {
+      return (!this.disablingTaskInProgress) && this.server.status === 'active'
+    },
+    isDestroyed() {
+      return this.server.status === 'deleted' && !this.activeTasks.some(task => task.action === 'destroy')
+    },
+    isDestroying() {
+      return this.activeTasks.some(task => task.action === 'destroy')
+    },
+    isInactive() {
+      return (!this.disablingTaskInProgress) && (['deleted', 'deleting', 'stopped'].includes(this.server.status) || this.isDestroying)
+    },
+    isResizing() {
+      const diskResize = this.activeTasks.some(task => task.action === 'resizeDisk')
+      const resourceResize = this.activeTasks.some(task => task.action === 'resizeResource')
+      return diskResize || resourceResize
+    },
+    isRestoring() {
+      return this.activeTasks.some(task => task.action === 'restoreBackup')
+    },
+    isStarting() {
+      return this.activeTasks.some(task => task.action === 'start')
+    },
+    isStopping() {
+      return this.activeTasks.some(task => task.action === 'stop')
+    },
+    statusText() {
+      if (this.isStopping) return 'Stopping'
+      if (this.isDestroying) return 'Deleting'
+      if (this.isResizing) return 'Resizing'
+      if (this.isRestoring) return 'Restoring'
+      if (this.isStarting) return 'Starting'
+      return this.server.status
+    },
+    updated() {
+      return this.formatTimestamp(this.server.updatedByUser || this.server.created)
+    }
+  },
+  methods: {
+    async copyToClipboard(str) {
+      await navigator.clipboard.writeText(str)
+      this.copied = true
+
+      setTimeout(() => {
+        this.copied = false
+      }, 1000)
+    },
+    formatTimestamp(ts) {
+      return `${format.date(ts)}, ${format.time(ts)}`
+    }
+  }
+}
+</script>
+<style scoped>
+.section__title {
+  @apply mb-4;
+}
+.overview__grid {
+  @apply grid grid-cols-1 gap-y-4;
+}
+.grid__col {
+  @apply flex flex-col space-y-4
+}
+.info__section {
+  @apply flex overflow-hidden w-full;
+}
+.label {
+  @apply font-bold block mr-2 flex-shrink-0 w-24;
+}
+.vpn__details .info__section {
+  @apply flex-col;
+}
+
+.info {
+  @apply flex-shrink-0 truncate w-full;
+}
+
+.copied {
+  @apply absolute pointer-events-none opacity-0 top-0 left-0 flex items-center justify-center w-full h-full font-medium bg-white bg-opacity-95 text-green;
+  @apply transition-opacity duration-200 ease-in;
+}
+.copied.visible {
+  @apply opacity-100;
+}
+
+@media (max-width: 450px) {
+  .vpn__details .info__section {
+    @apply flex-col;
+  }
+}
+
+@media (min-width: 450px) {
+  .vpn__details .info__section {
+    @apply flex-row;
+  }
+
+  .vpn__specs .overview__grid, .vpn__costs .overview__grid {
+    @apply grid-cols-2;
+  }
+  .vpn__specs .label, .vpn__costs .label {
+    @apply w-20;
+  }
+
+  /* .overview__grid {
+    @apply grid-cols-2
+  } */
+}
+@screen lg {
+  .vpn__specs .overview__grid {
+    @apply grid-cols-4;
+  }
+  .vpn__specs .label {
+    @apply w-max;
+  }
+  .vpn__costs .label {
+    @apply w-max;
+  }
+}
+@screen xl {
+  .vpn__details .overview__grid {
+    @apply grid-cols-2
+  }
+  .vpn__specs .overview__grid {
+    @apply grid-cols-2
+  }
+}
+@screen 2xl {
+  .vpn__specs .overview__grid {
+    grid-template-columns: repeat(3, 1fr) auto;
+  }
+}
+</style>
diff --git a/src/modules/vpns/views/VPN.vue b/src/modules/vpns/views/VPN.vue
index e36f2610..1db442c0 100644
--- a/src/modules/vpns/views/VPN.vue
+++ b/src/modules/vpns/views/VPN.vue
@@ -2,23 +2,50 @@
 /* global process */
 
 import * as utils from '@edge/account-utils'
-import { ArrowLeftIcon } from '@heroicons/vue/outline'
+import DestroyServerConfirmation from '../../../components/confirmations/DestroyServerConfirmation.vue'
+import DistroIcon from '../../../components/icons/DistroIcon.vue'
 import EditableTitle from '../../../layout/EditableTitle.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import ProgressBar from '../../../components/ProgressBar.vue'
+import ServerPowerToggle from '../../../components/server/ServerPowerToggle.vue'
+import StatusDot from '../../../components/StatusDot.vue'
+import Tooltip from '../../../components/Tooltip.vue'
 import ValidationError from '../../../components/ValidationError.vue'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
+import { ArrowLeftIcon, InformationCircleIcon } from '@heroicons/vue/outline'
 import { RouterLink, useRoute } from 'vue-router'
 import { computed, effect, reactive, ref } from 'vue'
 import { minLength, required } from '@vuelidate/validators'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
+import VPNOverview from '../components/VPNOverview.vue'
 
 const route = useRoute()
 const store = useStore()
 
 const busy = ref(false)
-const data = ref()
 const error = ref()
 const loading = ref(false)
-const vpn = computed(() => data.value && data.value.vpn)
+const region = ref()
+const server = ref()
+const vpn = ref()
+
+const activeTasks = computed(() => {
+  if (!store.value) return []
+  if (!server.value) return []
+  return store.value.getters.tasksByServerId(this.serverId)
+})
+
+const isCreating = computed(() => activeTasks.value.some(task => task.action === 'create'))
+const isDestroying = computed(() => activeTasks.value.some(task => task.action === 'destroy'))
+const isResizing = computed(() => activeTasks.value.some(task => task.action === 'resizeDisk' || task.action === 'resizeResource'))
+const isRestoring = computed(() => activeTasks.value.some(task => task.action === 'restoreBackup'))
+
+const showDestroyConfirmationModal = ref(false)
+
+function toggleDestroyConfirmationModal() {
+  showDestroyConfirmationModal.value = !showDestroyConfirmationModal.value
+}
 
 const formState = reactive({
   name: ''
@@ -28,12 +55,21 @@ const v$ = useVuelidate({
   name: [required, minLength(3)]
 }, formState)
 
+async function destroy() {
+  console.log('WIP')
+}
+
 async function reload() {
   try {
     error.value = undefined
     loading.value = true
 
-    data.value = await utils.getVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, route.params.id)
+    let res = await utils.getVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, route.params.id)
+    server.value = res.server
+    vpn.value = res.vpn
+
+    res = await utils.getRegion(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, server.value.region)
+    region.value = res.region
     reset()
   }
   catch (err) {
@@ -55,11 +91,13 @@ async function updateName() {
     error.value = undefined
     busy.value = true
 
-    data.value = await utils.updateVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, route.params.id, {
+    const res = await utils.updateVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, route.params.id, {
       vpn: {
         name: v$.value.name.$model
       }
     })
+    server.value = res.server
+    vpn.value = res.vpn
     reset()
   }
   catch (err) {
@@ -83,6 +121,7 @@ effect(() => {
       </RouterLink>
     </div>
 
+    <!-- Title -->
     <EditableTitle
       v-model="v$.name.$model"
       placeholder="VPN name"
@@ -91,5 +130,211 @@ effect(() => {
       @save="updateName"
     />
     <ValidationError :errors="v$.name.$errors" />
+
+    <!-- IP and domain -->
+    <div v-if="server" class="flex items-center mt-1 text-gray-500 truncate collapse sub-header space-x-2">
+      <span>{{ server.network.ip[0] }}</span>
+      <span class="divider" />
+      <span class="truncate">{{ server.settings.domain }}</span>
+    </div>
+
+    <!-- Server overview -->
+    <div v-if="server" class="flex items-center mt-3 space-x-3 text-gray-500 md:justify-between sm:mt-4 collapse status-row">
+      <div class="relative flex-1">
+        <div class="flex items-center justify-start space-x-2 collapse server-info">
+          <div class="flex items-center flex-shrink-0 space-x-1 text-gray-900">
+            <DistroIcon
+              :os="server.settings.os.group"
+              className="server-icon"
+            />
+            <span class="server-detail">{{ server.settings.os.version }}</span>
+          </div>
+          <span class="divider"/>
+          <div class="flex items-center space-x-2 flex-shrink-0 specs">
+            <span v-if="vpn.multiuser" class="server-detail">Multiuser</span>
+            <span v-else>Single-user</span>
+            <span class="divider"/>
+
+            <span v-if="vpn.speed === 'fastest'" class="server-detail">Fastest</span>
+            <span v-else-if="vpn.speed === 'faster'" class="server-detail">Faster</span>
+            <span v-else class="server-detail">Fast</span>
+            <span class="divider"/>
+          </div>
+          <div class="flex items-center space-x-1">
+            <StatusDot
+              :isActive="server.status === 'active'"
+              :isInactive="server.status !== 'active'"
+              :statusText="server.status === 'active' ? 'Active': 'Stopped'"
+            />
+            <Tooltip v-if="vpn.suspended" position="right" theme="error" text="Your VPN has been suspended due to unpaid invoices. When you add funds to your account it will automatically restart.">
+              <InformationCircleIcon class="w-4" />
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+      <div class="flex-shrink-0" v-if="server">
+        <ServerPowerToggle :disableActions="busy" :server="server" />
+      </div>
+    </div>
+
+    <div v-if="vpn" class="grid items-start grid-cols-12 mt-4 space-x-10">
+      <div class="col-span-12">
+        <!-- Destroyed -->
+        <div v-if="vpn.status === 'deleted'" class="box">
+          <div class="flex flex-col items-center justify-center text-center">
+            <h4>VPN Destroyed</h4>
+            <p class="mb-0 text-gray-500">This VPN and all of its associated backups have been destroyed.</p>
+            <router-link
+              class="mt-4 button button--success button--small"
+              :to="{ name: 'VPNs' }"
+            >
+              <span>Return to VPNs</span>
+            </router-link>
+          </div>
+        </div>
+
+        <!-- crashed -->
+        <div v-else-if="vpn.status === 'crashed'" class="box">
+          <div class="flex flex-col items-center justify-center text-center">
+            <h4>Server Crashed</h4>
+            <p class="mb-0 text-gray-500">There was a problem with your VPN, please either delete and re-deploy the VPN or contact support@edge.network for assistance.</p>
+            <button
+              class="mt-4 button button--error button--small w-full md:max-w-xs"
+              :disabled="isDestroying"
+              @click.prevent="toggleDestroyConfirmationModal"
+            >
+              <div v-if=isDestroying class="flex">
+                <span>Destroying</span>
+                <span class="ml-2"><LoadingSpinner /></span>
+              </div>
+              <span v-else>Destroy VPN</span>
+            </button>
+          </div>
+          <!-- destroy confirmation modal -->
+          <DestroyServerConfirmation
+            v-if="server && showDestroyConfirmationModal"
+            @modal-confirm="destroy"
+            @modal-close="toggleDestroyConfirmationModal"
+            :serverName="vpn.name"
+          />
+        </div>
+
+        <!-- action in progress section -->
+        <div v-else-if="isCreating || isDestroying || isResizing" class="box box--tall">
+          <div class="flex flex-col items-center justify-center text-center">
+            <h4 class="mt-4">
+              <span v-if="isCreating">Deploying your new VPN</span>
+              <span v-else-if="isDestroying">Destroying your VPN</span>
+              <span v-else-if="isResizing">Resizing your VPN</span>
+              <span v-else-if="isRestoring">Restoring your VPN backup</span>
+            </h4>
+            <p class="mt-2 mb-0 text-gray-500">This may take a few minutes. Feel free to close this page.</p>
+            <div class="mt-4 max-w-full"><ProgressBar :red="isDestroying" /></div>
+          </div>
+        </div>
+
+        <TabGroup v-else as="div" class="tabGroup">
+          <div class="absolute top-0 right-0 w-10 h-5 bg-gradient-to-l from-gray-200" />
+          <TabList class="tabs pr-6">
+            <Tab v-slot="{selected}">
+              <button
+                class="tab"
+                :class="[selected ? 'tab--selected' : '']"
+              >
+                Overview
+              </button>
+            </Tab>
+          </TabList>
+
+          <TabPanels class="mt-4">
+            <TabPanel v-if="region && server && vpn">
+              <VPNOverview :region="region" :server="server" :vpn="vpn" />
+            </TabPanel>
+          </TabPanels>
+        </TabGroup>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.mainContent__inner.vpn {
+  @apply pt-0 mt-6;
+}
+
+.server-detail {
+  @apply flex-shrink-0;
+}
+.server-icon {
+  @apply w-4 h-4 text-gray-500 flex-shrink-0;
+}
+.specsGradient {
+  @apply absolute top-0 right-0 w-10 h-full pointer-events-none bg-gradient-to-l from-gray-200;
+}
+
+.box.box--tall {
+  @apply py-20 !important;
+}
+
+.divider {
+  @apply h-4 bg-gray-400 w-px flex-shrink-0;
+}
+
+
+@media (max-width: 450px) {
+  .collapse.sub-header {
+    @apply flex-col space-x-0 items-start;
+  }
+  .collapse .divider {
+    @apply hidden;
+  }
+  .collapse .specs {
+    @apply flex-col items-start space-x-0
+  }
+  .collapse .specs .divider {
+    @apply hidden;
+  }
+}
+
+@media (min-width: 450px) and (max-width: 650px) {
+  .collapse .specs .divider {
+    @apply block
+  }
+  .collapse.sub-header .divider {
+    @apply block
+  }
+}
+
+@media (max-width: 650px) {
+  .collapse.server-info {
+    @apply flex-col items-start space-x-0 space-y-1;
+  }
+  .collapse .sub-header {
+    @apply flex-col space-x-0 items-start;
+  }
+  .collapse .divider {
+    @apply hidden;
+  }
+}
+
+@screen md {
+  .collapse.server-info {
+    @apply flex-col items-start space-x-0 space-y-1;
+  }
+  .collapse.server-info .divider {
+    @apply hidden;
+  }
+  .collapse .specs .divider {
+    @apply block
+  }
+}
+
+@screen lg {
+  .collapse.server-info {
+    @apply flex-row items-center space-x-2 space-y-0;
+  }
+  .collapse.server-info .divider {
+    @apply block;
+  }
+}
+</style>
diff --git a/src/views/dashboard/Server.vue b/src/views/dashboard/Server.vue
index 0bdc3ba4..65135c5f 100644
--- a/src/views/dashboard/Server.vue
+++ b/src/views/dashboard/Server.vue
@@ -59,11 +59,7 @@
         </div>
       </div>
       <div class="flex-shrink-0" v-if="!isDestroyed && !isCrashed">
-        <ServerPowerToggle
-          :activeTasks=activeTasks
-          :disableActions=disableActions
-          :server=server
-        />
+        <ServerPowerToggle :disableActions=disableActions :server=server />
       </div>
 
     </div>

From 6ca27e76468e64713dd7e82165eb9683825639b7 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 3 Feb 2025 16:10:17 +0000
Subject: [PATCH 26/29] feat: add metrics tab

---
 src/modules/vpns/views/VPN.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/modules/vpns/views/VPN.vue b/src/modules/vpns/views/VPN.vue
index 1db442c0..e53b8495 100644
--- a/src/modules/vpns/views/VPN.vue
+++ b/src/modules/vpns/views/VPN.vue
@@ -7,18 +7,19 @@ import DistroIcon from '../../../components/icons/DistroIcon.vue'
 import EditableTitle from '../../../layout/EditableTitle.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import ProgressBar from '../../../components/ProgressBar.vue'
+import ServerMetrics from '../../../components/server/ServerMetrics.vue'
 import ServerPowerToggle from '../../../components/server/ServerPowerToggle.vue'
 import StatusDot from '../../../components/StatusDot.vue'
 import Tooltip from '../../../components/Tooltip.vue'
+import VPNOverview from '../components/VPNOverview.vue'
 import ValidationError from '../../../components/ValidationError.vue'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
 import { ArrowLeftIcon, InformationCircleIcon } from '@heroicons/vue/outline'
 import { RouterLink, useRoute } from 'vue-router'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { computed, effect, reactive, ref } from 'vue'
 import { minLength, required } from '@vuelidate/validators'
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
-import VPNOverview from '../components/VPNOverview.vue'
 
 const route = useRoute()
 const store = useStore()
@@ -244,11 +245,23 @@ effect(() => {
                 Overview
               </button>
             </Tab>
+            <Tab v-slot="{selected}">
+              <button
+                class="tab"
+                :class="[selected ? 'tab--selected' : '']"
+              >
+                Metrics
+              </button>
+            </Tab>
           </TabList>
 
           <TabPanels class="mt-4">
-            <TabPanel v-if="region && server && vpn">
-              <VPNOverview :region="region" :server="server" :vpn="vpn" />
+            <TabPanel>
+              <VPNOverview v-if="region && server && vpn" :region="region" :server="server" :vpn="vpn" />
+            </TabPanel>
+
+            <TabPanel>
+              <ServerMetrics v-if="server" :server="server" />
             </TabPanel>
           </TabPanels>
         </TabGroup>

From fe4086c62c1b136ac02ecf3fa22cd2d5de60cade Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 3 Feb 2025 17:28:29 +0000
Subject: [PATCH 27/29] wip speed slider

---
 src/modules/vpns/components/SpeedSlider.vue |  42 +++++
 src/modules/vpns/components/VPNResize.vue   | 186 ++++++++++++++++++++
 src/modules/vpns/views/DeployVPN.vue        |  24 +--
 src/modules/vpns/views/VPN.vue              |  13 ++
 4 files changed, 243 insertions(+), 22 deletions(-)
 create mode 100644 src/modules/vpns/components/SpeedSlider.vue
 create mode 100644 src/modules/vpns/components/VPNResize.vue

diff --git a/src/modules/vpns/components/SpeedSlider.vue b/src/modules/vpns/components/SpeedSlider.vue
new file mode 100644
index 00000000..a2ac3c09
--- /dev/null
+++ b/src/modules/vpns/components/SpeedSlider.vue
@@ -0,0 +1,42 @@
+<script setup>
+import Slider from '../../../layout/Slider.vue'
+import { defineModel, defineProps } from 'vue'
+
+defineProps({
+  disabled: Boolean
+})
+
+const model = defineModel()
+
+const rawMarks = [
+  ['fast', 'Fast'],
+  ['faster', 'Faster'],
+  ['fastest', 'Fastest']
+]
+
+const marks = rawMarks.reduce((ms, m, i) => {
+  ms[i] = m[0]
+  return ms
+}, {})
+
+function formatter(i) {
+  return rawMarks[i][1]
+}
+
+function setSpeed(i) {
+  model.value = rawMarks[i][0]
+}
+</script>
+
+<template>
+  <Slider
+    :disabled="disabled"
+    :formatter="formatter"
+    :marks="marks"
+    :max="2"
+    :min="0"
+    title="Speed"
+    tooltip="always"
+    @change="setSpeed"
+  />
+</template>
diff --git a/src/modules/vpns/components/VPNResize.vue b/src/modules/vpns/components/VPNResize.vue
new file mode 100644
index 00000000..6415092c
--- /dev/null
+++ b/src/modules/vpns/components/VPNResize.vue
@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <div class="box">
+      <h4>Resize your VPN</h4>
+      <!-- TODO -->
+    </div>
+    <!-- balance warning -->
+    <div class="box mt-4 flex space-x-2" v-if="haveSpecsIncreased && (balanceSuspend || balanceWarning)">
+        <div><ExclamationIcon class="w-5 text-red" /></div>
+        <span class="text-red">You are unable to increase this VPN's specs while your available balance is below ${{ balance.threshold.warning.usd }}. Please add funds or set up Pay by Credit Card to enable this service.</span>
+    </div>
+    <!-- resize button and errors -->
+    <div class="flex flex-col relative my-4 space-y-2">
+      <button
+        @click="toggleConfirmationModal"
+        :disabled=!canSubmitResize
+        class="button button--success md:self-end w-full md:max-w-xs"
+      >
+        <span v-if="isLoading">Resizing</span>
+        <span v-else>Resize</span>
+        <span v-if="isLoading" class="ml-2">
+          <LoadingSpinner />
+        </span>
+      </button>
+      <div class="flex md:justify-end mt-2"><HttpError :error=httpError /></div>
+      <div v-if=internalServerError class="vpn__error" :class="overCapacityError && 'over-capacity'">
+        <span class="font-bold">{{
+          overCapacityError
+          ? "We're over capacity"
+          : "Something went wrong"
+        }}</span>
+        <span>
+          {{
+            overCapacityError
+            ? "It appears that we are at capacity in this region. We're working hard to increase this. Please check back soon."
+            : "There was an issue while deploying this VPN. Please try again, or contact support@edge.network if the issue persists."
+          }}
+        </span>
+      </div>
+    </div>
+    <!-- resize confirmation modal -->
+    <ResizeServerConfirmation
+      v-if=showConfirmationModal
+      @modal-confirm=resizeServer
+      @modal-close=toggleConfirmationModal
+      :currentCost=currentHourlyCost
+      :currentSpec=currentSpec
+      :lastResizeTask="lastResizeTask"
+      :newCost=newHourlyCost
+      :newSpec=newSpec
+      :serverName="vpn.name"
+    />
+  </div>
+</template>
+
+<script>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import { ExclamationIcon } from '@heroicons/vue/outline'
+import HttpError from '@/components/HttpError'
+import LoadingSpinner from '@/components/icons/LoadingSpinner'
+import ResizeServerConfirmation from '@/components/confirmations/ResizeServerConfirmation'
+import { mapGetters, mapState } from 'vuex'
+
+export default {
+  name: 'ServerResize',
+  props: ['disableActions', 'vpn'],
+  components: {
+    ExclamationIcon,
+    HttpError,
+    LoadingSpinner,
+    ResizeServerConfirmation
+  },
+  data: function () {
+    return {
+      areSpecsValid: true,
+      httpError: '',
+      internalServerError: null,
+      isLoading: false,
+      lastResizeTask: null,
+      newSpec: {
+        bandwidth: null,
+        cpus: null,
+        disk: null,
+        ram: null
+      },
+      showConfirmationModal: false
+    }
+  },
+  computed: {
+    ...mapGetters(['balanceSuspend', 'balanceWarning']),
+    ...mapState(['config', 'session']),
+    canSubmitResize() {
+      if (this.balanceWarning || this.balanceSuspend) if (this.haveSpecsIncreased) return false
+      // if (
+      //   this.isLoading
+      //   || !this.haveSpecsChanged
+      //   || this.diskSizeDecreased
+      //   || this.disableActions
+      //   || this.balanceSuspend
+      //   || !this.areSpecsValid
+      // ) return false
+      return true
+    },
+    currentHourlyCost() {
+      if (this.vpn.multiuser) {
+        const chargeableUsers = Math.max(0, this.vpn.users - this.config.vpn.multiuser.usersIncluded)
+        const userCost = this.config.vpn.multiuser.costPerUser * chargeableUsers
+        const periodCost = this.config.vpn.multiuser.cost + userCost
+        const hourlyCost = periodCost / this.config.vpn.multiuser.costBasis
+        return hourlyCost
+      }
+
+      return this.config.vpn.singleuser.cost / this.config.vpn.singleuser.costBasis
+    },
+    diskSizeDecreased() {
+      return this.currentSpec.disk > this.newSpec.disk
+    },
+    haveSpecsChanged() {
+      return ['bandwidth', 'ram', 'disk', 'cpus'].some(spec => this.newSpec[spec] !== this.currentSpec[spec])
+    },
+    haveSpecsIncreased() {
+      return ['bandwidth', 'ram', 'disk', 'cpus'].some(spec => this.newSpec[spec] > this.currentSpec[spec])
+    },
+    newHourlyCost() {
+      return 0
+    },
+    overCapacityError() {
+      return this.internalServerError && this.internalServerError.response.body.detail === 'there is no suitable node in cluster'
+    }
+  },
+  methods: {
+    async getLastResize() {
+      const tasks = await utils.getServerTasks(process.env.VUE_APP_ACCOUNT_API_URL, this.session._key, this.vpn._key, {
+        limit: 100
+      })
+      this.lastResizeTask = tasks.results.filter(task => task.action === 'resizeResource')[0]
+    },
+    async resizeServer () {
+      this.isLoading = true
+      try {
+        this.toggleConfirmationModal()
+        const { tasks } = await utils.resizeServer(process.env.VUE_APP_ACCOUNT_API_URL, this.session._key, this.vpn._key, {
+          spec: this.newSpec
+        })
+        tasks.forEach(task => {
+          this.$store.commit('addTask', task)
+        })
+        this.isLoading = false
+      }
+      catch (error) {
+        setTimeout(() => {
+          if (error.status === 500) this.internalServerError = error
+          else this.httpError = error
+          this.isLoading = false
+        }, 500)
+      }
+    },
+    toggleConfirmationModal() {
+      this.showConfirmationModal = !this.showConfirmationModal
+    },
+    updateNewSpec(newSpec, isValid) {
+      this.newSpec = newSpec
+      this.areSpecsValid = isValid
+    }
+  },
+  mounted() {
+    this.getLastResize()
+  },
+  watch: {
+    newSpec() {
+      this.internalServerError = null
+    }
+  }
+}
+</script>
+<style scoped>
+.vpn__error {
+  @apply flex flex-col bg-red text-white p-4 w-full rounded space-y-1;
+}
+
+.vpn__error.over-capacity {
+  @apply bg-blue-100 text-black;
+}
+</style>
diff --git a/src/modules/vpns/views/DeployVPN.vue b/src/modules/vpns/views/DeployVPN.vue
index ec19cf06..082d465c 100644
--- a/src/modules/vpns/views/DeployVPN.vue
+++ b/src/modules/vpns/views/DeployVPN.vue
@@ -15,6 +15,7 @@ import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
 import { RadioGroup, RadioGroupDescription, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
 import { computed, reactive, ref } from 'vue'
+import SpeedSlider from '../components/SpeedSlider.vue'
 
 const router = useRouter()
 const store = useStore()
@@ -60,8 +61,6 @@ const v$ = useVuelidate({
 
 const canDeploy = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
 
-const speedMarks = { 0: 'Fast', 1: 'Faster', 2: 'Fastest' }
-
 async function deploy() {
   await v$.value.$validate()
   if (v$.$invalid) return
@@ -94,19 +93,9 @@ async function deploy() {
   console.log({ ...formState })
 }
 
-function formatSpeedMark(value) {
-  if (value === 2) return 'Fastest'
-  if (value === 1) return 'Faster'
-  return 'Fast'
-}
-
 function setRegion(region) {
   formState.region = region._key
 }
-
-function setSpeed(value) {
-  formState.speed = formatSpeedMark(value).toLowerCase()
-}
 </script>
 
 <template>
@@ -168,16 +157,7 @@ function setSpeed(value) {
         </RadioGroup>
 
         <!-- VPN speed -->
-        <Slider
-          :disabled="disabled"
-          :formatter="formatSpeedMark"
-          :marks="speedMarks"
-          :max="2"
-          :min="0"
-          title="Speed"
-          tooltip="always"
-          @change="setSpeed"
-        />
+        <SpeedSlider v-model="v$.speed.$model" />
         <ValidationError :errors="v$.speed.$errors" />
       </div>
 
diff --git a/src/modules/vpns/views/VPN.vue b/src/modules/vpns/views/VPN.vue
index e53b8495..a8b0faca 100644
--- a/src/modules/vpns/views/VPN.vue
+++ b/src/modules/vpns/views/VPN.vue
@@ -12,6 +12,7 @@ import ServerPowerToggle from '../../../components/server/ServerPowerToggle.vue'
 import StatusDot from '../../../components/StatusDot.vue'
 import Tooltip from '../../../components/Tooltip.vue'
 import VPNOverview from '../components/VPNOverview.vue'
+import VPNResize from '../components/VPNResize.vue'
 import ValidationError from '../../../components/ValidationError.vue'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
@@ -253,6 +254,14 @@ effect(() => {
                 Metrics
               </button>
             </Tab>
+            <Tab v-slot="{selected}">
+              <button
+                class="tab"
+                :class="[selected ? 'tab--selected' : '']"
+              >
+                Resize
+              </button>
+            </Tab>
           </TabList>
 
           <TabPanels class="mt-4">
@@ -263,6 +272,10 @@ effect(() => {
             <TabPanel>
               <ServerMetrics v-if="server" :server="server" />
             </TabPanel>
+
+            <TabPanel>
+              <VPNResize v-if="vpn" :vpn="vpn" />
+            </TabPanel>
           </TabPanels>
         </TabGroup>
       </div>

From 2e196c15e196ea75c2e6457e6b3936029a488496 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 3 Feb 2025 17:29:58 +0000
Subject: [PATCH 28/29] wip unsaved changes

---
 src/modules/vpns/components/VPNResize.vue | 141 +++-------------------
 src/modules/vpns/views/DeployVPN.vue      |   3 +-
 2 files changed, 19 insertions(+), 125 deletions(-)

diff --git a/src/modules/vpns/components/VPNResize.vue b/src/modules/vpns/components/VPNResize.vue
index 6415092c..b73f72f5 100644
--- a/src/modules/vpns/components/VPNResize.vue
+++ b/src/modules/vpns/components/VPNResize.vue
@@ -1,8 +1,25 @@
+<script setup>
+import * as validation from '@/utils/validation'
+import SpeedSlider from './SpeedSlider.vue'
+import { reactive } from 'vue'
+import useVuelidate from '@vuelidate/core'
+
+const formState = reactive({
+  speed: 'fast'
+})
+
+const v$ = useVuelidate({
+  speed: [validation.oneOf(['fast', 'faster', 'fastest'])]
+}, formState)
+</script>
+
 <template>
   <div>
     <div class="box">
       <h4>Resize your VPN</h4>
-      <!-- TODO -->
+
+      <SpeedSlider v-model="v$.speed.$model" />
+      <
     </div>
     <!-- balance warning -->
     <div class="box mt-4 flex space-x-2" v-if="haveSpecsIncreased && (balanceSuspend || balanceWarning)">
@@ -53,128 +70,6 @@
   </div>
 </template>
 
-<script>
-/* global process */
-
-import * as utils from '@edge/account-utils'
-import { ExclamationIcon } from '@heroicons/vue/outline'
-import HttpError from '@/components/HttpError'
-import LoadingSpinner from '@/components/icons/LoadingSpinner'
-import ResizeServerConfirmation from '@/components/confirmations/ResizeServerConfirmation'
-import { mapGetters, mapState } from 'vuex'
-
-export default {
-  name: 'ServerResize',
-  props: ['disableActions', 'vpn'],
-  components: {
-    ExclamationIcon,
-    HttpError,
-    LoadingSpinner,
-    ResizeServerConfirmation
-  },
-  data: function () {
-    return {
-      areSpecsValid: true,
-      httpError: '',
-      internalServerError: null,
-      isLoading: false,
-      lastResizeTask: null,
-      newSpec: {
-        bandwidth: null,
-        cpus: null,
-        disk: null,
-        ram: null
-      },
-      showConfirmationModal: false
-    }
-  },
-  computed: {
-    ...mapGetters(['balanceSuspend', 'balanceWarning']),
-    ...mapState(['config', 'session']),
-    canSubmitResize() {
-      if (this.balanceWarning || this.balanceSuspend) if (this.haveSpecsIncreased) return false
-      // if (
-      //   this.isLoading
-      //   || !this.haveSpecsChanged
-      //   || this.diskSizeDecreased
-      //   || this.disableActions
-      //   || this.balanceSuspend
-      //   || !this.areSpecsValid
-      // ) return false
-      return true
-    },
-    currentHourlyCost() {
-      if (this.vpn.multiuser) {
-        const chargeableUsers = Math.max(0, this.vpn.users - this.config.vpn.multiuser.usersIncluded)
-        const userCost = this.config.vpn.multiuser.costPerUser * chargeableUsers
-        const periodCost = this.config.vpn.multiuser.cost + userCost
-        const hourlyCost = periodCost / this.config.vpn.multiuser.costBasis
-        return hourlyCost
-      }
-
-      return this.config.vpn.singleuser.cost / this.config.vpn.singleuser.costBasis
-    },
-    diskSizeDecreased() {
-      return this.currentSpec.disk > this.newSpec.disk
-    },
-    haveSpecsChanged() {
-      return ['bandwidth', 'ram', 'disk', 'cpus'].some(spec => this.newSpec[spec] !== this.currentSpec[spec])
-    },
-    haveSpecsIncreased() {
-      return ['bandwidth', 'ram', 'disk', 'cpus'].some(spec => this.newSpec[spec] > this.currentSpec[spec])
-    },
-    newHourlyCost() {
-      return 0
-    },
-    overCapacityError() {
-      return this.internalServerError && this.internalServerError.response.body.detail === 'there is no suitable node in cluster'
-    }
-  },
-  methods: {
-    async getLastResize() {
-      const tasks = await utils.getServerTasks(process.env.VUE_APP_ACCOUNT_API_URL, this.session._key, this.vpn._key, {
-        limit: 100
-      })
-      this.lastResizeTask = tasks.results.filter(task => task.action === 'resizeResource')[0]
-    },
-    async resizeServer () {
-      this.isLoading = true
-      try {
-        this.toggleConfirmationModal()
-        const { tasks } = await utils.resizeServer(process.env.VUE_APP_ACCOUNT_API_URL, this.session._key, this.vpn._key, {
-          spec: this.newSpec
-        })
-        tasks.forEach(task => {
-          this.$store.commit('addTask', task)
-        })
-        this.isLoading = false
-      }
-      catch (error) {
-        setTimeout(() => {
-          if (error.status === 500) this.internalServerError = error
-          else this.httpError = error
-          this.isLoading = false
-        }, 500)
-      }
-    },
-    toggleConfirmationModal() {
-      this.showConfirmationModal = !this.showConfirmationModal
-    },
-    updateNewSpec(newSpec, isValid) {
-      this.newSpec = newSpec
-      this.areSpecsValid = isValid
-    }
-  },
-  mounted() {
-    this.getLastResize()
-  },
-  watch: {
-    newSpec() {
-      this.internalServerError = null
-    }
-  }
-}
-</script>
 <style scoped>
 .vpn__error {
   @apply flex flex-col bg-red text-white p-4 w-full rounded space-y-1;
diff --git a/src/modules/vpns/views/DeployVPN.vue b/src/modules/vpns/views/DeployVPN.vue
index 082d465c..9acf5f64 100644
--- a/src/modules/vpns/views/DeployVPN.vue
+++ b/src/modules/vpns/views/DeployVPN.vue
@@ -8,14 +8,13 @@ import DeploymentWarning from '../../../components/DeploymentWarning.vue'
 import HttpError from '../../../components/HttpError.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import NetworkRegion from '../../../components/server/deploy/NetworkRegion.vue'
-import Slider from '../../../layout/Slider.vue'
+import SpeedSlider from '../components/SpeedSlider.vue'
 import ValidationError from '../../../components/ValidationError.vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
 import { RadioGroup, RadioGroupDescription, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
 import { computed, reactive, ref } from 'vue'
-import SpeedSlider from '../components/SpeedSlider.vue'
 
 const router = useRouter()
 const store = useStore()

From 6a0110f29f5cd0cd70dcd250fdfb8def5ce362d4 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Tue, 4 Feb 2025 13:21:46 +0000
Subject: [PATCH 29/29] wip vpn update view

---
 .../vpns/components/MultiuserToggle.vue       | 105 ++++++++
 src/modules/vpns/components/SpeedSlider.vue   |  12 +-
 src/modules/vpns/components/VPNResize.vue     |  81 ------
 src/modules/vpns/components/VPNSettings.vue   | 239 ++++++++++++++++++
 src/modules/vpns/views/VPN.vue                |   6 +-
 5 files changed, 357 insertions(+), 86 deletions(-)
 create mode 100644 src/modules/vpns/components/MultiuserToggle.vue
 delete mode 100644 src/modules/vpns/components/VPNResize.vue
 create mode 100644 src/modules/vpns/components/VPNSettings.vue

diff --git a/src/modules/vpns/components/MultiuserToggle.vue b/src/modules/vpns/components/MultiuserToggle.vue
new file mode 100644
index 00000000..a0296bc6
--- /dev/null
+++ b/src/modules/vpns/components/MultiuserToggle.vue
@@ -0,0 +1,105 @@
+<script setup>
+import CheckIcon from '../../../components/icons/CheckIcon.vue'
+import { RadioGroup, RadioGroupDescription, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+import { defineModel, defineProps } from 'vue'
+
+defineProps({
+  disabled: Boolean,
+  singleUserDisabled: Boolean,
+  multiuserDisabled: Boolean
+})
+
+const model = defineModel()
+</script>
+
+<template>
+  <!-- Single/multi-user -->
+  <RadioGroup v-model="model">
+    <div class="box__grid mb-8">
+      <RadioGroupOption as="template" :value="false" :disabled="disabled || singleUserDisabled" v-slot="{ active, checked, disabled }">
+        <div :class="{ radioOption: true, active, checked, disabled }">
+          <div :class="{ checkmark: true, active, checked }">
+            <CheckIcon class="checkmark__icon" />
+          </div>
+          <div class="optionDetails">
+            <RadioGroupLabel as="h4" class="optionDetails__name">
+              Single-user VPN
+            </RadioGroupLabel>
+            <RadioGroupDescription as="span" class="optionDetails__description">
+              <span>Ideal for individual use.</span>
+            </RadioGroupDescription>
+          </div>
+        </div>
+      </RadioGroupOption>
+
+      <RadioGroupOption as="template" :value="true" :disabled="disabled || multiuserDisabled" v-slot="{ active, checked, disabled }">
+        <div :class="{ radioOption: true, active, checked, disabled }">
+          <div :class="{ checkmark: true, active, checked }">
+            <CheckIcon class="checkmark__icon" />
+          </div>
+          <div class="optionDetails">
+            <RadioGroupLabel as="h4" class="optionDetails__name">
+              Multi-user VPN
+            </RadioGroupLabel>
+            <RadioGroupDescription as="span" class="optionDetails__description">
+              <span>Multi-user VPN includes up to five users. You can pay for additional users.</span>
+            </RadioGroupDescription>
+          </div>
+        </div>
+      </RadioGroupOption>
+    </div>
+  </RadioGroup>
+</template>
+
+
+<style scoped>
+.box__grid {
+  @apply mt-6 w-full grid grid-cols-1 gap-4;
+  @apply sm:grid-cols-2 lg:grid-cols-2;
+}
+
+/* radio option */
+.radioOption {
+  @apply relative flex space-x-3 items-start p-5 border border-gray-300 rounded-md cursor-pointer;
+  @apply hover:bg-gray-100 hover:bg-opacity-50;
+  @apply focus:outline-none;
+}
+.radioOption.active {
+  @apply border-green border-opacity-40;
+}
+.radioOption.checked {
+  @apply bg-gray-100 border-green bg-opacity-75;
+  @apply ring-4 ring-green ring-opacity-10;
+}
+.radioOption.disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+/* radio option details */
+.optionDetails {
+  @apply flex flex-col flex-1 text-sm;
+}
+.optionDetails__city {
+  @apply text-sm text-gray-500;
+}
+
+/* checkmark */
+.checkmark {
+  @apply flex items-center justify-center text-white flex-shrink-0 rounded-full w-5 h-5 bg-gray-100 border border-gray-300;
+}
+.checkmark.active {
+  @apply border-green border-opacity-40 bg-opacity-20;
+}
+.checkmark.checked {
+  @apply border-green bg-green;
+}
+.checkmark .checkmark__icon {
+  @apply opacity-0 w-3 h-3;
+}
+.checkmark.active .checkmark__icon {
+  @apply opacity-40;
+}
+.checkmark.checked .checkmark__icon {
+  @apply opacity-100;
+}
+</style>
diff --git a/src/modules/vpns/components/SpeedSlider.vue b/src/modules/vpns/components/SpeedSlider.vue
index a2ac3c09..5ee4cc97 100644
--- a/src/modules/vpns/components/SpeedSlider.vue
+++ b/src/modules/vpns/components/SpeedSlider.vue
@@ -1,12 +1,13 @@
 <script setup>
 import Slider from '../../../layout/Slider.vue'
-import { defineModel, defineProps } from 'vue'
+import { defineModel, defineProps, effect, ref } from 'vue'
 
 defineProps({
   disabled: Boolean
 })
 
 const model = defineModel()
+const ready = ref(false)
 
 const rawMarks = [
   ['fast', 'Fast'],
@@ -15,7 +16,7 @@ const rawMarks = [
 ]
 
 const marks = rawMarks.reduce((ms, m, i) => {
-  ms[i] = m[0]
+  ms[i] = m[1]
   return ms
 }, {})
 
@@ -26,6 +27,13 @@ function formatter(i) {
 function setSpeed(i) {
   model.value = rawMarks[i][0]
 }
+
+effect(() => {
+  if (!ready.value) {
+    /** WIP */
+    ready.value = true
+  }
+})
 </script>
 
 <template>
diff --git a/src/modules/vpns/components/VPNResize.vue b/src/modules/vpns/components/VPNResize.vue
deleted file mode 100644
index b73f72f5..00000000
--- a/src/modules/vpns/components/VPNResize.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script setup>
-import * as validation from '@/utils/validation'
-import SpeedSlider from './SpeedSlider.vue'
-import { reactive } from 'vue'
-import useVuelidate from '@vuelidate/core'
-
-const formState = reactive({
-  speed: 'fast'
-})
-
-const v$ = useVuelidate({
-  speed: [validation.oneOf(['fast', 'faster', 'fastest'])]
-}, formState)
-</script>
-
-<template>
-  <div>
-    <div class="box">
-      <h4>Resize your VPN</h4>
-
-      <SpeedSlider v-model="v$.speed.$model" />
-      <
-    </div>
-    <!-- balance warning -->
-    <div class="box mt-4 flex space-x-2" v-if="haveSpecsIncreased && (balanceSuspend || balanceWarning)">
-        <div><ExclamationIcon class="w-5 text-red" /></div>
-        <span class="text-red">You are unable to increase this VPN's specs while your available balance is below ${{ balance.threshold.warning.usd }}. Please add funds or set up Pay by Credit Card to enable this service.</span>
-    </div>
-    <!-- resize button and errors -->
-    <div class="flex flex-col relative my-4 space-y-2">
-      <button
-        @click="toggleConfirmationModal"
-        :disabled=!canSubmitResize
-        class="button button--success md:self-end w-full md:max-w-xs"
-      >
-        <span v-if="isLoading">Resizing</span>
-        <span v-else>Resize</span>
-        <span v-if="isLoading" class="ml-2">
-          <LoadingSpinner />
-        </span>
-      </button>
-      <div class="flex md:justify-end mt-2"><HttpError :error=httpError /></div>
-      <div v-if=internalServerError class="vpn__error" :class="overCapacityError && 'over-capacity'">
-        <span class="font-bold">{{
-          overCapacityError
-          ? "We're over capacity"
-          : "Something went wrong"
-        }}</span>
-        <span>
-          {{
-            overCapacityError
-            ? "It appears that we are at capacity in this region. We're working hard to increase this. Please check back soon."
-            : "There was an issue while deploying this VPN. Please try again, or contact support@edge.network if the issue persists."
-          }}
-        </span>
-      </div>
-    </div>
-    <!-- resize confirmation modal -->
-    <ResizeServerConfirmation
-      v-if=showConfirmationModal
-      @modal-confirm=resizeServer
-      @modal-close=toggleConfirmationModal
-      :currentCost=currentHourlyCost
-      :currentSpec=currentSpec
-      :lastResizeTask="lastResizeTask"
-      :newCost=newHourlyCost
-      :newSpec=newSpec
-      :serverName="vpn.name"
-    />
-  </div>
-</template>
-
-<style scoped>
-.vpn__error {
-  @apply flex flex-col bg-red text-white p-4 w-full rounded space-y-1;
-}
-
-.vpn__error.over-capacity {
-  @apply bg-blue-100 text-black;
-}
-</style>
diff --git a/src/modules/vpns/components/VPNSettings.vue b/src/modules/vpns/components/VPNSettings.vue
new file mode 100644
index 00000000..4dd34164
--- /dev/null
+++ b/src/modules/vpns/components/VPNSettings.vue
@@ -0,0 +1,239 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import * as validation from '@/utils/validation'
+import { ExclamationIcon } from '@heroicons/vue/outline'
+import HttpError from '../../../components/HttpError.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Modal from '../../../components/Modal.vue'
+import MultiuserToggle from './MultiuserToggle.vue'
+import SpeedSlider from './SpeedSlider.vue'
+import { useStore } from 'vuex'
+import useVuelidate from '@vuelidate/core'
+import { computed, defineProps, effect, reactive, ref } from 'vue'
+
+const store = useStore()
+
+const props = defineProps(['vpn'])
+
+const formState = reactive({
+  multiuser: false,
+  speed: 'fast'
+})
+
+const v$ = useVuelidate({
+  multiuser: [],
+  speed: [validation.oneOf(['fast', 'faster', 'fastest'])]
+}, formState)
+
+const canSubmit = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
+const error = ref(null)
+const isLoading = ref(false)
+const ready = ref(false)
+const showConfirmationModal = ref(false)
+
+const internalServerError = computed(() => {
+  if (error.value && error.value.status === 500) return error.value
+  return null
+})
+
+const overCapacityError = computed(() => {
+  if (error.value && error.value.status === 500) {
+    if (error.value.response && error.value.response.body && error.value.response.body.detail === 'there is no suitable node in cluster') {
+      return new Error(error.value.response.body.detail)
+    }
+  }
+  return null
+})
+
+function calculateHourlyCost(speed, multiuser, users) {
+  const vpnConfig = store.state.config.vpn
+
+  if (multiuser) {
+    const chargeableUsers = Math.max(0, users - vpnConfig.multiuser.usersIncluded)
+    const userCost = vpnConfig.multiuser.costPerUser * chargeableUsers
+    const periodCost = vpnConfig.multiuser.cost + userCost
+    const hourlyCost = periodCost / vpnConfig.multiuser.costBasis
+    return hourlyCost
+  }
+
+  return vpnConfig.singleuser.cost / vpnConfig.singleuser.costBasis
+}
+
+const activeTasks = computed(() => store.getters.tasksByServerId(props.vpn.server))
+
+const costs = computed(() => {
+  const currentHourly = calculateHourlyCost(props.vpn.speed, props.vpn.multiuser, props.vpn.users)
+  const newHourly = calculateHourlyCost(v$.value.speed.$model, v$.value.multiuser.$model, props.vpn.users)
+
+  const current30d = currentHourly * 24 * 30
+  const new30d = newHourly * 24 * 30
+
+  const increased = newHourly > currentHourly
+
+  return {
+    currentHourly,
+    current30d,
+    newHourly,
+    new30d,
+
+    increased
+  }
+})
+
+const resizedInLastHour = computed(() => {
+  const oneHourAgo = Date.now() - 3.6e6
+
+  const recentResizes = activeTasks.value
+    .filter(t => /^resize/.test(t.action) && t.updated > oneHourAgo)
+    .sort((a, b) => b.updated - a.updated)
+
+  if (recentResizes.length > 0) return this.recentResizes[0].updated > oneHourAgo
+  return false
+})
+
+function formatCost(cost) {
+  return (Math.ceil(cost * 1e4) / 1e4).toFixed(4)
+}
+
+function reset() {
+  if (props.vpn) {
+    v$.value.multiuser.$model = props.vpn.multiuser
+    v$.value.speed.$model = props.vpn.speed
+  }
+}
+
+function toggleConfirmationModal() {
+  showConfirmationModal.value = !showConfirmationModal.value
+}
+
+async function updateVPN() {
+  toggleConfirmationModal()
+
+  try {
+    isLoading.value = true
+    error.value = null
+
+    const res = await utils.updateVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, props.vpn._key, {
+      vpn: {
+        multiuser: v$.value.multiuser.$model,
+        speed: v$.value.speed.$model
+      }
+    })
+
+    for (const i in res.tasks) {
+      store.commit('addTask', res.tasks[i])
+    }
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+effect(() => {
+  if (!ready.value) {
+    reset()
+    ready.value = true
+  }
+})
+</script>
+
+<template>
+  <div>
+    <div class="box">
+      <h4>VPN Settings</h4>
+
+      <MultiuserToggle v-model="v$.multiuser.$model" :multiuserDisabled="vpn.users > 1" />
+
+      <SpeedSlider v-model="v$.speed.$model" />
+    </div>
+    <!-- balance warning -->
+    <div class="box mt-4 flex space-x-2" v-if="costs.increased && (store.getters.balanceSuspend || store.getters.balanceWarning)">
+        <div><ExclamationIcon class="w-5 text-red" /></div>
+        <span class="text-red">You are unable to increase this VPN's specs while your available balance is below ${{ balance.threshold.warning.usd }}. Please add funds or set up Pay by Credit Card to enable this service.</span>
+    </div>
+    <!-- resize button and errors -->
+    <div class="flex flex-col relative my-4 space-y-2">
+      <button
+        @click="toggleConfirmationModal"
+        :disabled="!canSubmit"
+        class="button button--success md:self-end w-full md:max-w-xs"
+      >
+        <span v-if="isLoading">Updating</span>
+        <span v-else>Update</span>
+        <span v-if="isLoading" class="ml-2">
+          <LoadingSpinner />
+        </span>
+      </button>
+      <div class="flex md:justify-end mt-2">
+        <HttpError :error="error" />
+      </div>
+      <div v-if="overCapacityError" class="vpn__error over-capacity">
+        <span class="font-bold">We're over capacity</span>
+        <span>It appears that we are at capacity in this region. We're working hard to increase this. Please check back soon.</span>
+      </div>
+      <div v-else-if="internalServerError" class="vpn__error">
+        <span class="font-bold">Something went wrong</span>
+        <span>There was an issue while deploying this VPN. Please try again, or contact support@edge.network if the issue persists.</span>
+      </div>
+    </div>
+
+    <Modal v-if="showConfirmationModal">
+      <template v-slot:icon>
+        <ExclamationIcon class="w-8 h-8" aria-hidden="true" />
+      </template>
+      <template v-slot:header>
+        <span>Update {{ vpn.name }}</span>
+      </template>
+      <template v-slot:body>
+      <div class="flex flex-col space-y-2">
+        <span class="font-semibold">Warning: VPN will be powered off while updating.</span>
+      </div>
+        <div class="flex flex-col space-y-2 pt-4">
+          <li v-if="resizedInLastHour">Your VPN was updated less than one hour ago. If you continue to update it again, you will be charged a full hour for the previous settings.</li>
+          <li>Cost will {{ costs.increased ? 'increase' : 'decrease' }} from {{ formatCost(costs.current30d) }} to {{ formatCost(costs.new30d) }} per 30 days.</li>
+        </div>
+      </template>
+      <template v-slot:buttons>
+        <button
+          class="w-full mt-3 button button--small button--outline sm:mt-0"
+          @click="toggleConfirmationModal"
+        >
+          Cancel
+        </button>
+        <button
+          class="w-full button button--small button--error"
+          @click="updateVPN"
+        >
+          Yes, Update VPN
+        </button>
+      </template>
+    </Modal>
+    <!-- resize confirmation modal -->
+    <!--<ResizeServerConfirmation
+      v-if=showConfirmationModal
+      @modal-confirm=resizeServer
+      @modal-close=toggleConfirmationModal
+      :currentCost=currentHourlyCost
+      :currentSpec=currentSpec
+      :lastResizeTask="lastResizeTask"
+      :newCost=newHourlyCost
+      :newSpec=newSpec
+      :serverName="vpn.name"
+    />-->
+  </div>
+</template>
+
+<style scoped>
+.vpn__error {
+  @apply flex flex-col bg-red text-white p-4 w-full rounded space-y-1;
+}
+
+.vpn__error.over-capacity {
+  @apply bg-blue-100 text-black;
+}
+</style>
diff --git a/src/modules/vpns/views/VPN.vue b/src/modules/vpns/views/VPN.vue
index a8b0faca..ac5491fd 100644
--- a/src/modules/vpns/views/VPN.vue
+++ b/src/modules/vpns/views/VPN.vue
@@ -12,7 +12,7 @@ import ServerPowerToggle from '../../../components/server/ServerPowerToggle.vue'
 import StatusDot from '../../../components/StatusDot.vue'
 import Tooltip from '../../../components/Tooltip.vue'
 import VPNOverview from '../components/VPNOverview.vue'
-import VPNResize from '../components/VPNResize.vue'
+import VPNSettings from '../components/VPNSettings.vue'
 import ValidationError from '../../../components/ValidationError.vue'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
@@ -259,7 +259,7 @@ effect(() => {
                 class="tab"
                 :class="[selected ? 'tab--selected' : '']"
               >
-                Resize
+                Settings
               </button>
             </Tab>
           </TabList>
@@ -274,7 +274,7 @@ effect(() => {
             </TabPanel>
 
             <TabPanel>
-              <VPNResize v-if="vpn" :vpn="vpn" />
+              <VPNSettings v-if="vpn" :vpn="vpn" />
             </TabPanel>
           </TabPanels>
         </TabGroup>