From 64f1a1ccdcd463c7aacfdeae815eabc953932a46 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Mon, 22 Jul 2024 15:45:51 -0300
Subject: [PATCH 1/7] WIP

---
 core/services/install-services.sh | 2 ++
 core/services/kraken/setup.py     | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/core/services/install-services.sh b/core/services/install-services.sh
index 95c39f28a7..2caa75c2ac 100755
--- a/core/services/install-services.sh
+++ b/core/services/install-services.sh
@@ -35,6 +35,8 @@ SERVICES=(
 
 # We need to install loguru, appdirs and pydantic since they may be used inside setup.py
 python -m pip install appdirs==1.4.4 loguru==0.5.3 pydantic==1.10.12
+# Install the BlueOS Extensions Repository
+python -m pip install  https://github.com/JoaoMario109/BlueOS-Extensions-Repository/tarball/0.0.1\#egg\=blueos-extensions-repository
 
 for SERVICE in "${SERVICES[@]}"; do
     echo "Installing service: $SERVICE"
diff --git a/core/services/kraken/setup.py b/core/services/kraken/setup.py
index 07163f7836..7cfd7d1aed 100644
--- a/core/services/kraken/setup.py
+++ b/core/services/kraken/setup.py
@@ -22,5 +22,9 @@
         "psutil == 5.7.2",
         "uvicorn == 0.13.4",
         "dataclass-wizard == 0.22.3",
+        "blueos-extensions-repository == 0.0.1",
+    ],
+    dependency_links=[
+        "https://github.com/JoaoMario109/BlueOS-Extensions-Repository/tarball/0.0.1\#egg\=blueos-extensions-repository"
     ],
 )

From b994f435016f5db460899a18174f6b921260d401 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Tue, 23 Jul 2024 12:30:55 -0300
Subject: [PATCH 2/7] W

---
 .../kraken/modals/ExtensionDetailsModal.vue   | 64 ++++++++++++++++---
 1 file changed, 55 insertions(+), 9 deletions(-)

diff --git a/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue b/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
index 575a9e23db..51dc295640 100644
--- a/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
+++ b/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
@@ -45,7 +45,28 @@
                   label="Version"
                 >
                   <template #item="{ item }">
-                    <v-tooltip :disabled="item.active" bottom>
+                    <v-tooltip
+                      v-if="item.value === null"
+                      bottom
+                    >
+                      <template #activator="{ on, attrs }">
+                        <div
+                          style="width: 100%; color: var(--v-warning-base);"
+                          v-bind="attrs"
+                          v-on="on"
+                        >
+                          <v-list-item-content>
+                            <v-list-item-title v-text="item.text" />
+                          </v-list-item-content>
+                        </div>
+                      </template>
+                      <span>This allows you to set custom tags that may not be present on official manifest</span>
+                    </v-tooltip>
+                    <v-tooltip
+                      v-else
+                      :disabled="item.active"
+                      bottom
+                    >
                       <template #activator="{ on, attrs }">
                         <div
                           style="width: 100%;"
@@ -180,6 +201,7 @@ import { marked } from 'marked'
 import { compare } from 'semver'
 import Vue, { PropType } from 'vue'
 
+import settings from '@/libs/settings'
 import { JSONValue } from '@/types/common'
 import { ExtensionData, Version } from '@/types/kraken'
 
@@ -198,13 +220,16 @@ export default Vue.extend({
   },
   data() {
     return {
-      selected_version: '' as string,
+      selected_version: '' as string | null | undefined,
     }
   },
   computed: {
     selected(): Version | null {
       return this.selected_version ? this.extension.versions[this.selected_version] : null
     },
+    is_using_custom_tag(): boolean {
+      return this.selected_version === null
+    },
     compiled_markdown(): string {
       if (!this.selected?.readme) {
         return 'No readme available'
@@ -212,11 +237,22 @@ export default Vue.extend({
       // TODO: make sure we sanitize this
       return marked(this.selected.readme)
     },
-    available_tags(): {text: string, active: boolean}[] {
-      return this.getSortedTags().map((tag) => ({
+    available_tags(): {text: string, value: string | null, active: boolean}[] {
+      const tags = this.getSortedTags().map((tag) => ({
         text: tag,
+        value: tag as string | null,
         active: this.extension?.versions[tag].images.some((image) => image.compatible),
       }))
+
+      if (settings.is_pirate_mode) {
+        tags.push({
+          text: 'Custom',
+          value: null,
+          active: true,
+        })
+      }
+
+      return tags
     },
     permissions(): (undefined | JSONValue) {
       if (!this.selected_version) {
@@ -232,23 +268,30 @@ export default Vue.extend({
       return this.selected_version === this.installed
     },
     is_version_compatible(): boolean {
-      return this.extension.versions[this.selected_version]?.images.some((image) => image.compatible)
+      if (this.is_using_custom_tag) {
+        return true
+      }
+
+      return this.selected?.images.some((image) => image.compatible) ?? false
     },
     compatible_version_archs(): string[] {
-      const archs = [
+      return this.is_using_custom_tag ? [] : [
         ...new Set(
-          this.extension.versions[this.selected_version]
+          this.selected
             ?.images.map((image) => image.platform.architecture),
         ),
       ]
-
-      return archs
     },
   },
   watch: {
     extension() {
       this.selected_version = this.getLatestTag()
     },
+    selected_version(value: string) {
+      if (value === null) {
+        return
+      }
+    },
   },
   mounted() {
     this.selected_version = this.getLatestTag()
@@ -260,6 +303,9 @@ export default Vue.extend({
     getLatestTag(): string {
       return this.getSortedTags()[0] ?? ''
     },
+    getAvailableTagsFromDocker(): string[] {
+      return []
+    },
   },
 })
 </script>

From 81289326c8974546d49f3799b74c661a07564fcf Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Wed, 24 Jul 2024 08:10:32 -0300
Subject: [PATCH 3/7] w

---
 .../src/components/kraken/modals/ExtensionDetailsModal.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue b/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
index 51dc295640..78b5a338b1 100644
--- a/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
+++ b/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
@@ -287,8 +287,8 @@ export default Vue.extend({
     extension() {
       this.selected_version = this.getLatestTag()
     },
-    selected_version(value: string) {
-      if (value === null) {
+    is_using_custom_tag(value: string) {
+      if (value) {
         return
       }
     },

From 82d314fe1fa1df0f50dea67f5b11729a1da6aca5 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Thu, 25 Jul 2024 14:02:03 -0300
Subject: [PATCH 4/7] W

---
 .../kraken/api/v2/routers/manifest.py         | 18 ++++++++-
 core/services/kraken/manifest/manifest.py     | 20 ++++++++++
 core/services/kraken/manifest/models.py       | 38 +++++++++++++++++++
 3 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/core/services/kraken/api/v2/routers/manifest.py b/core/services/kraken/api/v2/routers/manifest.py
index 09e1666d52..8b2def357d 100644
--- a/core/services/kraken/api/v2/routers/manifest.py
+++ b/core/services/kraken/api/v2/routers/manifest.py
@@ -17,6 +17,7 @@
     Manifest,
     ManifestSource,
     RepositoryEntry,
+    Tag,
     UpdateManifestSource,
 )
 
@@ -66,6 +67,22 @@ async def fetch_by_identifier(identifier: str, data: bool = True) -> Manifest:
     return await manifest_manager.fetch_by_identifier(identifier, data)
 
 
+@manifest_router_v2.get("/docker/{docker}/tags", status_code=status.HTTP_200_OK)
+@manifest_to_http_exception
+async def fetch_tags_from_docker(docker: str) -> list[Tag]:
+    """
+    Return a list of docker tags for a given repository based on a docker image.
+    """
+    return []
+
+@manifest_router_v2.get("/docker/{docker}/manifest", status_code=status.HTTP_200_OK)
+@manifest_to_http_exception
+async def fetch_manifest_from_docker_tag(tag: Tag) -> Manifest:
+    """
+    Return a list of docker tags for a given repository based on a docker image.
+    """
+    return []
+
 @manifest_router_v2.get("/consolidated", status_code=status.HTTP_200_OK)
 @manifest_to_http_exception
 async def fetch_consolidated() -> list[RepositoryEntry]:
@@ -75,7 +92,6 @@ async def fetch_consolidated() -> list[RepositoryEntry]:
     """
     return await manifest_manager.fetch_consolidated()
 
-
 @manifest_router_v2.post("/", status_code=status.HTTP_201_CREATED)
 @manifest_to_http_exception
 async def create(body: ManifestSource, validate_url: bool = True) -> Manifest:
diff --git a/core/services/kraken/manifest/manifest.py b/core/services/kraken/manifest/manifest.py
index a9f966db2a..a09340caf1 100644
--- a/core/services/kraken/manifest/manifest.py
+++ b/core/services/kraken/manifest/manifest.py
@@ -6,6 +6,8 @@
 import aiohttp
 import semver
 from aiocache import cached
+from blueos_repository.extension import Extension as RepositoryExtension
+from blueos_repository.extension.models import ExtensionMetadata
 from commonwealth.settings.manager import Manager
 
 from config import DEFAULT_MANIFESTS, SERVICE_NAME
@@ -23,6 +25,7 @@
     ManifestData,
     ManifestSource,
     RepositoryEntry,
+    Tag,
     UpdateManifestSource,
 )
 from settings import ManifestSettings, SettingsV2
@@ -281,3 +284,20 @@ async def fetch_extension_version(self, identifier: str, tag: str) -> Optional[E
             return None
 
         return ext.versions.get(tag)
+
+    @staticmethod
+    async def fetch_tags_from_docker(docker: str) -> List[Tag]:
+        ext = RepositoryExtension(
+            ExtensionMetadata(
+                identifier=docker,
+                name=docker,
+                docker=docker,
+                website=""
+                description="",
+            )
+        )
+        return (await ext.hub.get_tags()).results
+
+    @staticmethod
+    async def fetch_manifest_from_docker_tag(tag: Tag) -> Manifest:
+        return Manifest(identifier=docker, name=docker, url=docker, priority=0, enabled=True, factory=False)
diff --git a/core/services/kraken/manifest/models.py b/core/services/kraken/manifest/models.py
index ca17947f9c..7efa34c979 100644
--- a/core/services/kraken/manifest/models.py
+++ b/core/services/kraken/manifest/models.py
@@ -4,6 +4,44 @@
 
 from pydantic import BaseModel, Field, validator
 
+# Manifest docker models
+
+class TagImageLayer(BaseModel):
+    size: int
+    instruction: str
+    digest: Optional[str] = None
+
+
+class TagImage(BaseModel):  # pylint: disable=too-many-instance-attributes
+    architecture: str
+    features: str
+    variant: str
+    os: str  # pylint: disable=invalid-name
+    os_features: str
+    size: int
+    status: str
+    digest: Optional[str] = None
+    os_version: Optional[str] = None
+    layers: Optional[List[TagImageLayer]] = None
+    last_pulled: Optional[str] = None
+    last_pushed: Optional[str] = None
+
+
+class Tag(BaseModel):  # pylint: disable=too-many-instance-attributes
+    id: int  # pylint: disable=invalid-name
+    images: List[TagImage]
+    creator: int
+    last_updater: int
+    last_updater_username: str
+    name: str
+    repository: int
+    full_size: int
+    v2: str  # pylint: disable=invalid-name
+    last_updated: Optional[str] = None
+    tag_last_pulled: Optional[str] = None
+    tag_last_pushed: Optional[str] = None
+
+
 # Manifest data source models
 
 

From dd34ac596cf121a659f0fa5a531a9a7886185b38 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Mon, 29 Jul 2024 13:32:22 -0300
Subject: [PATCH 5/7] W

---
 .../kraken/modals/ExtensionDetailsModal.vue   | 316 +++++++-----------
 .../src/views/ExtensionManagerView.vue        |   2 +-
 2 files changed, 122 insertions(+), 196 deletions(-)

diff --git a/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue b/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
index 78b5a338b1..95b1bacc04 100644
--- a/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
+++ b/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
@@ -1,198 +1,119 @@
 <template>
   <v-card>
-    <v-card-title class="text-h5 grey lighten-2 black--text">
-      {{ extension?.name ?? '' }}
-    </v-card-title>
+    <v-card-subtitle class="px-4 pt-4 pb-2 d-flex justify-space-between align-start">
+      <v-avatar size="100" rounded="0">
+        <v-img contain :src="extension.extension_logo" />
+      </v-avatar>
+      <div class="extension-creators">
+        <div class="extension-title my-2">
+          {{ extension.name }}
+        </div>
+        <div class="extension-description">
+          {{ extension.description }}
+        </div>
+        <div class="extension-description">
+          <strong>{{ compatible_version_archs.join(', ') }}</strong>
+        </div>
+      </div>
+    </v-card-subtitle>
+    <div class="px-4 pt-4 d-flex justify-space-between align-start">
+      <v-select
+        v-model="selected_version"
+        :items="available_tags"
+        label="Version"
+        outlined
+        dense
+        class="mr-2"
+      >
+        <template #item="{ item }">
+          <v-tooltip :disabled="item.active" bottom>
+            <template #activator="{ on, attrs }">
+              <div
+                style="width: 100%;"
+                :style="item.active ? '' : 'opacity: 0.5;'"
+                v-bind="attrs"
+                v-on="on"
+              >
+                <v-list-item-content>
+                  <v-list-item-title v-text="item.text" />
+                </v-list-item-content>
+              </div>
+            </template>
+            <span>This version is not compatible with current machine running BlueOS</span>
+          </v-tooltip>
+        </template>
+      </v-select>
+      <v-tooltip :disabled="extension.is_compatible" bottom>
+        <template #activator="{ on, attrs }">
+          <v-btn
+            :disabled="!extension.is_compatible || !is_version_compatible"
+            width="120px"
+            height="40px"
+            color="primary"
 
-    <v-card-text>
-      <v-row>
-        <v-col
-          cols="10"
-          sm="8"
-          class="mt-5"
-        >
+            v-bind="attrs"
+            v-on="on"
+            @click="$emit('clicked', extension.identifier, selected_version, is_installed)"
+          >
+            {{ is_installed ? 'Uninstall' : 'Install' }}
+          </v-btn>
+        </template>
+        <span>No versions available for this architecture</span>
+      </v-tooltip>
+    </div>
+    <v-divider />
+    <v-expansion-panels>
+      <v-expansion-panel>
+        <v-expansion-panel-header class="d-flex justify-space-between">
+          <div class="d-flex align-center">
+            <v-avatar class="mr-3" size="30" rounded="0">
+              <v-img contain :src="extension.company_logo" />
+            </v-avatar>
+            <span>Developed by <strong>{{ selected?.company?.name }}</strong></span>
+          </div>
+          <template #actions>
+            <v-icon>mdi-chevron-down</v-icon>
+          </template>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-card-text>
+            Written by:
+            <ul>
+              <li
+                v-for="author in (selected?.authors ?? [])"
+                :key="author.email"
+              >
+                {{ author.name }} &#60;{{ author.email }}>
+              </li>
+            </ul>
+          </v-card-text>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+      <v-expansion-panel>
+        <v-expansion-panel-header class="d-flex justify-space-between">
+          <div class="d-flex align-center">
+            <v-icon class="mr-3" color="primary" size="30">
+              mdi-shield-account
+            </v-icon>
+            <span>Permissions</span>
+          </div>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
           <v-card
-            min-height="50vh"
-            height="100%"
-            rounded="lg"
-            style="overflow: auto;"
+            v-if="permissions"
+            outlined
+            width="100%"
           >
-            <v-card-text>
-              <!-- This is a compiled markdown we compile ourselves. it should be safe -->
-              <!-- eslint-disable -->
-              <div
-                class="readme"
-                v-html="compiled_markdown"
-              />
-              <!-- eslint-enable -->
+            <v-card-text
+              style="overflow: auto;"
+            >
+              <pre>{{ permissions }}</pre>
             </v-card-text>
           </v-card>
-        </v-col>
-        <v-col
-          cols="4"
-          sm="4"
-          class="mt-5"
-        >
-          <v-sheet
-            min-height="50vh"
-            rounded="lg"
-          >
-            <v-row dense>
-              <v-col>
-                <v-select
-                  v-model="selected_version"
-                  :items="available_tags"
-                  label="Version"
-                >
-                  <template #item="{ item }">
-                    <v-tooltip
-                      v-if="item.value === null"
-                      bottom
-                    >
-                      <template #activator="{ on, attrs }">
-                        <div
-                          style="width: 100%; color: var(--v-warning-base);"
-                          v-bind="attrs"
-                          v-on="on"
-                        >
-                          <v-list-item-content>
-                            <v-list-item-title v-text="item.text" />
-                          </v-list-item-content>
-                        </div>
-                      </template>
-                      <span>This allows you to set custom tags that may not be present on official manifest</span>
-                    </v-tooltip>
-                    <v-tooltip
-                      v-else
-                      :disabled="item.active"
-                      bottom
-                    >
-                      <template #activator="{ on, attrs }">
-                        <div
-                          style="width: 100%;"
-                          :style="item.active ? '' : 'opacity: 0.5;'"
-                          v-bind="attrs"
-                          v-on="on"
-                        >
-                          <v-list-item-content>
-                            <v-list-item-title v-text="item.text" />
-                          </v-list-item-content>
-                        </div>
-                      </template>
-                      <span>This version is not compatible with current machine running BlueOS</span>
-                    </v-tooltip>
-                  </template>
-                </v-select>
-              </v-col>
-              <v-col class="text-center">
-                <v-tooltip :disabled="extension.is_compatible" bottom>
-                  <template #activator="{ on, attrs }">
-                    <v-btn
-                      class="mt-3"
-                      :disabled="!extension.is_compatible || !is_version_compatible"
-                      color="primary"
-                      v-bind="attrs"
-                      v-on="on"
-                      @click="$emit('clicked', extension.identifier, selected_version, is_installed)"
-                    >
-                      {{ is_installed ? 'Uninstall' : 'Install' }}
-                    </v-btn>
-                  </template>
-                  <span>No versions available for this architecture</span>
-                </v-tooltip>
-              </v-col>
-            </v-row>
-            <span
-              v-if="!extension.is_compatible || !is_version_compatible"
-            >
-              <h3
-                class="ma-2"
-              >
-                Compatible only with:
-              </h3>
-              <v-chip
-                v-for="arch in compatible_version_archs"
-                :key="arch"
-                class="mr-1 mb-1"
-                density="compact"
-                size="x-small"
-              >
-                {{ arch }}
-              </v-chip>
-            </span>
-            <h3
-              v-if="selected?.website"
-              class="ma-2"
-            >
-              Website:
-            </h3>
-            <a :href="selected?.website">
-              {{ selected?.website }}</a>
-            <h3
-              v-if="selected?.docs"
-              class="ma-2"
-            >
-              Docs:
-            </h3>
-            <a :href="selected?.docs">
-              {{ selected?.docs }}</a>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
 
-            <h3
-              v-if="permissions"
-              class="ma-2"
-            >
-              Settings:
-            </h3>
-            <v-card
-              v-if="permissions"
-              outlined
-              width="100%"
-            >
-              <v-card-text
-                style="overflow: auto;"
-              >
-                <pre>{{ permissions }}</pre>
-              </v-card-text>
-            </v-card>
-            <span v-if="selected?.company">
-              <v-card
-                class="mt-2"
-                outlined
-              >
-                <span
-                  class="mb-3 align-center"
-                  style="display: flex; flex: 1 1 auto;"
-                >
-                  <v-img
-                    class="ma-2"
-                    :src="extension.company_logo"
-                    max-height="30"
-                    max-width="30"
-                  />
-                  <h3 class="ma-2">
-                    {{ selected?.company.name }}
-                  </h3>
-                </span>
-                <v-card-text v-if="selected?.company.about">
-                  {{ selected?.company.about }}
-                </v-card-text>
-                <v-card-text>
-                  Written by:
-                  <ul>
-                    <li
-                      v-for="author in (selected?.authors ?? [])"
-                      :key="author.email"
-                    >
-                      {{ author.name }} &#60;{{ author.email }}>
-                    </li>
-                  </ul>
-                </v-card-text>
-              </v-card>
-            </span>
-          </v-sheet>
-        </v-col>
-      </v-row>
-    </v-card-text>
   </v-card>
 </template>
 
@@ -287,11 +208,6 @@ export default Vue.extend({
     extension() {
       this.selected_version = this.getLatestTag()
     },
-    is_using_custom_tag(value: string) {
-      if (value) {
-        return
-      }
-    },
   },
   mounted() {
     this.selected_version = this.getLatestTag()
@@ -303,9 +219,6 @@ export default Vue.extend({
     getLatestTag(): string {
       return this.getSortedTags()[0] ?? ''
     },
-    getAvailableTagsFromDocker(): string[] {
-      return []
-    },
   },
 })
 </script>
@@ -337,4 +250,17 @@ div.readme h3 {
 div.readme ul {
   margin-left: 20px;
 }
+
+.extension-creators {
+  flex-grow: 1;
+  margin-left: 10px;
+}
+.extension-title {
+  font-weight: bold;
+  font-size: 30px;
+}
+.extension-description {
+  color: gray;
+  font-size: 14px;
+}
 </style>
diff --git a/core/frontend/src/views/ExtensionManagerView.vue b/core/frontend/src/views/ExtensionManagerView.vue
index d50c9d9d38..f8320ba87b 100644
--- a/core/frontend/src/views/ExtensionManagerView.vue
+++ b/core/frontend/src/views/ExtensionManagerView.vue
@@ -9,7 +9,7 @@
     />
     <v-dialog
       v-model="show_dialog"
-      width="80%"
+      max-width="800px"
     >
       <ExtensionDetailsModal
         :extension="selected_extension"

From cacdcfc6e1a893401898266f96145263f9107628 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Mon, 29 Jul 2024 16:59:40 -0300
Subject: [PATCH 6/7] W

---
 .../src/components/common/JsonEditor.vue      |  8 +++
 .../frontend/src/components/kraken/Schemas.ts |  0
 .../kraken/modals/ExtensionDetailsModal.vue   | 68 +++++++++++++++----
 3 files changed, 62 insertions(+), 14 deletions(-)
 create mode 100644 core/frontend/src/components/kraken/Schemas.ts

diff --git a/core/frontend/src/components/common/JsonEditor.vue b/core/frontend/src/components/common/JsonEditor.vue
index cf09ada65a..06bd4d8111 100644
--- a/core/frontend/src/components/common/JsonEditor.vue
+++ b/core/frontend/src/components/common/JsonEditor.vue
@@ -43,6 +43,14 @@ export default {
       type: Object,
       required: true,
     },
+    schema: {
+      type: Object,
+      default: () => ({}),
+    },
+    schemaRefs: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
diff --git a/core/frontend/src/components/kraken/Schemas.ts b/core/frontend/src/components/kraken/Schemas.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue b/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
index 95b1bacc04..9ca15f5fae 100644
--- a/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
+++ b/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
@@ -11,7 +11,7 @@
         <div class="extension-description">
           {{ extension.description }}
         </div>
-        <div class="extension-description">
+        <div class="extension-architectures">
           <strong>{{ compatible_version_archs.join(', ') }}</strong>
         </div>
       </div>
@@ -100,20 +100,35 @@
         </v-expansion-panel-header>
         <v-expansion-panel-content>
           <v-card
-            v-if="permissions"
             outlined
             width="100%"
+            height="300"
           >
             <v-card-text
+              v-if="typeof editing_permissions === 'string'"
               style="overflow: auto;"
             >
-              <pre>{{ permissions }}</pre>
+              <pre>{{ editing_permissions }}</pre>
             </v-card-text>
+            <json-editor
+              v-else
+              v-model="editing_permissions"
+              style="width:100%; height:100%"
+              @save="onEditingPermissionsSave"
+            />
           </v-card>
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
-
+    <v-card-text class="mt-5">
+      <!-- This is a compiled markdown we compile ourselves. it should be safe -->
+      <!-- eslint-disable -->
+      <div
+        class="readme"
+        v-html="compiled_markdown"
+      />
+      <!-- eslint-enable -->
+    </v-card-text>
   </v-card>
 </template>
 
@@ -122,12 +137,16 @@ import { marked } from 'marked'
 import { compare } from 'semver'
 import Vue, { PropType } from 'vue'
 
+import JsonEditor from '@/components/common/JsonEditor.vue'
 import settings from '@/libs/settings'
 import { JSONValue } from '@/types/common'
 import { ExtensionData, Version } from '@/types/kraken'
 
 export default Vue.extend({
   name: 'ExtensionModal',
+  components: {
+    JsonEditor,
+  },
   props: {
     extension: {
       type: Object as PropType<ExtensionData>,
@@ -142,6 +161,7 @@ export default Vue.extend({
   data() {
     return {
       selected_version: '' as string | null | undefined,
+      editing_permissions: '' as string | JSONValue,
     }
   },
   computed: {
@@ -175,16 +195,6 @@ export default Vue.extend({
 
       return tags
     },
-    permissions(): (undefined | JSONValue) {
-      if (!this.selected_version) {
-        return 'Select a version'
-      }
-      const versions = this.extension?.versions
-      if (versions && this.selected_version in versions) {
-        return versions[this.selected_version].permissions
-      }
-      return 'No permissions required'
-    },
     is_installed(): boolean {
       return this.selected_version === this.installed
     },
@@ -207,6 +217,10 @@ export default Vue.extend({
   watch: {
     extension() {
       this.selected_version = this.getLatestTag()
+      this.editing_permissions = this.getVersionPermissions()
+    },
+    selected_version() {
+      this.editing_permissions = this.getVersionPermissions()
     },
   },
   mounted() {
@@ -219,6 +233,21 @@ export default Vue.extend({
     getLatestTag(): string {
       return this.getSortedTags()[0] ?? ''
     },
+    getVersionPermissions(): string | JSONValue {
+      if (!this.selected_version) {
+        return 'Select a version to view permissions'
+      }
+
+      const versions = this.extension?.versions
+      if (versions && this.selected_version in versions) {
+        return versions[this.selected_version].permissions
+      }
+
+      return 'No permissions required'
+    },
+    onEditingPermissionsSave() {
+      console.log('Permissions saved')
+    },
   },
 })
 </script>
@@ -262,5 +291,16 @@ div.readme ul {
 .extension-description {
   color: gray;
   font-size: 14px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.extension-architectures {
+  color: gray;
+  font-size: 15px;
+  padding-top: 4px;
+  text-transform: uppercase;
 }
 </style>

From edb282faec458ee6599b66db73760c323892d822 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Tue, 30 Jul 2024 13:00:27 -0300
Subject: [PATCH 7/7] W

---
 .../src/components/common/JsonEditor.vue      |  9 +--
 .../kraken/modals/ExtensionDetailsModal.vue   | 64 +++++++++++++++++--
 .../src/views/ExtensionManagerView.vue        | 13 ++--
 3 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/core/frontend/src/components/common/JsonEditor.vue b/core/frontend/src/components/common/JsonEditor.vue
index 06bd4d8111..c5cf605dec 100644
--- a/core/frontend/src/components/common/JsonEditor.vue
+++ b/core/frontend/src/components/common/JsonEditor.vue
@@ -13,6 +13,7 @@
 
       <v-divider />
 
+      <slot name="controls" />
       <v-btn
         v-tooltip="save_tooltip"
         class="editor-control"
@@ -43,14 +44,6 @@ export default {
       type: Object,
       required: true,
     },
-    schema: {
-      type: Object,
-      default: () => ({}),
-    },
-    schemaRefs: {
-      type: Object,
-      default: () => ({}),
-    },
   },
   data() {
     return {
diff --git a/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue b/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
index 9ca15f5fae..d326e77ed1 100644
--- a/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
+++ b/core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue
@@ -53,7 +53,7 @@
 
             v-bind="attrs"
             v-on="on"
-            @click="$emit('clicked', extension.identifier, selected_version, is_installed)"
+            @click="performAction"
           >
             {{ is_installed ? 'Uninstall' : 'Install' }}
           </v-btn>
@@ -115,7 +115,22 @@
               v-model="editing_permissions"
               style="width:100%; height:100%"
               @save="onEditingPermissionsSave"
-            />
+            >
+              <template
+                v-if="is_reset_editing_permissions_visible"
+                #controls
+              >
+                <v-btn
+                  v-tooltip="'Reset to default permissions'"
+                  class="editor-control"
+                  icon
+                  color="white"
+                  @click="onResetToDefaultPermissions"
+                >
+                  <v-icon>mdi-restore</v-icon>
+                </v-btn>
+              </template>
+            </json-editor>
           </v-card>
         </v-expansion-panel-content>
       </v-expansion-panel>
@@ -162,6 +177,7 @@ export default Vue.extend({
     return {
       selected_version: '' as string | null | undefined,
       editing_permissions: '' as string | JSONValue,
+      custom_permissions: {} as Record<string, JSONValue>,
     }
   },
   computed: {
@@ -213,11 +229,19 @@ export default Vue.extend({
         ),
       ]
     },
+    is_reset_editing_permissions_visible(): boolean {
+      if (!this.selected_version) {
+        return false
+      }
+
+      return JSON.stringify(this.editing_permissions) !== JSON.stringify(this.selected?.permissions)
+    },
   },
   watch: {
     extension() {
       this.selected_version = this.getLatestTag()
       this.editing_permissions = this.getVersionPermissions()
+      this.custom_permissions = {}
     },
     selected_version() {
       this.editing_permissions = this.getVersionPermissions()
@@ -238,15 +262,36 @@ export default Vue.extend({
         return 'Select a version to view permissions'
       }
 
-      const versions = this.extension?.versions
-      if (versions && this.selected_version in versions) {
-        return versions[this.selected_version].permissions
+      if (this.selected) {
+        return this.custom_permissions[this.selected_version] ?? this.selected.permissions
       }
 
       return 'No permissions required'
     },
-    onEditingPermissionsSave() {
-      console.log('Permissions saved')
+    onEditingPermissionsSave(json: JSONValue) {
+      if (this.selected_version) {
+        this.editing_permissions = json
+        this.custom_permissions[this.selected_version] = json
+      }
+    },
+    onResetToDefaultPermissions() {
+      if (this.selected_version) {
+        delete this.custom_permissions[this.selected_version]
+        this.editing_permissions = this.getVersionPermissions()
+      }
+    },
+    performAction() {
+      if (!this.selected_version) {
+        return
+      }
+
+      this.$emit(
+        'clicked',
+        this.extension.identifier,
+        this.selected_version,
+        JSON.stringify(this.custom_permissions[this.selected_version]),
+        this.is_installed,
+      )
     },
   },
 })
@@ -280,6 +325,11 @@ div.readme ul {
   margin-left: 20px;
 }
 
+.editor-control {
+  margin: 0;
+  opacity: 0.7;
+}
+
 .extension-creators {
   flex-grow: 1;
   margin-left: 10px;
diff --git a/core/frontend/src/views/ExtensionManagerView.vue b/core/frontend/src/views/ExtensionManagerView.vue
index f8320ba87b..c62911d6c3 100644
--- a/core/frontend/src/views/ExtensionManagerView.vue
+++ b/core/frontend/src/views/ExtensionManagerView.vue
@@ -532,7 +532,12 @@ export default Vue.extend({
           this.status_text = ''
         })
     },
-    async performActionFromModal(identifier: string, tag: string, isInstalled: boolean) {
+    async performActionFromModal(
+      identifier: string,
+      tag: string,
+      permissions: string | undefined,
+      isInstalled: boolean,
+    ) {
       if (isInstalled) {
         const ext = this.installed_extensions[identifier]
         if (!ext) {
@@ -541,10 +546,10 @@ export default Vue.extend({
         this.show_dialog = false
         await this.uninstall(ext)
       } else {
-        await this.installFromSelected(tag)
+        await this.installFromSelected(tag, permissions)
       }
     },
-    async installFromSelected(tag: string) {
+    async installFromSelected(tag: string, permissions: string | undefined) {
       if (!this.selected_extension) {
         return
       }
@@ -555,7 +560,7 @@ export default Vue.extend({
         tag,
         true,
         JSON.stringify(this.selected_extension?.versions[tag].permissions),
-        '',
+        permissions ?? '',
       )
     },
     async uninstall(extension: InstalledExtensionData) {