From 205b92af7b45790029a6f1b4a5d8909021e9f578 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 25 Nov 2025 13:56:22 +0100
Subject: [PATCH 01/23] feat: Implement button variants and add supporting
 theme tokens.

---
 app/components/Extension.vue      | 75 +++++++++++++++++++++++++++++++
 app/components/Layout/SideBar.vue |  6 +++
 app/layouts/default.vue           | 13 ++++++
 app/stores/UI.js                  |  7 +++
 4 files changed, 101 insertions(+)
 create mode 100644 app/components/Extension.vue

diff --git a/app/components/Extension.vue b/app/components/Extension.vue
new file mode 100644
index 00000000..6b4d68b6
--- /dev/null
+++ b/app/components/Extension.vue
@@ -0,0 +1,75 @@
+<template>
+  <v-card :width="500" flat>
+    <v-card-title
+      class="text-h4 text-primary pa-4 font-weight-bold d-flex align-center"
+    >
+      <v-icon icon="mdi-puzzle" class="mr-3"></v-icon>
+      Extensions
+    </v-card-title>
+    <v-card-subtitle class="ma-0 text-medium">
+      Load extension files (.es.js) to enhance functionality.
+    </v-card-subtitle>
+    <v-card-text class="pt-6">
+      <v-file-input
+        v-model="files"
+        label="Drop extension files here"
+        accept=".es.js"
+        prepend-icon="mdi-file-upload"
+        variant="outlined"
+        multiple
+        show-size
+        @update:model-value="handleFileChange"
+      >
+        <template v-slot:selection="{ fileNames }">
+          <template v-for="fileName in fileNames" :key="fileName">
+            <v-chip size="small" label color="primary" class="mr-2">
+              {{ fileName }}
+            </v-chip>
+          </template>
+        </template>
+      </v-file-input>
+
+      <v-list v-if="files.length > 0" class="mt-4" lines="two">
+        <v-list-subheader>Preview</v-list-subheader>
+        <v-list-item
+          v-for="(file, index) in files"
+          :key="index"
+          :title="file.name"
+          :subtitle="formatSize(file.size)"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-file-code-outline" color="primary"></v-icon>
+          </template>
+          <template v-slot:append>
+             <v-icon icon="mdi-check-circle" color="success"></v-icon>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const files = ref([])
+
+const handleFileChange = (newFiles) => {
+  // Logic to process files can be added here
+  console.log('Files loaded:', newFiles)
+}
+
+const formatSize = (size) => {
+  if (size < 1024) return size + ' B'
+  const i = Math.floor(Math.log(size) / Math.log(1024))
+  return (
+    (size / Math.pow(1024, i)).toFixed(2) * 1 +
+    ' ' +
+    ['B', 'kB', 'MB', 'GB', 'TB'][i]
+  )
+}
+</script>
+
+<style scoped>
+/* Add any specific styles here if needed, matching CreateTools.vue */
+</style>
diff --git a/app/components/Layout/SideBar.vue b/app/components/Layout/SideBar.vue
index 31646d89..f9748ccd 100644
--- a/app/components/Layout/SideBar.vue
+++ b/app/components/Layout/SideBar.vue
@@ -86,6 +86,7 @@
 
 <script setup>
   import { useProjectManager } from "@ogw_f/composables/project_manager"
+  const UIStore = useUIStore()
 
   const drawer = ref(true)
   const newproject = ref(false)
@@ -98,6 +99,11 @@
       icon: "mdi-home",
       click: () => navigateTo("/"),
     },
+    {
+      title: "Extensions",
+      icon: "mdi-puzzle",
+      click: () => UIStore.setShowExtensions(true),
+    },
     // {
     //   title: "New Project",
     //   icon: "mdi-plus",
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 3d529488..b64e4a92 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -66,6 +66,19 @@
           <CreateTools />
         </v-navigation-drawer>
 
+        <v-navigation-drawer
+          class="align-start"
+          radius="10px"
+          :width="500"
+          location="right"
+          temporary
+          v-model="UIStore.showExtensions"
+        >
+          <Extension />
+        </v-navigation-drawer>
+
+
+
         <FullScrenDropZone />
       </InfraConnected>
     </v-main>
diff --git a/app/stores/UI.js b/app/stores/UI.js
index 82329e9a..7121bb00 100644
--- a/app/stores/UI.js
+++ b/app/stores/UI.js
@@ -80,6 +80,11 @@ export const useUIStore = defineStore("UI", () => {
     showCreateVOI.value = value
   }
 
+  const showExtensions = ref(false)
+  function setShowExtensions(value) {
+    showExtensions.value = value
+  }
+
   return {
     toolsDefinitions,
     activeTools,
@@ -103,5 +108,7 @@ export const useUIStore = defineStore("UI", () => {
     setShowCreatePoint,
     setShowCreateAOI,
     setShowCreateVOI,
+    showExtensions,
+    setShowExtensions,
   }
 })

From db481b00113853104691693c671dcf95c0821d40 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 25 Nov 2025 14:38:26 +0100
Subject: [PATCH 02/23] edit drawer

---
 app/components/Layout/SideBar.vue |  6 +++-
 app/layouts/default.vue           | 50 +++++++++++++++++++++++--------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/app/components/Layout/SideBar.vue b/app/components/Layout/SideBar.vue
index f9748ccd..3c28a644 100644
--- a/app/components/Layout/SideBar.vue
+++ b/app/components/Layout/SideBar.vue
@@ -93,6 +93,10 @@
   const openproject = ref(false)
   const importFileInput = templateRef("importFileInput")
 
+  const toggleExtensions = () => {
+    UIStore.setShowExtensions(!UIStore.showExtensions)
+  }
+
   const items = ref([
     {
       title: "Home",
@@ -102,7 +106,7 @@
     {
       title: "Extensions",
       icon: "mdi-puzzle",
-      click: () => UIStore.setShowExtensions(true),
+      click: () => toggleExtensions(),
     },
     // {
     //   title: "New Project",
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index b64e4a92..c9c65c34 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -66,19 +66,6 @@
           <CreateTools />
         </v-navigation-drawer>
 
-        <v-navigation-drawer
-          class="align-start"
-          radius="10px"
-          :width="500"
-          location="right"
-          temporary
-          v-model="UIStore.showExtensions"
-        >
-          <Extension />
-        </v-navigation-drawer>
-
-
-
         <FullScrenDropZone />
       </InfraConnected>
     </v-main>
@@ -88,6 +75,22 @@
       indeterminate
       color="white"
     />
+<Transition name="slide-left">
+  <v-navigation-drawer
+    v-if="UIStore.showExtensions"
+    class="align-start"
+    radius="10px"
+    :width="500"
+    location="left"
+    temporary
+    app
+    :model-value="true"
+    style="z-index: 1005;"
+    @update:model-value="UIStore.setShowExtensions($event)"
+  >
+    <Extension />
+  </v-navigation-drawer>
+</Transition>
   </v-app>
 </template>
 
@@ -162,4 +165,25 @@
   .slide-leave-to {
     transform: translateX(100%);
   }
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.slide-left-enter-from {
+  transform: translateX(-100%);
+}
+
+.slide-left-enter-to {
+  transform: translateX(0);
+}
+
+.slide-left-leave-from {
+  transform: translateX(0);
+}
+
+.slide-left-leave-to {
+  transform: translateX(-100%);
+}
+
 </style>

From 323bb44e4e3385c04377e9f7c9007ea7bbe52dfa Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 25 Nov 2025 16:37:53 +0100
Subject: [PATCH 03/23] updates

---
 app/api/VeaseExtensionAPI.js         |  13 +
 app/components/Extension.vue         | 592 ++++++++++++++++++++++++---
 app/plugins/extension.client.js      |  15 +
 app/plugins/module-globals.client.js |  16 +
 app/utils/extensionAPI.js            |  79 ++++
 5 files changed, 662 insertions(+), 53 deletions(-)
 create mode 100644 app/api/VeaseExtensionAPI.js
 create mode 100644 app/plugins/extension.client.js
 create mode 100644 app/plugins/module-globals.client.js
 create mode 100644 app/utils/extensionAPI.js

diff --git a/app/api/VeaseExtensionAPI.js b/app/api/VeaseExtensionAPI.js
new file mode 100644
index 00000000..1a4c771e
--- /dev/null
+++ b/app/api/VeaseExtensionAPI.js
@@ -0,0 +1,13 @@
+import * as Vue from "vue"
+import { useUIStore } from "../stores/UI"
+
+export class VeaseExtensionAPI {
+  constructor() {
+    this.vue = Vue
+    this.uiStore = useUIStore()
+  }
+
+  registerTool(toolDefinition) {
+    this.uiStore.registerToolComponent(toolDefinition)
+  }
+}
diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index 6b4d68b6..79d16541 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -1,75 +1,561 @@
 <template>
-  <v-card :width="500" flat>
-    <v-card-title
-      class="text-h4 text-primary pa-4 font-weight-bold d-flex align-center"
-    >
-      <v-icon icon="mdi-puzzle" class="mr-3"></v-icon>
+  <v-card class="extension-manager-card" flat>
+    <v-card-title class="extension-manager-header">
+      <v-icon icon="mdi-puzzle" class="extension-manager-icon" />
       Extensions
     </v-card-title>
-    <v-card-subtitle class="ma-0 text-medium">
-      Load extension files (.es.js) to enhance functionality.
+    <v-card-subtitle class="extension-manager-subtitle">
+      Enhance your application with additional features and tools
     </v-card-subtitle>
-    <v-card-text class="pt-6">
-      <v-file-input
-        v-model="files"
-        label="Drop extension files here"
-        accept=".es.js"
-        prepend-icon="mdi-file-upload"
-        variant="outlined"
-        multiple
-        show-size
-        @update:model-value="handleFileChange"
+
+    <v-card-text class="extension-manager-content">
+      <!-- Drag & Drop Zone -->
+      <v-card
+        class="extension-upload-card"
+        :class="{
+          'extension-upload-hover': isDragging,
+          'extension-upload-loading': loading,
+        }"
+        :elevation="isDragging ? 8 : 2"
+        rounded="lg"
+        @dragover.prevent="isDragging = true"
+        @dragleave.prevent="isDragging = false"
+        @drop.prevent="handleDrop"
       >
-        <template v-slot:selection="{ fileNames }">
-          <template v-for="fileName in fileNames" :key="fileName">
-            <v-chip size="small" label color="primary" class="mr-2">
-              {{ fileName }}
-            </v-chip>
-          </template>
-        </template>
-      </v-file-input>
-
-      <v-list v-if="files.length > 0" class="mt-4" lines="two">
-        <v-list-subheader>Preview</v-list-subheader>
-        <v-list-item
-          v-for="(file, index) in files"
-          :key="index"
-          :title="file.name"
-          :subtitle="formatSize(file.size)"
+        <v-card-text class="extension-upload-content">
+          <v-icon
+            :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
+            :class="{ 'rotating': loading }"
+            size="64"
+            :color="isDragging ? 'primary' : 'grey-lighten-1'"
+            class="mb-4"
+          />
+          <div class="extension-upload-text" :class="isDragging ? 'text-primary' : ''">
+            {{ loading ? 'Loading Extension...' : isDragging ? 'Drop to Install' : 'Drag & Drop Extension' }}
+          </div>
+          <div class="extension-upload-hint">
+            or click to browse files
+          </div>
+          <v-file-input
+            v-model="files"
+            accept=".es.js"
+            multiple
+            class="file-input-hidden"
+            @update:model-value="handleFileChange"
+            hide-details
+            density="compact"
+          >
+            <template v-slot:prepend>
+              <v-btn
+                color="primary"
+                variant="outlined"
+                rounded="pill"
+                :loading="loading"
+                class="extension-upload-button"
+              >
+                <v-icon start>mdi-folder-open</v-icon>
+                Browse Files
+              </v-btn>
+            </template>
+          </v-file-input>
+        </v-card-text>
+      </v-card>
+
+      <!-- Success/Error Messages -->
+      <v-expand-transition>
+        <v-alert
+          v-if="successMessage"
+          type="success"
+          class="extension-alert mt-4"
+          closable
+          @click:close="successMessage = ''"
         >
-          <template v-slot:prepend>
-            <v-icon icon="mdi-file-code-outline" color="primary"></v-icon>
-          </template>
-          <template v-slot:append>
-             <v-icon icon="mdi-check-circle" color="success"></v-icon>
-          </template>
-        </v-list-item>
-      </v-list>
+          <div class="d-flex align-center">
+            <v-icon start>mdi-check-circle</v-icon>
+            {{ successMessage }}
+          </div>
+        </v-alert>
+      </v-expand-transition>
+
+      <v-expand-transition>
+        <v-alert
+          v-if="errorMessage"
+          type="error"
+          class="extension-alert mt-4"
+          closable
+          @click:close="errorMessage = ''"
+        >
+          <div class="d-flex align-center">
+            <v-icon start>mdi-alert-circle</v-icon>
+            {{ errorMessage }}
+          </div>
+        </v-alert>
+      </v-expand-transition>
+
+      <!-- Loaded Extensions -->
+      <div v-if="loadedExtensions.length > 0" class="mt-6">
+        <div class="extension-header">
+          <v-icon icon="mdi-puzzle-check" color="success" class="mr-2" />
+          Active Extensions
+          <v-chip size="small" class="ml-2" color="success" variant="tonal">
+            {{ loadedExtensions.length }}
+          </v-chip>
+        </div>
+
+        <v-row>
+          <v-col
+            v-for="(extension, index) in loadedExtensions"
+            :key="index"
+            cols="12"
+          >
+            <v-hover v-slot="{ isHovering, props }">
+              <v-card
+                v-bind="props"
+                :elevation="isHovering ? 4 : 1"
+                rounded="lg"
+                class="extension-item-card"
+                :class="{ 'extension-item-hover': isHovering }"
+              >
+                <v-card-text class="pa-4">
+                  <div class="extension-item-content">
+                    <v-avatar
+                      :color="isHovering ? 'primary' : 'grey-lighten-3'"
+                      size="48"
+                      class="mr-3"
+                    >
+                      <v-icon
+                        :color="isHovering ? 'white' : 'grey-darken-2'"
+                        icon="mdi-puzzle"
+                      />
+                    </v-avatar>
+                    <div class="extension-item-details">
+                      <div class="extension-item-title">
+                        {{ getExtensionName(extension) }}
+                      </div>
+                      <div class="extension-item-description">
+                        {{ getExtensionDescription(extension) }}
+                      </div>
+                      <div class="extension-item-meta">
+                        <v-chip
+                          size="x-small"
+                          color="success"
+                          variant="tonal"
+                          prepend-icon="mdi-check-circle"
+                        >
+                          Active
+                        </v-chip>
+                        <v-chip
+                          v-if="getExtensionVersion(extension)"
+                          size="x-small"
+                          variant="tonal"
+                        >
+                          v{{ getExtensionVersion(extension) }}
+                        </v-chip>
+                        <v-spacer />
+                        <span class="extension-item-date">
+                          {{ formatDate(extension.loadedAt) }}
+                        </span>
+                      </div>
+                    </div>
+                    <v-btn
+                      icon="mdi-close"
+                      size="small"
+                      variant="text"
+                      color="error"
+                      @click="confirmRemove(extension)"
+                      class="extension-item-remove"
+                    />
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-hover>
+          </v-col>
+        </v-row>
+      </div>
+
+      <!-- Empty State -->
+      <v-card
+        v-if="loadedExtensions.length === 0"
+        variant="outlined"
+        rounded="lg"
+        class="mt-6 empty-state-card"
+      >
+        <v-card-text class="text-center pa-6">
+          <v-icon
+            icon="mdi-puzzle-outline"
+            size="48"
+            color="grey-lighten-1"
+            class="mb-3"
+          />
+          <div class="empty-state-title">
+            No extensions loaded yet
+          </div>
+          <div class="empty-state-description">
+            Upload an extension file to get started
+          </div>
+        </v-card-text>
+      </v-card>
     </v-card-text>
+
+    <!-- Confirmation Dialog -->
+    <v-dialog v-model="showRemoveDialog" max-width="400">
+      <v-card rounded="lg" class="extension-confirmation-dialog">
+        <v-card-title class="extension-confirmation-header">
+          <v-icon icon="mdi-alert" color="warning" class="mr-2" />
+          Remove Extension?
+        </v-card-title>
+        <v-card-text class="extension-confirmation-content">
+          Are you sure you want to remove <strong>{{ getExtensionName(extensionToRemove) }}</strong>?
+          This action cannot be undone.
+        </v-card-text>
+        <v-card-actions class="extension-confirmation-actions">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="showRemoveDialog = false"
+            class="extension-confirmation-cancel"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="flat"
+            @click="removeExtension"
+            class="extension-confirmation-remove"
+          >
+            Remove
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
+const UIStore = useUIStore()
+const appStore = useAppStore()
 const files = ref([])
+const loading = ref(false)
+const isDragging = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+const showRemoveDialog = ref(false)
+const extensionToRemove = ref(null)
+
+const loadedExtensions = computed(() => appStore.getLoadedExtensions())
+
+// Extract extension name from path or metadata
+const getExtensionName = (extension) => {
+  if (!extension) return 'Unknown Extension'
+
+  // Try to get name from metadata first
+  if (extension.metadata?.name) {
+    return extension.metadata.name
+  }
 
-const handleFileChange = (newFiles) => {
-  // Logic to process files can be added here
-  console.log('Files loaded:', newFiles)
+  // Extract filename from path
+  const path = extension.path || ''
+  const filename = path.split('/').pop() || path
+
+  // Remove .es.js extension and format nicely
+  return filename
+    .replace(/\.es\.js$/, '')
+    .split(/[-_]/)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+// Get extension description
+const getExtensionDescription = (extension) => {
+  if (extension?.metadata?.description) {
+    return extension.metadata.description
+  }
+  return 'Custom extension module'
 }
 
-const formatSize = (size) => {
-  if (size < 1024) return size + ' B'
-  const i = Math.floor(Math.log(size) / Math.log(1024))
-  return (
-    (size / Math.pow(1024, i)).toFixed(2) * 1 +
-    ' ' +
-    ['B', 'kB', 'MB', 'GB', 'TB'][i]
+// Get extension version
+const getExtensionVersion = (extension) => {
+  return extension?.metadata?.version || null
+}
+
+const handleDrop = async (event) => {
+  isDragging.value = false
+  const droppedFiles = Array.from(event.dataTransfer.files).filter(
+    file => file.name.endsWith('.es.js')
   )
+
+  if (droppedFiles.length === 0) {
+    errorMessage.value = 'Please drop valid extension files (.es.js)'
+    return
+  }
+
+  await processFiles(droppedFiles)
+}
+
+const handleFileChange = async (newFiles) => {
+  if (!newFiles || newFiles.length === 0) return
+  await processFiles(newFiles)
+}
+
+const processFiles = async (filesToProcess) => {
+  errorMessage.value = ''
+  successMessage.value = ''
+  loading.value = true
+
+  let successCount = 0
+  let failCount = 0
+
+  try {
+    for (const file of filesToProcess) {
+      const fileURL = URL.createObjectURL(file)
+
+      try {
+        await appStore.loadExtension(fileURL)
+        successCount++
+        console.log(`Extension loaded successfully: ${file.name}`)
+      } catch (error) {
+        failCount++
+        console.error(`Failed to load extension ${file.name}:`, error)
+        errorMessage.value = `Failed to load ${file.name}: ${error.message}`
+      } finally {
+        URL.revokeObjectURL(fileURL)
+      }
+    }
+
+    if (successCount > 0) {
+      successMessage.value = `Successfully loaded ${successCount} extension${successCount > 1 ? 's' : ''}!`
+      setTimeout(() => {
+        successMessage.value = ''
+      }, 5000)
+    }
+  } finally {
+    loading.value = false
+    files.value = []
+  }
+}
+
+const formatDate = (dateString) => {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diffMs = now - date
+  const diffMins = Math.floor(diffMs / 60000)
+
+  if (diffMins < 1) return 'Just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffMins < 1440) return `${Math.floor(diffMins / 60)}h ago`
+
+  return date.toLocaleDateString()
+}
+
+const confirmRemove = (extension) => {
+  extensionToRemove.value = extension
+  showRemoveDialog.value = true
+}
+
+const removeExtension = () => {
+  if (extensionToRemove.value) {
+    appStore.unloadExtension(extensionToRemove.value.path)
+    showRemoveDialog.value = false
+    extensionToRemove.value = null
+  }
 }
 </script>
 
 <style scoped>
-/* Add any specific styles here if needed, matching CreateTools.vue */
+/* Main Card */
+.extension-manager-card {
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.extension-manager-card:hover {
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
+}
+
+/* Header Styles */
+.extension-manager-header {
+  padding: 24px 24px 0 24px !important;
+  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.1) 0%, rgba(var(--v-theme-primary), 0.05) 100%);
+  border-radius: 12px 12px 0 0 !important;
+  color: rgba(var(--v-theme-primary), 1);
+}
+
+.extension-manager-icon {
+  margin-right: 12px;
+  font-size: 28px;
+}
+
+.extension-manager-subtitle {
+  padding: 0 24px 16px 24px !important;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+}
+
+/* Upload Card Styles */
+.extension-upload-card {
+  transition: all 0.3s ease;
+  border: 2px dashed rgba(0, 0, 0, 0.12);
+  background: rgba(0, 0, 0, 0.02);
+  cursor: pointer;
+  margin-bottom: 24px;
+}
+
+.extension-upload-hover {
+  border-color: rgb(var(--v-theme-primary));
+  background: rgba(var(--v-theme-primary), 0.05);
+  transform: scale(1.02);
+}
+
+.extension-upload-loading {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.extension-upload-content {
+  text-align: center;
+  padding: 32px !important;
+}
+
+.extension-upload-text {
+  font-size: 1.1rem;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.extension-upload-hint {
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  font-size: 0.85rem;
+  margin-bottom: 16px;
+}
+
+.extension-upload-button {
+  margin-top: 8px;
+}
+
+/* Alert Styles */
+.extension-alert {
+  border-radius: 8px;
+}
+
+/* Extension List Styles */
+.extension-header {
+  display: flex;
+  align-items: center;
+  font-size: 1.1rem;
+  font-weight: 500;
+  margin-bottom: 16px;
+  color: rgba(var(--v-theme-on-surface), 0.9);
+}
+
+/* Extension Item Styles */
+.extension-item-card {
+  transition: all 0.2s ease-in-out;
+  border-left: 4px solid transparent;
+  margin-bottom: 12px;
+}
+
+.extension-item-hover {
+  transform: translateX(4px);
+  border-left-color: rgb(var(--v-theme-primary));
+}
+
+.extension-item-content {
+  display: flex;
+  align-items: flex-start;
+}
+
+.extension-item-details {
+  flex-grow: 1;
+}
+
+.extension-item-title {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: rgba(var(--v-theme-on-surface), 0.9);
+}
+
+.extension-item-description {
+  font-size: 0.85rem;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  margin-bottom: 8px;
+}
+
+.extension-item-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.extension-item-date {
+  font-size: 0.75rem;
+  color: rgba(var(--v-theme-on-surface), 0.5);
+}
+
+.extension-item-remove {
+  margin-left: 8px;
+}
+
+/* Empty State Styles */
+.empty-state-card {
+  border-style: dashed;
+  border-color: rgba(var(--v-theme-on-surface), 0.12);
+}
+
+.empty-state-title {
+  font-size: 1rem;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  margin-bottom: 4px;
+}
+
+.empty-state-description {
+  font-size: 0.85rem;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+}
+
+/* Confirmation Dialog Styles */
+.extension-confirmation-dialog {
+  border-radius: 12px;
+}
+
+.extension-confirmation-header {
+  padding: 20px !important;
+  background: rgba(var(--v-theme-error), 0.1);
+  color: rgba(var(--v-theme-on-error), 0.9);
+}
+
+.extension-confirmation-content {
+  padding: 16px 24px !important;
+}
+
+.extension-confirmation-actions {
+  padding: 16px 24px !important;
+}
+
+.extension-confirmation-cancel {
+  min-width: 80px;
+}
+
+.extension-confirmation-remove {
+  min-width: 80px;
+}
+
+.file-input-hidden :deep(.v-input__control) {
+  display: none;
+}
+
+.rotating {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/app/plugins/extension.client.js b/app/plugins/extension.client.js
new file mode 100644
index 00000000..445b0dd8
--- /dev/null
+++ b/app/plugins/extension.client.js
@@ -0,0 +1,15 @@
+import { VeaseExtensionAPI } from '../utils/extensionAPI.js'
+
+/**
+ * Extension API Plugin
+ * Initializes the VeaseExtensionAPI and registers it with the app store
+ */
+export default defineNuxtPlugin(() => {
+  const appStore = useAppStore()
+  const extensionAPI = new VeaseExtensionAPI()
+  
+  // Register the extension API with the app store
+  appStore.setExtensionAPI(extensionAPI)
+  
+  console.log('[Vease] Extension API initialized')
+})
diff --git a/app/plugins/module-globals.client.js b/app/plugins/module-globals.client.js
new file mode 100644
index 00000000..1894c6ac
--- /dev/null
+++ b/app/plugins/module-globals.client.js
@@ -0,0 +1,16 @@
+/**
+ * Module Globals Plugin
+ * Exposes Vue and Pinia as global references for extensions
+ */
+import * as Vue from 'vue'
+import * as Pinia from 'pinia'
+
+export default defineNuxtPlugin(() => {
+  if (import.meta.client) {
+    // Expose modules globally for extensions
+    window.__VUE_RUNTIME__ = Vue
+    window.__PINIA__ = Pinia
+    
+    console.log('[Vease] Module globals initialized for extensions')
+  }
+})
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
new file mode 100644
index 00000000..e240fd64
--- /dev/null
+++ b/app/utils/extensionAPI.js
@@ -0,0 +1,79 @@
+/**
+ * VeaseExtensionAPI
+ * 
+ * API exposed to extensions for interacting with Vease application
+ * Provides access to stores, tool registration, and UI interactions
+ */
+export class VeaseExtensionAPI {
+  constructor() {
+    this._uiStore = null
+    this._hybridViewerStore = null
+    this._appStore = null
+  }
+
+  /**
+   * Get the UI Store
+   */
+  get UIStore() {
+    if (!this._uiStore) {
+      this._uiStore = useUIStore()
+    }
+    return this._uiStore
+  }
+
+  /**
+   * Get the HybridViewer Store
+   */
+  get HybridViewerStore() {
+    if (!this._hybridViewerStore) {
+      this._hybridViewerStore = useHybridViewerStore()
+    }
+    return this._hybridViewerStore
+  }
+
+  /**
+   * Get the App Store (from OpenGeodeWeb-Front)
+   */
+  get AppStore() {
+    if (!this._appStore) {
+      this._appStore = useAppStore()
+    }
+    return this._appStore
+  }
+
+  /**
+   * Register a tool component
+   * @param {Object} toolDefinition - Tool definition object
+   * @param {string} toolDefinition.id - Unique tool identifier
+   * @param {string} toolDefinition.title - Tool display title
+   * @param {string} toolDefinition.description - Tool description
+   * @param {string} toolDefinition.iconType - Icon type ('mdi' or 'svg')
+   * @param {string} toolDefinition.iconSource - Icon source (mdi icon name or svg path)
+   * @param {Component} toolDefinition.component - Vue component (must be markRaw)
+   */
+  registerTool(toolDefinition) {
+    if (!toolDefinition.id) {
+      throw new Error('Tool definition must have an id')
+    }
+    if (!toolDefinition.component) {
+      throw new Error('Tool definition must have a component')
+    }
+
+    this.UIStore.registerToolComponent(toolDefinition)
+  }
+
+  /**
+   * Access to Vue utilities
+   */
+  get vue() {
+    return {
+      defineAsyncComponent,
+      markRaw,
+      ref,
+      computed,
+      watch,
+      onMounted,
+      onUnmounted,
+    }
+  }
+}

From 854dedee3c1d6f7a0de3e7a43c44495e44b30898 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 25 Nov 2025 17:41:42 +0100
Subject: [PATCH 04/23] edit extension component

---
 app/components/Extension.vue | 551 +++++++++++------------------------
 1 file changed, 165 insertions(+), 386 deletions(-)

diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index 79d16541..545284fa 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -1,103 +1,107 @@
 <template>
-  <v-card class="extension-manager-card" flat>
-    <v-card-title class="extension-manager-header">
-      <v-icon icon="mdi-puzzle" class="extension-manager-icon" />
+  <v-card flat rounded="xl" elevation="2" class="pa-6">
+    <v-card-title
+      class="text-h4 text-primary pa-0 font-weight-bold d-flex align-center"
+    >
+      <v-icon icon="mdi-puzzle" class="mr-3"></v-icon>
       Extensions
     </v-card-title>
-    <v-card-subtitle class="extension-manager-subtitle">
-      Enhance your application with additional features and tools
+
+    <v-card-subtitle class="ma-0 text-medium">
+      Enhance your application with additional features and tools.
     </v-card-subtitle>
 
-    <v-card-text class="extension-manager-content">
+    <v-card-text class="pt-6">
       <!-- Drag & Drop Zone -->
-      <v-card
-        class="extension-upload-card"
-        :class="{
-          'extension-upload-hover': isDragging,
-          'extension-upload-loading': loading,
-        }"
-        :elevation="isDragging ? 8 : 2"
-        rounded="lg"
-        @dragover.prevent="isDragging = true"
-        @dragleave.prevent="isDragging = false"
-        @drop.prevent="handleDrop"
-      >
-        <v-card-text class="extension-upload-content">
-          <v-icon
-            :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
-            :class="{ 'rotating': loading }"
-            size="64"
-            :color="isDragging ? 'primary' : 'grey-lighten-1'"
-            class="mb-4"
-          />
-          <div class="extension-upload-text" :class="isDragging ? 'text-primary' : ''">
-            {{ loading ? 'Loading Extension...' : isDragging ? 'Drop to Install' : 'Drag & Drop Extension' }}
-          </div>
-          <div class="extension-upload-hint">
-            or click to browse files
-          </div>
+      <v-hover v-slot="{ isHovering, props }">
+        <v-card
+          v-bind="props"
+          class="text-center cursor-pointer d-flex flex-column align-center justify-center custom-tool-card"
+          :class="{
+            'bg-blue-lighten-5': isHovering || isDragging,
+            'elevation-6': isHovering || isDragging,
+            'opacity-50 pointer-events-none': loading
+          }"
+          rounded="xl"
+          :elevation="isHovering || isDragging ? 6 : 2"
+          @click="triggerFileDialog"
+          @dragover.prevent="isDragging = true"
+          @dragleave.prevent="isDragging = false"
+          @drop.prevent="handleDrop"
+        >
+          <v-sheet
+            class="d-flex align-center justify-center pa-4 rounded-circle mb-4 mx-auto"
+            :class="isHovering || isDragging ? 'bg-primary' : 'bg-grey-lighten-3'"
+            :width="90"
+            :height="90"
+          >
+            <v-icon
+              :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
+              size="48"
+              :class="{ rotating: loading, 'text-white': isHovering || isDragging }"
+              :color="isHovering || isDragging ? 'white' : 'grey-darken-2'"
+            />
+          </v-sheet>
+
+          <v-card-title
+            class="text-h5 font-weight-bold mb-1 text-wrap"
+            :class="isHovering || isDragging ? 'text-primary' : 'text-medium-emphasis'"
+          >
+            {{ loading ? 'Loading Extension...' : isDragging ? 'Drop to Install' : 'Click or Drag & Drop Extension' }}
+          </v-card-title>
+
+          <v-card-subtitle class="text-caption text-grey-darken-4">
+            (.es.js files only)
+          </v-card-subtitle>
+
           <v-file-input
+            ref="hiddenFileInput"
             v-model="files"
             accept=".es.js"
             multiple
+            hide-details
             class="file-input-hidden"
             @update:model-value="handleFileChange"
-            hide-details
-            density="compact"
-          >
-            <template v-slot:prepend>
-              <v-btn
-                color="primary"
-                variant="outlined"
-                rounded="pill"
-                :loading="loading"
-                class="extension-upload-button"
-              >
-                <v-icon start>mdi-folder-open</v-icon>
-                Browse Files
-              </v-btn>
-            </template>
-          </v-file-input>
-        </v-card-text>
-      </v-card>
+          />
+        </v-card>
+      </v-hover>
 
-      <!-- Success/Error Messages -->
+      <!-- Success -->
       <v-expand-transition>
         <v-alert
           v-if="successMessage"
           type="success"
-          class="extension-alert mt-4"
+          rounded="xl"
+          class="mt-4"
           closable
           @click:close="successMessage = ''"
         >
-          <div class="d-flex align-center">
-            <v-icon start>mdi-check-circle</v-icon>
-            {{ successMessage }}
-          </div>
+          <v-icon start>mdi-check-circle</v-icon>
+          {{ successMessage }}
         </v-alert>
       </v-expand-transition>
 
+      <!-- Error -->
       <v-expand-transition>
         <v-alert
           v-if="errorMessage"
           type="error"
-          class="extension-alert mt-4"
+          rounded="xl"
+          class="mt-4"
           closable
           @click:close="errorMessage = ''"
         >
-          <div class="d-flex align-center">
-            <v-icon start>mdi-alert-circle</v-icon>
-            {{ errorMessage }}
-          </div>
+          <v-icon start>mdi-alert-circle</v-icon>
+          {{ errorMessage }}
         </v-alert>
       </v-expand-transition>
 
       <!-- Loaded Extensions -->
-      <div v-if="loadedExtensions.length > 0" class="mt-6">
-        <div class="extension-header">
-          <v-icon icon="mdi-puzzle-check" color="success" class="mr-2" />
+      <div v-if="loadedExtensions.length" class="mt-6">
+        <div class="d-flex align-center font-weight-bold mb-3 text-primary">
+          <v-icon icon="mdi-puzzle-check" class="mr-2" />
           Active Extensions
-          <v-chip size="small" class="ml-2" color="success" variant="tonal">
+          <v-chip size="small" class="ml-2" color="primary" variant="tonal">
             {{ loadedExtensions.length }}
           </v-chip>
         </div>
@@ -112,117 +116,102 @@
               <v-card
                 v-bind="props"
                 :elevation="isHovering ? 4 : 1"
-                rounded="lg"
-                class="extension-item-card"
-                :class="{ 'extension-item-hover': isHovering }"
+                rounded="xl"
+                class="pa-4 d-flex align-center custom-tool-card"
               >
-                <v-card-text class="pa-4">
-                  <div class="extension-item-content">
-                    <v-avatar
-                      :color="isHovering ? 'primary' : 'grey-lighten-3'"
-                      size="48"
-                      class="mr-3"
+                <v-sheet
+                  class="d-flex align-center justify-center pa-2 rounded-circle mr-3"
+                  :width="56"
+                  :height="56"
+                  :class="isHovering ? 'bg-primary' : 'bg-grey-lighten-3'"
+                >
+                  <v-icon icon="mdi-puzzle" size="32" :color="isHovering ? 'white' : 'grey-darken-2'" />
+                </v-sheet>
+
+                <div class="flex-grow-1">
+                  <div class="font-weight-bold">
+                    {{ getExtensionName(extension) }}
+                  </div>
+
+                  <div class="text-medium-emphasis text-caption mb-2">
+                    {{ getExtensionDescription(extension) }}
+                  </div>
+
+                  <div class="d-flex align-center">
+                    <v-chip
+                      size="x-small"
+                      color="success"
+                      variant="tonal"
+                      prepend-icon="mdi-check-circle"
+                    >
+                      Active
+                    </v-chip>
+
+                    <v-chip
+                      v-if="getExtensionVersion(extension)"
+                      size="x-small"
+                      class="ml-2"
+                      variant="tonal"
                     >
-                      <v-icon
-                        :color="isHovering ? 'white' : 'grey-darken-2'"
-                        icon="mdi-puzzle"
-                      />
-                    </v-avatar>
-                    <div class="extension-item-details">
-                      <div class="extension-item-title">
-                        {{ getExtensionName(extension) }}
-                      </div>
-                      <div class="extension-item-description">
-                        {{ getExtensionDescription(extension) }}
-                      </div>
-                      <div class="extension-item-meta">
-                        <v-chip
-                          size="x-small"
-                          color="success"
-                          variant="tonal"
-                          prepend-icon="mdi-check-circle"
-                        >
-                          Active
-                        </v-chip>
-                        <v-chip
-                          v-if="getExtensionVersion(extension)"
-                          size="x-small"
-                          variant="tonal"
-                        >
-                          v{{ getExtensionVersion(extension) }}
-                        </v-chip>
-                        <v-spacer />
-                        <span class="extension-item-date">
-                          {{ formatDate(extension.loadedAt) }}
-                        </span>
-                      </div>
-                    </div>
-                    <v-btn
-                      icon="mdi-close"
-                      size="small"
-                      variant="text"
-                      color="error"
-                      @click="confirmRemove(extension)"
-                      class="extension-item-remove"
-                    />
+                      v{{ getExtensionVersion(extension) }}
+                    </v-chip>
+
+                    <v-spacer />
+
+                    <span class="text-disabled text-caption">
+                      {{ formatDate(extension.loadedAt) }}
+                    </span>
                   </div>
-                </v-card-text>
+                </div>
+
+                <v-btn
+                  icon="mdi-close"
+                  size="small"
+                  variant="text"
+                  color="error"
+                  @click="confirmRemove(extension)"
+                />
               </v-card>
             </v-hover>
           </v-col>
         </v-row>
       </div>
 
-      <!-- Empty State -->
+      <!-- Empty -->
       <v-card
-        v-if="loadedExtensions.length === 0"
+        v-else
+        rounded="xl"
         variant="outlined"
-        rounded="lg"
-        class="mt-6 empty-state-card"
+        class="mt-6 text-center pa-6"
       >
-        <v-card-text class="text-center pa-6">
-          <v-icon
-            icon="mdi-puzzle-outline"
-            size="48"
-            color="grey-lighten-1"
-            class="mb-3"
-          />
-          <div class="empty-state-title">
-            No extensions loaded yet
-          </div>
-          <div class="empty-state-description">
-            Upload an extension file to get started
-          </div>
-        </v-card-text>
+        <v-icon icon="mdi-puzzle-outline" size="48" class="mb-2 text-grey" />
+        <div class="font-weight-bold mb-1">
+          No extensions loaded yet
+        </div>
+        <div class="text-medium-emphasis text-caption">
+          Upload an extension file to get started
+        </div>
       </v-card>
     </v-card-text>
 
-    <!-- Confirmation Dialog -->
+    <!-- Dialog Remove -->
     <v-dialog v-model="showRemoveDialog" max-width="400">
-      <v-card rounded="lg" class="extension-confirmation-dialog">
-        <v-card-title class="extension-confirmation-header">
-          <v-icon icon="mdi-alert" color="warning" class="mr-2" />
+      <v-card rounded="xl">
+        <v-card-title class="d-flex align-center text-warning">
+          <v-icon icon="mdi-alert" class="mr-2" />
           Remove Extension?
         </v-card-title>
-        <v-card-text class="extension-confirmation-content">
+
+        <v-card-text>
           Are you sure you want to remove <strong>{{ getExtensionName(extensionToRemove) }}</strong>?
-          This action cannot be undone.
         </v-card-text>
-        <v-card-actions class="extension-confirmation-actions">
+
+        <v-card-actions>
           <v-spacer />
-          <v-btn
-            variant="text"
-            @click="showRemoveDialog = false"
-            class="extension-confirmation-cancel"
-          >
+          <v-btn variant="text" @click="showRemoveDialog = false">
             Cancel
           </v-btn>
-          <v-btn
-            color="error"
-            variant="flat"
-            @click="removeExtension"
-            class="extension-confirmation-remove"
-          >
+          <v-btn color="error" variant="flat" @click="removeExtension">
             Remove
           </v-btn>
         </v-card-actions>
@@ -237,6 +226,7 @@ import { ref, computed } from 'vue'
 const UIStore = useUIStore()
 const appStore = useAppStore()
 const files = ref([])
+const hiddenFileInput = ref(null)
 const loading = ref(false)
 const isDragging = ref(false)
 const errorMessage = ref('')
@@ -246,56 +236,33 @@ const extensionToRemove = ref(null)
 
 const loadedExtensions = computed(() => appStore.getLoadedExtensions())
 
-// Extract extension name from path or metadata
+const triggerFileDialog = () => hiddenFileInput.value?.click()
+
 const getExtensionName = (extension) => {
   if (!extension) return 'Unknown Extension'
-
-  // Try to get name from metadata first
-  if (extension.metadata?.name) {
-    return extension.metadata.name
-  }
-
-  // Extract filename from path
-  const path = extension.path || ''
-  const filename = path.split('/').pop() || path
-
-  // Remove .es.js extension and format nicely
-  return filename
-    .replace(/\.es\.js$/, '')
-    .split(/[-_]/)
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
+  if (extension.metadata?.name) return extension.metadata.name
+  const filename = (extension.path || '').split('/').pop()
+  return filename.replace(/\.es\.js$/, '').replace(/[-_]/g, ' ')
 }
 
-// Get extension description
-const getExtensionDescription = (extension) => {
-  if (extension?.metadata?.description) {
-    return extension.metadata.description
-  }
-  return 'Custom extension module'
-}
+const getExtensionDescription = (extension) =>
+  extension?.metadata?.description || 'Custom extension module'
 
-// Get extension version
-const getExtensionVersion = (extension) => {
-  return extension?.metadata?.version || null
-}
+const getExtensionVersion = (extension) =>
+  extension?.metadata?.version || null
 
 const handleDrop = async (event) => {
   isDragging.value = false
-  const droppedFiles = Array.from(event.dataTransfer.files).filter(
-    file => file.name.endsWith('.es.js')
-  )
-
-  if (droppedFiles.length === 0) {
+  const droppedFiles = [...event.dataTransfer.files].filter(f => f.name.endsWith('.es.js'))
+  if (!droppedFiles.length) {
     errorMessage.value = 'Please drop valid extension files (.es.js)'
     return
   }
-
   await processFiles(droppedFiles)
 }
 
 const handleFileChange = async (newFiles) => {
-  if (!newFiles || newFiles.length === 0) return
+  if (!newFiles?.length) return
   await processFiles(newFiles)
 }
 
@@ -305,47 +272,30 @@ const processFiles = async (filesToProcess) => {
   loading.value = true
 
   let successCount = 0
-  let failCount = 0
 
   try {
     for (const file of filesToProcess) {
       const fileURL = URL.createObjectURL(file)
-
       try {
         await appStore.loadExtension(fileURL)
         successCount++
-        console.log(`Extension loaded successfully: ${file.name}`)
       } catch (error) {
-        failCount++
-        console.error(`Failed to load extension ${file.name}:`, error)
         errorMessage.value = `Failed to load ${file.name}: ${error.message}`
       } finally {
         URL.revokeObjectURL(fileURL)
       }
     }
-
-    if (successCount > 0) {
-      successMessage.value = `Successfully loaded ${successCount} extension${successCount > 1 ? 's' : ''}!`
-      setTimeout(() => {
-        successMessage.value = ''
-      }, 5000)
-    }
+    if (successCount)
+      successMessage.value = `Successfully loaded ${successCount} extension${successCount>1?'s':''}!`
   } finally {
     loading.value = false
     files.value = []
+    setTimeout(() => (successMessage.value = ''), 4000)
   }
 }
 
 const formatDate = (dateString) => {
   const date = new Date(dateString)
-  const now = new Date()
-  const diffMs = now - date
-  const diffMins = Math.floor(diffMs / 60000)
-
-  if (diffMins < 1) return 'Just now'
-  if (diffMins < 60) return `${diffMins}m ago`
-  if (diffMins < 1440) return `${Math.floor(diffMins / 60)}h ago`
-
   return date.toLocaleDateString()
 }
 
@@ -364,182 +314,15 @@ const removeExtension = () => {
 </script>
 
 <style scoped>
-/* Main Card */
-.extension-manager-card {
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-}
-
-.extension-manager-card:hover {
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
-}
-
-/* Header Styles */
-.extension-manager-header {
-  padding: 24px 24px 0 24px !important;
-  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.1) 0%, rgba(var(--v-theme-primary), 0.05) 100%);
-  border-radius: 12px 12px 0 0 !important;
-  color: rgba(var(--v-theme-primary), 1);
-}
-
-.extension-manager-icon {
-  margin-right: 12px;
-  font-size: 28px;
-}
-
-.extension-manager-subtitle {
-  padding: 0 24px 16px 24px !important;
-  color: rgba(var(--v-theme-on-surface), 0.6);
-}
-
-/* Upload Card Styles */
-.extension-upload-card {
-  transition: all 0.3s ease;
-  border: 2px dashed rgba(0, 0, 0, 0.12);
-  background: rgba(0, 0, 0, 0.02);
-  cursor: pointer;
-  margin-bottom: 24px;
-}
-
-.extension-upload-hover {
-  border-color: rgb(var(--v-theme-primary));
-  background: rgba(var(--v-theme-primary), 0.05);
-  transform: scale(1.02);
-}
-
-.extension-upload-loading {
-  pointer-events: none;
-  opacity: 0.7;
-}
-
-.extension-upload-content {
-  text-align: center;
-  padding: 32px !important;
-}
-
-.extension-upload-text {
-  font-size: 1.1rem;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.extension-upload-hint {
-  color: rgba(var(--v-theme-on-surface), 0.6);
-  font-size: 0.85rem;
-  margin-bottom: 16px;
-}
-
-.extension-upload-button {
-  margin-top: 8px;
-}
-
-/* Alert Styles */
-.extension-alert {
-  border-radius: 8px;
-}
-
-/* Extension List Styles */
-.extension-header {
-  display: flex;
-  align-items: center;
-  font-size: 1.1rem;
-  font-weight: 500;
-  margin-bottom: 16px;
-  color: rgba(var(--v-theme-on-surface), 0.9);
-}
-
-/* Extension Item Styles */
-.extension-item-card {
+.custom-tool-card {
   transition: all 0.2s ease-in-out;
-  border-left: 4px solid transparent;
-  margin-bottom: 12px;
-}
-
-.extension-item-hover {
-  transform: translateX(4px);
-  border-left-color: rgb(var(--v-theme-primary));
-}
-
-.extension-item-content {
-  display: flex;
-  align-items: flex-start;
-}
-
-.extension-item-details {
-  flex-grow: 1;
-}
-
-.extension-item-title {
-  font-size: 1rem;
-  font-weight: 500;
-  margin-bottom: 4px;
-  color: rgba(var(--v-theme-on-surface), 0.9);
-}
-
-.extension-item-description {
-  font-size: 0.85rem;
-  color: rgba(var(--v-theme-on-surface), 0.6);
-  margin-bottom: 8px;
-}
-
-.extension-item-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.extension-item-date {
-  font-size: 0.75rem;
-  color: rgba(var(--v-theme-on-surface), 0.5);
 }
-
-.extension-item-remove {
-  margin-left: 8px;
-}
-
-/* Empty State Styles */
-.empty-state-card {
-  border-style: dashed;
-  border-color: rgba(var(--v-theme-on-surface), 0.12);
-}
-
-.empty-state-title {
-  font-size: 1rem;
-  color: rgba(var(--v-theme-on-surface), 0.8);
-  margin-bottom: 4px;
-}
-
-.empty-state-description {
-  font-size: 0.85rem;
-  color: rgba(var(--v-theme-on-surface), 0.6);
+.custom-tool-card:hover {
+  transform: scale(1.03);
 }
 
-/* Confirmation Dialog Styles */
-.extension-confirmation-dialog {
-  border-radius: 12px;
-}
-
-.extension-confirmation-header {
-  padding: 20px !important;
-  background: rgba(var(--v-theme-error), 0.1);
-  color: rgba(var(--v-theme-on-error), 0.9);
-}
-
-.extension-confirmation-content {
-  padding: 16px 24px !important;
-}
-
-.extension-confirmation-actions {
-  padding: 16px 24px !important;
-}
-
-.extension-confirmation-cancel {
-  min-width: 80px;
-}
-
-.extension-confirmation-remove {
-  min-width: 80px;
+.cursor-pointer {
+  cursor: pointer;
 }
 
 .file-input-hidden :deep(.v-input__control) {
@@ -551,11 +334,7 @@ const removeExtension = () => {
 }
 
 @keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 </style>

From d11dd2bdd01d482f2152d9aab5f95a39cda885a7 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 26 Nov 2025 10:32:17 +0100
Subject: [PATCH 05/23] ui & extensionapi changes

---
 app/stores/UI.js          | 23 +++++++++++++++++++++--
 app/utils/extensionAPI.js | 21 +++++++++++++++++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/app/stores/UI.js b/app/stores/UI.js
index 7121bb00..a781a7ae 100644
--- a/app/stores/UI.js
+++ b/app/stores/UI.js
@@ -25,12 +25,12 @@ export const useUIStore = defineStore("UI", () => {
     toolsDefinitions.value = defaultTools
   }
 
-  const registerToolComponent = (toolDefinition) => {
+  const registerToolComponent = (toolDefinition, extensionPath = null) => {
     const { id, component, ...rest } = toolDefinition
     const existingIndex = toolsDefinitions.value.findIndex(
       (tool) => tool.id === id,
     )
-    const newDefinition = { id, component, ...rest }
+    const newDefinition = { id, component, extensionPath, ...rest }
     if (existingIndex !== -1) {
       toolsDefinitions.value[existingIndex] = {
         ...toolsDefinitions.value[existingIndex],
@@ -41,6 +41,23 @@ export const useUIStore = defineStore("UI", () => {
     }
   }
 
+  const unregisterTool = (toolId) => {
+    const index = toolsDefinitions.value.findIndex((tool) => tool.id === toolId)
+    if (index !== -1) {
+      toolsDefinitions.value.splice(index, 1)
+      console.log(`[UIStore] Tool unregistered: ${toolId}`)
+    }
+  }
+
+  const unregisterToolsByExtension = (extensionPath) => {
+    const beforeCount = toolsDefinitions.value.length
+    toolsDefinitions.value = toolsDefinitions.value.filter(
+      (tool) => tool.extensionPath !== extensionPath
+    )
+    const removedCount = beforeCount - toolsDefinitions.value.length
+    console.log(`[UIStore] Removed ${removedCount} tools from extension: ${extensionPath}`)
+  }
+
   const activeTools = computed(() => toolsDefinitions.value)
 
   function setShowDropZone(value) {
@@ -90,6 +107,8 @@ export const useUIStore = defineStore("UI", () => {
     activeTools,
     initializeDefaultTools,
     registerToolComponent,
+    unregisterTool,
+    unregisterToolsByExtension,
     showDropZone,
     showStepper,
     droppedFiles,
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index e240fd64..adeb6da1 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -50,8 +50,9 @@ export class VeaseExtensionAPI {
    * @param {string} toolDefinition.iconType - Icon type ('mdi' or 'svg')
    * @param {string} toolDefinition.iconSource - Icon source (mdi icon name or svg path)
    * @param {Component} toolDefinition.component - Vue component (must be markRaw)
+   * @param {string} extensionPath - Optional path of the extension registering this tool
    */
-  registerTool(toolDefinition) {
+  registerTool(toolDefinition, extensionPath = null) {
     if (!toolDefinition.id) {
       throw new Error('Tool definition must have an id')
     }
@@ -59,7 +60,23 @@ export class VeaseExtensionAPI {
       throw new Error('Tool definition must have a component')
     }
 
-    this.UIStore.registerToolComponent(toolDefinition)
+    this.UIStore.registerToolComponent(toolDefinition, extensionPath)
+  }
+
+  /**
+   * Unregister a specific tool by ID
+   * @param {string} toolId - ID of the tool to unregister
+   */
+  unregisterTool(toolId) {
+    this.UIStore.unregisterTool(toolId)
+  }
+
+  /**
+   * Unregister all tools registered by a specific extension
+   * @param {string} extensionPath - Path of the extension whose tools should be removed
+   */
+  unregisterToolsByExtension(extensionPath) {
+    this.UIStore.unregisterToolsByExtension(extensionPath)
   }
 
   /**

From 8924850a87025db4d69cc79af9f1faccfc2e1d7a Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 26 Nov 2025 10:57:54 +0100
Subject: [PATCH 06/23] extensoin component edited

---
 app/components/Extension.vue | 844 ++++++++++++++++++++++++++++-------
 1 file changed, 683 insertions(+), 161 deletions(-)

diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index 545284fa..7a86a236 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -1,217 +1,310 @@
 <template>
-  <v-card flat rounded="xl" elevation="2" class="pa-6">
+  <v-card flat rounded="xl" elevation="0" class="extension-container">
     <v-card-title
-      class="text-h4 text-primary pa-0 font-weight-bold d-flex align-center"
+      class="text-h4 text-primary pa-6 font-weight-bold d-flex align-center"
     >
-      <v-icon icon="mdi-puzzle" class="mr-3"></v-icon>
+      <v-icon icon="mdi-puzzle" class="mr-3 title-icon"></v-icon>
       Extensions
     </v-card-title>
 
-    <v-card-subtitle class="ma-0 text-medium">
+    <v-card-subtitle class="px-6 pb-4 text-medium-emphasis">
       Enhance your application with additional features and tools.
     </v-card-subtitle>
 
-    <v-card-text class="pt-6">
+    <v-card-text class="px-6 pb-6">
       <!-- Drag & Drop Zone -->
       <v-hover v-slot="{ isHovering, props }">
         <v-card
           v-bind="props"
-          class="text-center cursor-pointer d-flex flex-column align-center justify-center custom-tool-card"
+          class="text-center cursor-pointer drop-zone-card"
           :class="{
-            'bg-blue-lighten-5': isHovering || isDragging,
-            'elevation-6': isHovering || isDragging,
-            'opacity-50 pointer-events-none': loading
+            'drop-zone-hover': isHovering || isDragging,
+            'drop-zone-loading': loading
           }"
           rounded="xl"
-          :elevation="isHovering || isDragging ? 6 : 2"
+          :elevation="isHovering || isDragging ? 8 : 2"
           @click="triggerFileDialog"
           @dragover.prevent="isDragging = true"
           @dragleave.prevent="isDragging = false"
           @drop.prevent="handleDrop"
         >
-          <v-sheet
-            class="d-flex align-center justify-center pa-4 rounded-circle mb-4 mx-auto"
-            :class="isHovering || isDragging ? 'bg-primary' : 'bg-grey-lighten-3'"
-            :width="90"
-            :height="90"
-          >
-            <v-icon
-              :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
-              size="48"
-              :class="{ rotating: loading, 'text-white': isHovering || isDragging }"
-              :color="isHovering || isDragging ? 'white' : 'grey-darken-2'"
-            />
-          </v-sheet>
-
-          <v-card-title
-            class="text-h5 font-weight-bold mb-1 text-wrap"
-            :class="isHovering || isDragging ? 'text-primary' : 'text-medium-emphasis'"
-          >
-            {{ loading ? 'Loading Extension...' : isDragging ? 'Drop to Install' : 'Click or Drag & Drop Extension' }}
-          </v-card-title>
-
-          <v-card-subtitle class="text-caption text-grey-darken-4">
-            (.es.js files only)
-          </v-card-subtitle>
-
-          <v-file-input
+          <v-card-text class="pa-8">
+            <div class="drop-zone-content">
+              <v-sheet
+                class="icon-wrapper mx-auto mb-6"
+                :class="{ 'icon-loading': loading, 'icon-active': isHovering || isDragging }"
+                rounded="circle"
+              >
+                <v-icon
+                  :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
+                  size="56"
+                  :class="{ 'rotating': loading }"
+                />
+              </v-sheet>
+
+              <div class="drop-zone-title mb-2">
+                {{ loading ? 'Loading Extension...' : isDragging ? 'Drop to Install' : 'Click or Drag & Drop Extension' }}
+              </div>
+
+              <div class="drop-zone-subtitle">
+                (.es.js files only)
+              </div>
+            </div>
+          </v-card-text>
+
+          <input
             ref="hiddenFileInput"
-            v-model="files"
+            type="file"
             accept=".es.js"
             multiple
-            hide-details
             class="file-input-hidden"
-            @update:model-value="handleFileChange"
+            @change="handleFileChange"
           />
         </v-card>
       </v-hover>
 
-      <!-- Success -->
-      <v-expand-transition>
+      <!-- Messages -->
+      <v-slide-y-transition>
         <v-alert
           v-if="successMessage"
           type="success"
           rounded="xl"
-          class="mt-4"
+          class="mt-4 alert-animated"
           closable
           @click:close="successMessage = ''"
         >
-          <v-icon start>mdi-check-circle</v-icon>
+          <template #prepend>
+            <v-icon class="success-icon">mdi-check-circle</v-icon>
+          </template>
           {{ successMessage }}
         </v-alert>
-      </v-expand-transition>
+      </v-slide-y-transition>
 
-      <!-- Error -->
-      <v-expand-transition>
+      <v-slide-y-transition>
         <v-alert
           v-if="errorMessage"
           type="error"
           rounded="xl"
-          class="mt-4"
+          class="mt-4 alert-animated"
           closable
           @click:close="errorMessage = ''"
         >
-          <v-icon start>mdi-alert-circle</v-icon>
+          <template #prepend>
+            <v-icon class="error-icon">mdi-alert-circle</v-icon>
+          </template>
           {{ errorMessage }}
         </v-alert>
-      </v-expand-transition>
+      </v-slide-y-transition>
 
       <!-- Loaded Extensions -->
-      <div v-if="loadedExtensions.length" class="mt-6">
-        <div class="d-flex align-center font-weight-bold mb-3 text-primary">
-          <v-icon icon="mdi-puzzle-check" class="mr-2" />
-          Active Extensions
-          <v-chip size="small" class="ml-2" color="primary" variant="tonal">
-            {{ loadedExtensions.length }}
-          </v-chip>
+      <v-fade-transition>
+        <div v-if="loadedExtensions.length" class="mt-8">
+          <div class="section-header mb-4">
+            <v-icon icon="mdi-puzzle-check" class="mr-2" />
+            Active Extensions
+            <v-chip size="small" class="ml-3 count-chip" color="primary" variant="flat">
+              {{ loadedExtensions.length }}
+            </v-chip>
+          </div>
+
+          <v-row>
+            <v-col
+              v-for="(extension, index) in loadedExtensions"
+              :key="index"
+              cols="12"
+            >
+              <v-scale-transition :delay="index * 50">
+                <v-expansion-panels variant="accordion" class="extension-panels">
+                  <v-expansion-panel rounded="xl" class="extension-panel">
+                    <v-expansion-panel-title class="extension-panel-title">
+                      <template v-slot:default="{ expanded }">
+                        <v-hover v-slot="{ isHovering, props: hoverProps }">
+                          <div v-bind="hoverProps" class="extension-header" :class="{ 'extension-header-expanded': expanded }">
+                            <v-sheet
+                              class="extension-icon"
+                              :class="{ 'extension-icon-active': isHovering || expanded }"
+                              rounded="circle"
+                            >
+                              <v-icon icon="mdi-puzzle" size="32" />
+                            </v-sheet>
+
+                            <div class="extension-info">
+                              <div class="extension-name">
+                                {{ getExtensionName(extension) }}
+                              </div>
+
+                              <div class="extension-description">
+                                {{ getExtensionDescription(extension) }}
+                              </div>
+
+                              <div class="extension-badges">
+                                <v-chip
+                                  size="x-small"
+                                  color="success"
+                                  variant="flat"
+                                  class="status-chip"
+                                >
+                                  <v-icon start size="12">mdi-check-circle</v-icon>
+                                  Active
+                                </v-chip>
+
+                                <v-chip
+                                  v-if="getExtensionVersion(extension)"
+                                  size="x-small"
+                                  class="ml-2"
+                                  variant="tonal"
+                                  color="primary"
+                                >
+                                  v{{ getExtensionVersion(extension) }}
+                                </v-chip>
+
+                                <v-chip
+                                  size="x-small"
+                                  class="ml-2 tools-chip"
+                                  color="primary"
+                                  variant="flat"
+                                >
+                                  <v-icon start size="12">mdi-tools</v-icon>
+                                  {{ getExtensionToolsCount(extension) }}
+                                </v-chip>
+
+                                <v-spacer />
+
+                                <span class="extension-date">
+                                  {{ formatDate(extension.loadedAt) }}
+                                </span>
+                              </div>
+                            </div>
+
+                            <v-btn
+                              icon="mdi-close"
+                              size="small"
+                              variant="text"
+                              color="error"
+                              class="remove-btn"
+                              @click.stop="confirmRemove(extension)"
+                            />
+                          </div>
+                        </v-hover>
+                      </template>
+                    </v-expansion-panel-title>
+
+                    <v-expansion-panel-text class="extension-panel-content">
+                      <v-divider class="mb-6 divider-gradient" />
+                      
+                      <div class="tools-section-header">
+                        <v-icon icon="mdi-tools" size="20" class="mr-2" />
+                        Tools Added by This Extension
+                      </div>
+
+                      <div v-if="getExtensionTools(extension).length" class="tools-list">
+                        <v-fade-transition group>
+                          <div
+                            v-for="(tool, toolIndex) in getExtensionTools(extension)"
+                            :key="tool.id"
+                            class="tool-item"
+                            :style="{ transitionDelay: `${toolIndex * 30}ms` }"
+                          >
+                            <v-sheet
+                              class="tool-icon-wrapper"
+                              rounded="circle"
+                            >
+                              <v-icon
+                                v-if="tool.iconType === 'mdi'"
+                                :icon="tool.iconSource"
+                                size="20"
+                              />
+                              <v-img
+                                v-else-if="tool.iconType === 'svg'"
+                                :src="tool.iconSource"
+                                width="20"
+                                height="20"
+                                contain
+                              />
+                            </v-sheet>
+
+                            <div class="tool-content">
+                              <div class="tool-title">
+                                {{ tool.title }}
+                              </div>
+
+                              <div class="tool-description">
+                                {{ tool.description }}
+                              </div>
+                            </div>
+                          </div>
+                        </v-fade-transition>
+                      </div>
+
+                      <v-alert
+                        v-else
+                        type="info"
+                        variant="tonal"
+                        rounded="lg"
+                        class="empty-tools-alert"
+                      >
+                        <template #prepend>
+                          <v-icon>mdi-information</v-icon>
+                        </template>
+                        No tools registered by this extension
+                      </v-alert>
+                    </v-expansion-panel-text>
+                  </v-expansion-panel>
+                </v-expansion-panels>
+              </v-scale-transition>
+            </v-col>
+          </v-row>
         </div>
+      </v-fade-transition>
 
-        <v-row>
-          <v-col
-            v-for="(extension, index) in loadedExtensions"
-            :key="index"
-            cols="12"
-          >
-            <v-hover v-slot="{ isHovering, props }">
-              <v-card
-                v-bind="props"
-                :elevation="isHovering ? 4 : 1"
-                rounded="xl"
-                class="pa-4 d-flex align-center custom-tool-card"
-              >
-                <v-sheet
-                  class="d-flex align-center justify-center pa-2 rounded-circle mr-3"
-                  :width="56"
-                  :height="56"
-                  :class="isHovering ? 'bg-primary' : 'bg-grey-lighten-3'"
-                >
-                  <v-icon icon="mdi-puzzle" size="32" :color="isHovering ? 'white' : 'grey-darken-2'" />
-                </v-sheet>
-
-                <div class="flex-grow-1">
-                  <div class="font-weight-bold">
-                    {{ getExtensionName(extension) }}
-                  </div>
-
-                  <div class="text-medium-emphasis text-caption mb-2">
-                    {{ getExtensionDescription(extension) }}
-                  </div>
-
-                  <div class="d-flex align-center">
-                    <v-chip
-                      size="x-small"
-                      color="success"
-                      variant="tonal"
-                      prepend-icon="mdi-check-circle"
-                    >
-                      Active
-                    </v-chip>
-
-                    <v-chip
-                      v-if="getExtensionVersion(extension)"
-                      size="x-small"
-                      class="ml-2"
-                      variant="tonal"
-                    >
-                      v{{ getExtensionVersion(extension) }}
-                    </v-chip>
-
-                    <v-spacer />
-
-                    <span class="text-disabled text-caption">
-                      {{ formatDate(extension.loadedAt) }}
-                    </span>
-                  </div>
-                </div>
-
-                <v-btn
-                  icon="mdi-close"
-                  size="small"
-                  variant="text"
-                  color="error"
-                  @click="confirmRemove(extension)"
-                />
-              </v-card>
-            </v-hover>
-          </v-col>
-        </v-row>
-      </div>
-
-      <!-- Empty -->
-      <v-card
-        v-else
-        rounded="xl"
-        variant="outlined"
-        class="mt-6 text-center pa-6"
-      >
-        <v-icon icon="mdi-puzzle-outline" size="48" class="mb-2 text-grey" />
-        <div class="font-weight-bold mb-1">
-          No extensions loaded yet
-        </div>
-        <div class="text-medium-emphasis text-caption">
-          Upload an extension file to get started
-        </div>
-      </v-card>
+      <!-- Empty State -->
+      <v-fade-transition>
+        <v-card
+          v-if="!loadedExtensions.length"
+          rounded="xl"
+          variant="outlined"
+          class="mt-8 empty-state"
+        >
+          <v-card-text class="text-center pa-8">
+            <v-sheet
+              class="empty-icon-wrapper mx-auto mb-4"
+              rounded="circle"
+            >
+              <v-icon icon="mdi-puzzle-outline" size="64" />
+            </v-sheet>
+            <div class="empty-title mb-2">
+              No extensions loaded yet
+            </div>
+            <div class="empty-subtitle">
+              Upload an extension file to get started
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-fade-transition>
     </v-card-text>
 
     <!-- Dialog Remove -->
-    <v-dialog v-model="showRemoveDialog" max-width="400">
-      <v-card rounded="xl">
-        <v-card-title class="d-flex align-center text-warning">
-          <v-icon icon="mdi-alert" class="mr-2" />
+    <v-dialog v-model="showRemoveDialog" max-width="450">
+      <v-card rounded="xl" class="remove-dialog">
+        <v-card-title class="dialog-title">
+          <v-icon icon="mdi-alert" class="mr-3 warning-icon" />
           Remove Extension?
         </v-card-title>
 
-        <v-card-text>
+        <v-card-text class="dialog-text">
           Are you sure you want to remove <strong>{{ getExtensionName(extensionToRemove) }}</strong>?
+          <div class="mt-2 text-caption text-medium-emphasis">
+            This will remove all tools registered by this extension.
+          </div>
         </v-card-text>
 
-        <v-card-actions>
+        <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="showRemoveDialog = false">
+          <v-btn variant="text" @click="showRemoveDialog = false" class="cancel-btn">
             Cancel
           </v-btn>
-          <v-btn color="error" variant="flat" @click="removeExtension">
+          <v-btn color="error" variant="flat" @click="removeExtension" class="remove-confirm-btn">
+            <v-icon start>mdi-delete</v-icon>
             Remove
           </v-btn>
         </v-card-actions>
@@ -261,9 +354,12 @@ const handleDrop = async (event) => {
   await processFiles(droppedFiles)
 }
 
-const handleFileChange = async (newFiles) => {
+const handleFileChange = async (event) => {
+  const newFiles = event.target?.files
   if (!newFiles?.length) return
-  await processFiles(newFiles)
+  await processFiles([...newFiles])
+  // Reset input so the same file can be selected again
+  event.target.value = ''
 }
 
 const processFiles = async (filesToProcess) => {
@@ -296,7 +392,31 @@ const processFiles = async (filesToProcess) => {
 
 const formatDate = (dateString) => {
   const date = new Date(dateString)
-  return date.toLocaleDateString()
+  const now = new Date()
+  const diffMs = now - date
+  const diffSecs = Math.floor(diffMs / 1000)
+  const diffMins = Math.floor(diffSecs / 60)
+  const diffHours = Math.floor(diffMins / 60)
+  const diffDays = Math.floor(diffHours / 24)
+  const diffWeeks = Math.floor(diffDays / 7)
+  const diffMonths = Math.floor(diffDays / 30)
+
+  if (diffSecs < 60) {
+    return 'just now'
+  } else if (diffMins < 60) {
+    return `${diffMins} ${diffMins === 1 ? 'minute' : 'minutes'} ago`
+  } else if (diffHours < 24) {
+    return `${diffHours} ${diffHours === 1 ? 'hour' : 'hours'} ago`
+  } else if (diffDays < 7) {
+    return `${diffDays} ${diffDays === 1 ? 'day' : 'days'} ago`
+  } else if (diffWeeks < 4) {
+    return `${diffWeeks} ${diffWeeks === 1 ? 'week' : 'weeks'} ago`
+  } else if (diffMonths < 12) {
+    return `${diffMonths} ${diffMonths === 1 ? 'month' : 'months'} ago`
+  } else {
+    // For dates older than a year, show the actual date
+    return date.toLocaleDateString()
+  }
 }
 
 const confirmRemove = (extension) => {
@@ -311,24 +431,87 @@ const removeExtension = () => {
     extensionToRemove.value = null
   }
 }
+
+const getExtensionTools = (extension) => {
+  if (!extension) return []
+  return UIStore.activeTools.filter(tool => tool.extensionPath === extension.path)
+}
+
+const getExtensionToolsCount = (extension) => {
+  return getExtensionTools(extension).length
+}
 </script>
 
 <style scoped>
-.custom-tool-card {
-  transition: all 0.2s ease-in-out;
+/* Container */
+.extension-container {
+  background: #ffffff;
 }
-.custom-tool-card:hover {
-  transform: scale(1.03);
+
+/* Drop Zone */
+.drop-zone-card {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  background: #fafafa;
+  border: 2px dashed #e0e0e0;
 }
 
-.cursor-pointer {
-  cursor: pointer;
+.drop-zone-hover {
+  transform: translateY(-2px);
+  border-color: rgb(var(--v-theme-primary));
+  background: #f5f9ff;
+  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);
+}
+
+.drop-zone-loading {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+/* Icon Wrapper */
+.icon-wrapper {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #eeeeee;
+  transition: all 0.3s ease;
+}
+
+.icon-active {
+  background: rgb(var(--v-theme-primary));
+  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
 }
 
-.file-input-hidden :deep(.v-input__control) {
-  display: none;
+.icon-wrapper .v-icon {
+  color: #757575;
+  transition: color 0.3s ease;
 }
 
+.icon-active .v-icon {
+  color: white;
+}
+
+/* Drop Zone Text */
+.drop-zone-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #424242;
+  transition: color 0.3s ease;
+}
+
+.drop-zone-hover .drop-zone-title {
+  color: rgb(var(--v-theme-primary));
+}
+
+.drop-zone-subtitle {
+  font-size: 0.875rem;
+  color: #757575;
+}
+
+/* Rotating Animation */
 .rotating {
   animation: rotate 1s linear infinite;
 }
@@ -337,4 +520,343 @@ const removeExtension = () => {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+/* Alerts */
+.alert-animated {
+  animation: slide-in 0.3s ease;
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Section Header */
+.section-header {
+  font-size: 1rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-primary));
+  display: flex;
+  align-items: center;
+}
+
+.count-chip {
+  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.15);
+}
+
+/* Extension Panels */
+.extension-panels {
+  background: transparent !important;
+}
+
+.extension-panel {
+  transition: box-shadow 0.3s ease;
+  overflow: hidden;
+  background: white;
+  border: 1px solid #e0e0e0;
+}
+
+.extension-panel:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.extension-panel-title {
+  padding: 20px;
+}
+
+/* Extension Header */
+.extension-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 16px;
+}
+
+.extension-header-expanded {
+  background: #f5f9ff;
+  border-radius: 8px;
+  padding: 8px;
+  margin: -8px;
+}
+
+/* Extension Icon */
+.extension-icon {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.extension-icon-active {
+  background: rgb(var(--v-theme-primary));
+  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
+}
+
+.extension-icon .v-icon {
+  color: #757575;
+  transition: color 0.3s ease;
+}
+
+.extension-icon-active .v-icon {
+  color: white;
+}
+
+/* Extension Info */
+.extension-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.extension-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #212121;
+  margin-bottom: 4px;
+}
+
+.extension-description {
+  font-size: 0.875rem;
+  color: #757575;
+  margin-bottom: 8px;
+  line-height: 1.5;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.extension-badges {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.status-chip {
+  box-shadow: 0 1px 3px rgba(76, 175, 80, 0.15);
+}
+
+.tools-chip {
+  box-shadow: 0 1px 3px rgba(33, 150, 243, 0.15);
+}
+
+.extension-date {
+  font-size: 0.75rem;
+  color: #9e9e9e;
+  white-space: nowrap;
+}
+
+/* Remove Button */
+.remove-btn {
+  transition: all 0.2s ease;
+  opacity: 0.7;
+}
+
+.remove-btn:hover {
+  opacity: 1;
+  background-color: rgba(244, 67, 54, 0.08);
+}
+
+/* Extension Panel Content */
+.extension-panel-content {
+  padding: 0 24px 24px 24px;
+}
+
+.divider-gradient {
+  background: #e0e0e0;
+  height: 1px;
+  border: none;
+}
+
+/* Tools Section */
+.tools-section-header {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #424242;
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.tools-list {
+  background: transparent;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tool-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  transition: all 0.2s ease;
+  background: #fafafa;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+
+.tool-item:hover {
+  background: #f5f9ff;
+  border-color: rgba(33, 150, 243, 0.3);
+  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.08);
+}
+
+.tool-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #e3f2fd;
+  transition: background 0.2s ease;
+  flex-shrink: 0;
+}
+
+.tool-item:hover .tool-icon-wrapper {
+  background: rgb(var(--v-theme-primary));
+}
+
+.tool-icon-wrapper .v-icon {
+  color: rgb(var(--v-theme-primary));
+  transition: color 0.2s ease;
+}
+
+.tool-item:hover .tool-icon-wrapper .v-icon {
+  color: white;
+}
+
+.tool-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.tool-title {
+  font-weight: 600;
+  color: #212121;
+  font-size: 0.9375rem;
+  line-height: 1.4;
+  margin-bottom: 4px;
+}
+
+.tool-description {
+  font-size: 0.8125rem;
+  color: #757575;
+  line-height: 1.5;
+}
+
+.empty-tools-alert {
+  margin-top: 8px;
+}
+
+/* Empty State */
+.empty-state {
+  border: 2px dashed #e0e0e0;
+  background: #fafafa;
+}
+
+.empty-icon-wrapper {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  margin: 0 auto;
+}
+
+.empty-icon-wrapper .v-icon {
+  color: #bdbdbd;
+}
+
+.empty-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #424242;
+}
+
+.empty-subtitle {
+  font-size: 0.875rem;
+  color: #757575;
+}
+
+/* Remove Dialog */
+.remove-dialog {
+  overflow: hidden;
+}
+
+.dialog-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #f57c00;
+  padding: 24px 24px 16px 24px;
+  display: flex;
+  align-items: center;
+}
+
+.dialog-text {
+  padding: 0 24px 24px 24px;
+  font-size: 0.9375rem;
+  color: #424242;
+  line-height: 1.6;
+}
+
+.cancel-btn {
+  transition: background-color 0.2s ease;
+}
+
+.cancel-btn:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.remove-confirm-btn {
+  transition: all 0.2s ease;
+}
+
+.remove-confirm-btn:hover {
+  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
+}
+
+/* Utility */
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.file-input-hidden {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  .extension-icon {
+    width: 48px;
+    height: 48px;
+  }
+  
+  .extension-icon .v-icon {
+    font-size: 24px;
+  }
+  
+  .extension-name {
+    font-size: 0.9375rem;
+  }
+  
+  .icon-wrapper {
+    width: 80px;
+    height: 80px;
+  }
+}
 </style>

From d0115e8a9cdd673337f89707c3ca901a3c4dbe43 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 26 Nov 2025 13:34:12 +0100
Subject: [PATCH 07/23] edit extension component & other

---
 app/components/Extension.vue    |  8 ++++++++
 app/plugins/extension.client.js |  5 ++++-
 app/utils/extensionAPI.js       | 19 +++++++++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index 7a86a236..a291e9a6 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -735,6 +735,14 @@ const getExtensionToolsCount = (extension) => {
   color: white;
 }
 
+.tool-icon-wrapper .v-img {
+  transition: filter 0.2s ease;
+}
+
+.tool-item:hover .tool-icon-wrapper .v-img {
+  filter: brightness(0) invert(1);
+}
+
 .tool-content {
   flex: 1;
   min-width: 0;
diff --git a/app/plugins/extension.client.js b/app/plugins/extension.client.js
index 445b0dd8..e111cd8d 100644
--- a/app/plugins/extension.client.js
+++ b/app/plugins/extension.client.js
@@ -4,12 +4,15 @@ import { VeaseExtensionAPI } from '../utils/extensionAPI.js'
  * Extension API Plugin
  * Initializes the VeaseExtensionAPI and registers it with the app store
  */
-export default defineNuxtPlugin(() => {
+export default defineNuxtPlugin((nuxtApp) => {
   const appStore = useAppStore()
   const extensionAPI = new VeaseExtensionAPI()
   
   // Register the extension API with the app store
   appStore.setExtensionAPI(extensionAPI)
   
+  // Provide the API to the Vue app so components can inject it
+  nuxtApp.vueApp.provide('extensionAPI', extensionAPI)
+  
   console.log('[Vease] Extension API initialized')
 })
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index adeb6da1..cdfcd080 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -9,6 +9,7 @@ export class VeaseExtensionAPI {
     this._uiStore = null
     this._hybridViewerStore = null
     this._appStore = null
+    this._dataBaseStore = null
   }
 
   /**
@@ -41,6 +42,16 @@ export class VeaseExtensionAPI {
     return this._appStore
   }
 
+  /**
+   * Get the DataBase Store
+   */
+  get DataBaseStore() {
+    if (!this._dataBaseStore) {
+      this._dataBaseStore = useDataBaseStore()
+    }
+    return this._dataBaseStore
+  }
+
   /**
    * Register a tool component
    * @param {Object} toolDefinition - Tool definition object
@@ -91,6 +102,14 @@ export class VeaseExtensionAPI {
       watch,
       onMounted,
       onUnmounted,
+      inject,
     }
   }
+
+  /**
+   * Access to api_fetch utility
+   */
+  get api_fetch() {
+    return api_fetch
+  }
 }

From a7db068affca94bf4c957861fe183d41199388e5 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 26 Nov 2025 16:01:11 +0100
Subject: [PATCH 08/23] aoi qui fonctionne

---
 app/plugins/extension.client.js |  4 ++++
 app/utils/extensionAPI.js       | 12 ++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/app/plugins/extension.client.js b/app/plugins/extension.client.js
index e111cd8d..30d757bb 100644
--- a/app/plugins/extension.client.js
+++ b/app/plugins/extension.client.js
@@ -1,10 +1,14 @@
 import { VeaseExtensionAPI } from '../utils/extensionAPI.js'
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 
 /**
  * Extension API Plugin
  * Initializes the VeaseExtensionAPI and registers it with the app store
  */
 export default defineNuxtPlugin((nuxtApp) => {
+  // Expose schemas globally for extensions
+  window.__GEODE_BACK_SCHEMAS__ = back_schemas
+
   const appStore = useAppStore()
   const extensionAPI = new VeaseExtensionAPI()
   
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index cdfcd080..76046d36 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -10,6 +10,7 @@ export class VeaseExtensionAPI {
     this._hybridViewerStore = null
     this._appStore = null
     this._dataBaseStore = null
+    this._importItem = null
   }
 
   /**
@@ -112,4 +113,15 @@ export class VeaseExtensionAPI {
   get api_fetch() {
     return api_fetch
   }
+
+  /**
+   * Access to importItem utility (lazy loaded)
+   */
+  async importItem(data) {
+    if (!this._importItem) {
+      const module = await import('@ogw_front/utils/file_import_workflow.js')
+      this._importItem = module.importItem
+    }
+    return this._importItem(data)
+  }
 }

From e84e7f6bffcd2a8753a830198a55f781c82efbc1 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 27 Nov 2025 10:08:45 +0100
Subject: [PATCH 09/23] Delete components now imported by extension

---
 app/components/CreateTools.vue     |  64 ++++--
 app/components/Extension.vue       |  10 +-
 app/components/tools/CreateAOI.vue | 354 -----------------------------
 app/components/tools/CreateVOI.vue | 335 ---------------------------
 app/plugins/tools.client.js        |  44 ++--
 5 files changed, 70 insertions(+), 737 deletions(-)
 delete mode 100644 app/components/tools/CreateAOI.vue
 delete mode 100644 app/components/tools/CreateVOI.vue

diff --git a/app/components/CreateTools.vue b/app/components/CreateTools.vue
index 45850255..8453ff47 100644
--- a/app/components/CreateTools.vue
+++ b/app/components/CreateTools.vue
@@ -1,15 +1,24 @@
 <template>
-  <v-card v-if="!selectedTool" :width="500" flat>
-    <v-card-title
-      class="text-h4 text-primary pa-4 font-weight-bold d-flex align-center"
-    >
-      <v-icon icon="mdi-creation" class="mr-3"></v-icon>
-      Create New Object
-    </v-card-title>
-    <v-card-subtitle class="ma-0 text-medium">
-      Choose a drawing tool to get started.
-    </v-card-subtitle>
-    <v-card-text class="pt-6">
+  <v-card 
+    v-if="!selectedTool" 
+    :width="500" 
+    flat 
+    class="d-flex flex-column" 
+    style="height: 100%;"
+  >
+    <div class="flex-shrink-0">
+      <v-card-title
+        class="text-h4 text-primary pa-4 font-weight-bold d-flex align-center"
+      >
+        <v-icon icon="mdi-creation" class="mr-3"></v-icon>
+        Create New Object
+      </v-card-title>
+      <v-card-subtitle class="ma-0 text-medium pb-4">
+        Choose a drawing tool to get started.
+      </v-card-subtitle>
+    </div>
+
+    <v-card-text class="pt-4 pb-8 flex-1-1 overflow-y-auto">
       <v-row>
         <v-col
           v-for="tool in UIStore.activeTools"
@@ -71,11 +80,13 @@
       </v-row>
     </v-card-text>
   </v-card>
-  <v-sheet v-else class="tool-component-wrapper v-sheet-tool-wrapper">
+  
+  <v-sheet v-else class="position-relative tool-component-wrapper">
     <v-btn
       icon
       variant="text"
-      class="back-button ma-2 v-sheet-back-button"
+      class="ma-2 position-sticky bg-white"
+      style="top: 0; z-index: 10;"
       @click="handleBack"
     >
       <v-icon>mdi-arrow-left</v-icon>
@@ -127,6 +138,7 @@
   .custom-tool-card {
     transition: all 0.2s ease-in-out;
   }
+  
   .custom-tool-card:hover {
     transform: scale(1.03);
   }
@@ -134,24 +146,36 @@
   .cursor-pointer {
     cursor: pointer;
   }
+
   .svg-white-filter {
     filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
       brightness(100%) contrast(100%);
   }
+
   .tool-title {
     min-height: 2em;
     line-height: 1.2;
   }
 
-  .v-sheet-tool-wrapper {
-    position: relative;
+  .tool-component-wrapper {
     min-height: 400px;
   }
 
-  .v-sheet-back-button {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background-color: white;
+  .overflow-y-auto::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background: #555;
   }
 </style>
diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index a291e9a6..2c6ab65e 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -83,14 +83,14 @@
       <v-slide-y-transition>
         <v-alert
           v-if="errorMessage"
-          type="error"
+          type="info"
           rounded="xl"
           class="mt-4 alert-animated"
           closable
           @click:close="errorMessage = ''"
         >
           <template #prepend>
-            <v-icon class="error-icon">mdi-alert-circle</v-icon>
+            <v-icon class="error-icon">mdi-information</v-icon>
           </template>
           {{ errorMessage }}
         </v-alert>
@@ -358,7 +358,6 @@ const handleFileChange = async (event) => {
   const newFiles = event.target?.files
   if (!newFiles?.length) return
   await processFiles([...newFiles])
-  // Reset input so the same file can be selected again
   event.target.value = ''
 }
 
@@ -376,13 +375,13 @@ const processFiles = async (filesToProcess) => {
         await appStore.loadExtension(fileURL)
         successCount++
       } catch (error) {
-        errorMessage.value = `Failed to load ${file.name}: ${error.message}`
+        errorMessage.value = `${error.message}`
       } finally {
         URL.revokeObjectURL(fileURL)
       }
     }
     if (successCount)
-      successMessage.value = `Successfully loaded ${successCount} extension${successCount>1?'s':''}!`
+      successMessage.value = `Successfully loaded ${successCount} extension${successCount>1?'s':''} !`
   } finally {
     loading.value = false
     files.value = []
@@ -414,7 +413,6 @@ const formatDate = (dateString) => {
   } else if (diffMonths < 12) {
     return `${diffMonths} ${diffMonths === 1 ? 'month' : 'months'} ago`
   } else {
-    // For dates older than a year, show the actual date
     return date.toLocaleDateString()
   }
 }
diff --git a/app/components/tools/CreateAOI.vue b/app/components/tools/CreateAOI.vue
deleted file mode 100644
index a11d8990..00000000
--- a/app/components/tools/CreateAOI.vue
+++ /dev/null
@@ -1,354 +0,0 @@
-<template>
-  <v-card :width="500" elevation="0" class="pa-4">
-    <v-card-title
-      class="pb-2 text-h6 text-primary font-weight-bold d-flex align-center"
-    >
-      <v-img
-        src="@/assets/img/aoi.svg"
-        alt="AOI icon"
-        class="mr-3"
-        width="48"
-        height="48"
-      />
-      Create Area of Interest (Bounding Box)
-    </v-card-title>
-
-    <v-card-subtitle class="ma-0 text-medium-emphasis text-wrap">
-      Enter the name and Min/Max coordinates to define your rectangular AOI.
-    </v-card-subtitle>
-
-    <v-card-text>
-      <v-form ref="form">
-        <v-text-field
-          label="AOI Name"
-          v-model="name"
-          prepend-inner-icon="mdi-format-title"
-          type="text"
-          variant="outlined"
-          color="primary"
-          :rules="[(v) => !!v || 'Name is required']"
-          required
-          class="mb-4"
-        />
-
-        <div class="mb-4">
-          <p class="text-subtitle-1 font-weight-medium mb-2">
-            Minimum Coordinates (Min X, Min Y)
-          </p>
-          <v-row dense>
-            <v-col cols="6">
-              <v-text-field
-                label="Min X"
-                v-model="min_x"
-                prepend-inner-icon="mdi-axis-x-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[(v) => !!v || 'Min X is required']"
-                @paste="handlePasteAOI($event, 'min', 'x')"
-                @update:modelValue="(val) => sanitizeInputAOI(val, 'min_x')"
-              />
-            </v-col>
-            <v-col cols="6">
-              <v-text-field
-                label="Min Y"
-                v-model="min_y"
-                prepend-inner-icon="mdi-axis-y-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[(v) => !!v || 'Min Y is required']"
-                @paste="handlePasteAOI($event, 'min', 'y')"
-                @update:modelValue="(val) => sanitizeInputAOI(val, 'min_y')"
-              />
-            </v-col>
-          </v-row>
-        </div>
-
-        <div class="mb-4">
-          <p class="text-subtitle-1 font-weight-medium mb-2">
-            Maximum Coordinates (Max X, Max Y)
-          </p>
-          <v-row dense>
-            <v-col cols="6">
-              <v-text-field
-                label="Max X"
-                v-model="max_x"
-                prepend-inner-icon="mdi-axis-x-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[(v) => !!v || 'Max X is required']"
-                @paste="handlePasteAOI($event, 'max', 'x')"
-                @update:modelValue="(val) => sanitizeInputAOI(val, 'max_x')"
-              />
-            </v-col>
-            <v-col cols="6">
-              <v-text-field
-                label="Max Y"
-                v-model="max_y"
-                prepend-inner-icon="mdi-axis-y-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[(v) => !!v || 'Max Y is required']"
-                @paste="handlePasteAOI($event, 'max', 'y')"
-                @update:modelValue="(val) => sanitizeInputAOI(val, 'max_y')"
-              />
-            </v-col>
-          </v-row>
-        </div>
-      </v-form>
-    </v-card-text>
-
-    <v-card-actions class="px-4 pb-4">
-      <v-btn
-        variant="text"
-        color="grey-darken-1"
-        size="large"
-        @click="showCreateTools"
-        :disabled="loading"
-        class="text-none"
-      >
-        <v-icon start>mdi-close-circle-outline</v-icon>
-        Cancel
-      </v-btn>
-
-      <v-btn
-        color="primary"
-        size="large"
-        variant="flat"
-        :loading="loading"
-        :disabled="!isFormFilled"
-        @click="createAOI"
-        class="text-none ml-4"
-      >
-        <v-icon start class="ml-1">mdi-send</v-icon>
-        Create AOI
-        <template #loader>
-          <v-progress-circular
-            indeterminate
-            size="20"
-            color="white"
-            width="3"
-          />
-        </template>
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script setup>
-  import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
-  import { importItem } from "@ogw_front/utils/file_import_workflow.js"
-
-  const UIStore = useUIStore()
-  const hybridViewerStore = useHybridViewerStore()
-  const showCreateTools = () => {
-    UIStore.setShowCreateTools(true)
-  }
-
-  const name = ref("")
-  const min_x = ref("")
-  const min_y = ref("")
-  const max_x = ref("")
-  const max_y = ref("")
-  const z = ref("")
-  const loading = ref(false)
-
-  const isFormFilled = computed(() => {
-    const coordsFilled =
-      min_x.value !== "" &&
-      min_y.value !== "" &&
-      max_x.value !== "" &&
-      max_y.value !== ""
-    return name.value !== "" && coordsFilled
-  })
-
-  const closeDrawer = () => {
-    UIStore.setShowCreateAOI(false)
-  }
-
-  function visibleBoundingBox() {
-    if (!hybridViewerStore.genericRenderWindow.value)
-      return [-1, 1, -1, 1, -1, 1]
-    const renderer = hybridViewerStore.genericRenderWindow.value.getRenderer()
-    return renderer.computeVisiblePropBounds()
-  }
-
-  const initializeAOICoordinates = () => {
-    const bounds = visibleBoundingBox()
-    const boundsMinX = bounds[0]
-    const boundsMaxX = bounds[1]
-    const boundsMinY = bounds[2]
-    const boundsMaxY = bounds[3]
-
-    const extentX = boundsMaxX - boundsMinX
-    const extentY = boundsMaxY - boundsMinY
-
-    const paddingX = extentX * 0.1
-    const paddingY = extentY * 0.1
-
-    const newMinX = boundsMinX - paddingX
-    const newMaxX = boundsMaxX + paddingX
-    const newMinY = boundsMinY - paddingY
-    const newMaxY = boundsMaxY + paddingY
-
-    min_x.value = newMinX.toFixed(2)
-    max_x.value = newMaxX.toFixed(2)
-    min_y.value = newMinY.toFixed(2)
-    max_y.value = newMaxY.toFixed(2)
-    z.value = ((bounds[4] + bounds[5]) / 2).toFixed(2)
-  }
-
-  onMounted(() => {
-    initializeAOICoordinates()
-  })
-
-  watch(
-    () => UIStore.showCreateAOI,
-    (newVal) => {
-      if (newVal) {
-        initializeAOICoordinates()
-        name.value = ""
-      }
-    },
-  )
-
-  const sanitizeNumberString = (str) => {
-    if (str == null) return ""
-    let value = String(str)
-      .replace(/,/g, ".")
-      .replace(/[^0-9eE+\-.]/g, "")
-    if (/[eE]/.test(value)) {
-      const parts = value.split(/[eE]/)
-      if (parts.length > 2) {
-        value =
-          parts.slice(0, 2).join("e") +
-          parts
-            .slice(2)
-            .join("")
-            .replace(/[^0-9+\-.]/g, "")
-      }
-    }
-    return value
-  }
-
-  const handlePasteAOI = (event) => {
-    const pastedText =
-      (event && event.clipboardData && event.clipboardData.getData("text")) ||
-      ""
-
-    if (!pastedText) return
-
-    const coordinates = pastedText.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g)
-    if (!coordinates || coordinates.length === 0) return
-
-    const sanitized = coordinates.map((c) => sanitizeNumberString(c))
-
-    if (sanitized.length >= 4) {
-      min_x.value = sanitized[0]
-      min_y.value = sanitized[1]
-      max_x.value = sanitized[2]
-      max_y.value = sanitized[3]
-      event.preventDefault()
-    } else if (sanitized.length >= 2) {
-      min_x.value = sanitized[0]
-      min_y.value = sanitized[1]
-      event.preventDefault()
-    }
-  }
-
-  const sanitizeInputAOI = (value, field) => {
-    const sanitizedValue = sanitizeNumberString(value)
-    if (field === "min_x") min_x.value = sanitizedValue
-    else if (field === "min_y") min_y.value = sanitizedValue
-    else if (field === "max_x") max_x.value = sanitizedValue
-    else if (field === "max_y") max_y.value = sanitizedValue
-    else if (field === "z") z.value = sanitizedValue
-  }
-
-  const safeParseFloat = (value) => {
-    const sanitizedValue = String(value).trim().replace(",", ".")
-    const result = parseFloat(sanitizedValue)
-    return isNaN(result) && sanitizedValue === "" ? NaN : result
-  }
-
-  const createAOI = async () => {
-    const min_x_val = safeParseFloat(min_x.value)
-    const min_y_val = safeParseFloat(min_y.value)
-    const max_x_val = safeParseFloat(max_x.value)
-    const max_y_val = safeParseFloat(max_y.value)
-    const z_val = safeParseFloat(z.value)
-
-    const hasNaN =
-      isNaN(min_x_val) ||
-      isNaN(min_y_val) ||
-      isNaN(max_x_val) ||
-      isNaN(max_y_val) ||
-      isNaN(z_val)
-
-    if (
-      hasNaN ||
-      min_x_val >= max_x_val ||
-      min_y_val >= max_y_val ||
-      !name.value
-    ) {
-      return
-    }
-
-    const aoiPoints = [
-      { x: min_x_val, y: min_y_val },
-      { x: max_x_val, y: min_y_val },
-      { x: max_x_val, y: max_y_val },
-      { x: min_x_val, y: max_y_val },
-    ]
-
-    const aoiData = {
-      name: name.value,
-      points: aoiPoints,
-      z: z_val,
-    }
-
-    const aoiSchema = back_schemas.opengeodeweb_back.create.create_aoi
-
-    loading.value = true
-    try {
-      const response = await api_fetch(
-        {
-          schema: aoiSchema,
-          params: aoiData,
-        },
-        {
-          response_function: async (response) => {
-            const dataToImport = {
-              id: response._data.id,
-              object_type: response._data.object_type,
-              geode_object: response._data.geode_object,
-              native_filename: response._data.native_file_name,
-              viewable_filename: response._data.viewable_file_name,
-              displayed_name: name.value,
-              is_aoi: true,
-              vtk_js: {
-                binary_light_viewable: response._data.binary_light_viewable,
-              },
-            }
-            await importItem(dataToImport)
-            closeDrawer()
-          },
-        },
-      )
-    } catch (error) {
-    } finally {
-      loading.value = false
-    }
-  }
-</script>
diff --git a/app/components/tools/CreateVOI.vue b/app/components/tools/CreateVOI.vue
deleted file mode 100644
index 388faa5f..00000000
--- a/app/components/tools/CreateVOI.vue
+++ /dev/null
@@ -1,335 +0,0 @@
-<template>
-  <v-card :width="500" elevation="0" class="pa-4">
-    <v-card-title
-      class="pb-2 text-h6 text-primary font-weight-bold d-flex align-center"
-    >
-      <v-img
-        src="../../assets/img/voi.svg"
-        alt="AOI icon"
-        class="mr-3"
-        width="48"
-        height="48"
-      />
-      Create Volume of Interest (Bounding Box)
-    </v-card-title>
-
-    <v-card-subtitle class="ma-0 text-medium-emphasis text-wrap">
-      Select an existing AOI and define Z min/max coordinates to create a 3D
-      volume.
-    </v-card-subtitle>
-
-    <v-card-text>
-      <v-form ref="form">
-        <v-text-field
-          label="VOI Name"
-          v-model="name"
-          prepend-inner-icon="mdi-format-title"
-          type="text"
-          variant="outlined"
-          color="primary"
-          :rules="[(v) => !!v || 'Name is required']"
-          required
-          class="mb-4"
-        />
-
-        <v-select
-          label="Select AOI"
-          v-model="selectedAOI"
-          :items="aoiList"
-          item-title="name"
-          item-value="id"
-          prepend-inner-icon="mdi-vector-square"
-          variant="outlined"
-          color="primary"
-          :rules="[(v) => !!v || 'AOI selection is required']"
-          required
-          class="mb-4"
-          no-data-text="No AOI available. Please create an AOI first."
-          @update:modelValue="onAOISelected"
-        >
-          <template #item="{ props, item }">
-            <v-list-item v-bind="props" :title="item.raw.name">
-              <template #prepend>
-                <v-img
-                  src="@/assets/img/aoi.svg"
-                  alt="AOI"
-                  width="24"
-                  height="24"
-                  class="mr-2"
-                />
-              </template>
-            </v-list-item>
-          </template>
-        </v-select>
-
-        <div class="mb-4">
-          <p class="text-subtitle-1 font-weight-medium mb-2">
-            Z Coordinates (Min / Max)
-          </p>
-          <v-row dense>
-            <v-col cols="6">
-              <v-text-field
-                label="Z Min"
-                v-model="z_min"
-                prepend-inner-icon="mdi-axis-z-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[
-                  (v) => !!v || 'Z Min is required',
-                  (v) =>
-                    !z_max ||
-                    parseFloat(v) < parseFloat(z_max) ||
-                    'Z Min must be less than Z Max',
-                ]"
-                @paste="handlePasteVOI($event, 'min')"
-                @update:modelValue="(val) => sanitizeInputVOI(val, 'z_min')"
-              />
-            </v-col>
-            <v-col cols="6">
-              <v-text-field
-                label="Z Max"
-                v-model="z_max"
-                prepend-inner-icon="mdi-axis-z-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[
-                  (v) => !!v || 'Z Max is required',
-                  (v) =>
-                    !z_min ||
-                    parseFloat(v) > parseFloat(z_min) ||
-                    'Z Max must be greater than Z Min',
-                ]"
-                @paste="handlePasteVOI($event, 'max')"
-                @update:modelValue="(val) => sanitizeInputVOI(val, 'z_max')"
-              />
-            </v-col>
-          </v-row>
-        </div>
-      </v-form>
-    </v-card-text>
-
-    <v-card-actions class="px-4 pb-4">
-      <v-btn
-        variant="text"
-        color="grey-darken-1"
-        size="large"
-        @click="openCreateTools"
-        :disabled="loading"
-        class="text-none"
-      >
-        <v-icon start>mdi-close-circle-outline</v-icon>
-        Cancel
-      </v-btn>
-
-      <v-btn
-        color="primary"
-        size="large"
-        variant="flat"
-        :loading="loading"
-        :disabled="!isFormFilled"
-        @click="createVOI"
-        class="text-none ml-4"
-      >
-        <v-icon start class="ml-1">mdi-send</v-icon>
-        Create VOI
-        <template #loader>
-          <v-progress-circular
-            indeterminate
-            size="20"
-            color="white"
-            width="3"
-          />
-        </template>
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script setup>
-  import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
-  import { importItem } from "@ogw_front/utils/file_import_workflow.js"
-
-  const UIStore = useUIStore()
-  const dataBaseStore = useDataBaseStore()
-  const hybridViewerStore = useHybridViewerStore()
-
-  const openCreateTools = () => {
-    UIStore.setShowCreateTools(true)
-    UIStore.setShowCreatePoint(false)
-    UIStore.setShowCreateAOI(false)
-    UIStore.setShowCreateVOI(false)
-  }
-
-  const name = ref("")
-  const selectedAOI = ref(null)
-  const z_min = ref("")
-  const z_max = ref("")
-  const loading = ref(false)
-
-  const aoiList = computed(() => {
-    const items = []
-    for (const [id, item] of Object.entries(dataBaseStore.db)) {
-      if (item.is_aoi === true && item.displayed_name) {
-        items.push({
-          id: id,
-          name: item.displayed_name || item.native_filename || id,
-        })
-      }
-    }
-    return items
-  })
-
-  const isFormFilled = computed(() => {
-    return (
-      name.value !== "" &&
-      selectedAOI.value !== null &&
-      z_min.value !== "" &&
-      z_max.value !== ""
-    )
-  })
-
-  const closeDrawer = () => {
-    UIStore.setShowCreateVOI(false)
-  }
-
-  function visibleBoundingBox() {
-    if (!hybridViewerStore.genericRenderWindow.value)
-      return [-1, 1, -1, 1, -1, 1]
-    const renderer = hybridViewerStore.genericRenderWindow.value.getRenderer()
-    return renderer.computeVisiblePropBounds()
-  }
-
-  const initializeVOICoordinates = () => {
-    const bounds = visibleBoundingBox()
-    const boundsMinZ = bounds[4]
-    const boundsMaxZ = bounds[5]
-
-    const extentZ = boundsMaxZ - boundsMinZ
-    const paddingZ = extentZ * 0.1
-
-    const newMinZ = boundsMinZ - paddingZ
-    const newMaxZ = boundsMaxZ + paddingZ
-
-    z_min.value = newMinZ.toFixed(2)
-    z_max.value = newMaxZ.toFixed(2)
-  }
-
-  const onAOISelected = (aoiId) => {}
-
-  onMounted(() => {
-    initializeVOICoordinates()
-  })
-
-  watch(
-    () => UIStore.showCreateVOI,
-    (newVal) => {
-      if (newVal) {
-        initializeVOICoordinates()
-        selectedAOI.value = null
-      }
-    },
-  )
-
-  const createVOI = async () => {
-    if (!isFormFilled.value) {
-      return
-    }
-
-    const z_min_val = parseFloat(z_min.value)
-    const z_max_val = parseFloat(z_max.value)
-
-    const voiData = {
-      name: name.value,
-      aoi_id: selectedAOI.value,
-      z_min: z_min_val,
-      z_max: z_max_val,
-    }
-
-    const voiSchema = back_schemas.opengeodeweb_back.create.create_voi
-
-    loading.value = true
-    try {
-      const response = await api_fetch(
-        {
-          schema: voiSchema,
-          params: voiData,
-        },
-        {
-          response_function: async (response) => {
-            const dataToImport = {
-              id: response._data.id,
-              object_type: response._data.object_type,
-              geode_object: response._data.geode_object,
-              native_filename: response._data.native_file_name,
-              viewable_filename: response._data.viewable_file_name,
-              displayed_name: name.value,
-              vtk_js: {
-                binary_light_viewable: response._data.binary_light_viewable,
-              },
-            }
-            await importItem(dataToImport)
-            closeDrawer()
-          },
-        },
-      )
-    } catch (error) {
-    } finally {
-      loading.value = false
-    }
-  }
-  const sanitizeNumberString = (str) => {
-    if (str == null) return ""
-    let value = String(str)
-      .replace(/,/g, ".")
-      .replace(/[^0-9eE+\-.]/g, "")
-    if (/[eE]/.test(value)) {
-      const parts = value.split(/[eE]/)
-      if (parts.length > 2) {
-        value =
-          parts.slice(0, 2).join("e") +
-          parts
-            .slice(2)
-            .join("")
-            .replace(/[^0-9+\-.]/g, "")
-      }
-    }
-    return value
-  }
-
-  const handlePasteVOI = (event, type) => {
-    const pastedText =
-      (event && event.clipboardData && event.clipboardData.getData("text")) ||
-      ""
-
-    if (!pastedText) return
-
-    const coordinates = pastedText.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g)
-    if (!coordinates || coordinates.length === 0) return
-
-    const sanitized = coordinates.map((c) => sanitizeNumberString(c))
-
-    if (sanitized.length >= 2) {
-      z_min.value = sanitized[0]
-      z_max.value = sanitized[1]
-      event.preventDefault()
-    } else if (sanitized.length === 1) {
-      if (type === "min") {
-        z_min.value = sanitized[0]
-      } else {
-        z_max.value = sanitized[0]
-      }
-      event.preventDefault()
-    }
-  }
-
-  const sanitizeInputVOI = (value, field) => {
-    if (field === "z_min") z_min.value = sanitizeNumberString(value)
-    else if (field === "z_max") z_max.value = sanitizeNumberString(value)
-  }
-</script>
diff --git a/app/plugins/tools.client.js b/app/plugins/tools.client.js
index 8a669c07..405f1653 100644
--- a/app/plugins/tools.client.js
+++ b/app/plugins/tools.client.js
@@ -18,27 +18,27 @@ export default defineNuxtPlugin((nuxtApp) => {
     component: markRaw(CreatePointComponent),
   })
 
-  const CreateAOIComponent = defineAsyncComponent(
-    () => import("../components/tools/CreateAOI.vue"),
-  )
-  UIStore.registerToolComponent({
-    id: "AOI",
-    title: "Area of Interest",
-    description: "Define an area of interest on the viewer with 4 points.",
-    iconType: "svg",
-    iconSource: AOIicon,
-    component: markRaw(CreateAOIComponent),
-  })
+  // const CreateAOIComponent = defineAsyncComponent(
+  //   () => import("@/components/tools/CreateAOI.vue"),
+  // )
+  // UIStore.registerToolComponent({
+  //   id: "AOI",
+  //   title: "Area of Interest",
+  //   description: "Define an area of interest on the viewer with 4 points.",
+  //   iconType: "svg",
+  //   iconSource: AOIicon,
+  //   component: markRaw(CreateAOIComponent),
+  // })
 
-  const CreateVOIComponent = defineAsyncComponent(
-    () => import("../components/tools/CreateVOI.vue"),
-  )
-  UIStore.registerToolComponent({
-    id: "VOI",
-    title: "Volume of Interest",
-    description: "Create a 3D bounding box from an existing AOI with Z bounds.",
-    iconType: "svg",
-    iconSource: VOIicon,
-    component: markRaw(CreateVOIComponent),
-  })
+  // const CreateVOIComponent = defineAsyncComponent(
+  //   () => import("@/components/tools/CreateVOI.vue"),
+  // )
+  // UIStore.registerToolComponent({
+  //   id: "VOI",
+  //   title: "Volume of Interest",
+  //   description: "Create a 3D bounding box from an existing AOI with Z bounds.",
+  //   iconType: "svg",
+  //   iconSource: VOIicon,
+  //   component: markRaw(CreateVOIComponent),
+  // })
 })

From 6f7e4fe98888dae60eb5bbbd76862a0407ebb600 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 27 Nov 2025 10:28:36 +0100
Subject: [PATCH 10/23] Cleaning css & added classes vuetify

---
 app/components/Extension.vue | 677 +++++++++--------------------------
 1 file changed, 167 insertions(+), 510 deletions(-)

diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index 2c6ab65e..2069e2f0 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-card flat rounded="xl" elevation="0" class="extension-container">
+  <v-card flat rounded="xl" elevation="0" class="bg-surface">
     <v-card-title
       class="text-h4 text-primary pa-6 font-weight-bold d-flex align-center"
     >
-      <v-icon icon="mdi-puzzle" class="mr-3 title-icon"></v-icon>
+      <v-icon icon="mdi-puzzle" class="mr-3"></v-icon>
       Extensions
     </v-card-title>
 
@@ -16,39 +16,53 @@
       <v-hover v-slot="{ isHovering, props }">
         <v-card
           v-bind="props"
-          class="text-center cursor-pointer drop-zone-card"
+          class="text-center cursor-pointer"
           :class="{
-            'drop-zone-hover': isHovering || isDragging,
-            'drop-zone-loading': loading
+            'elevation-8': isHovering || isDragging,
+            'elevation-2': !(isHovering || isDragging)
+          }"
+          :style="{
+            position: 'relative',
+            overflow: 'hidden',
+            transition: 'all 0.3s ease',
+            background: isHovering || isDragging ? '#f5f9ff' : '#fafafa',
+            border: `2px dashed ${isHovering || isDragging ? 'rgb(var(--v-theme-primary))' : '#e0e0e0'}`,
+            transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
+            pointerEvents: loading ? 'none' : 'auto',
+            opacity: loading ? 0.6 : 1
           }"
           rounded="xl"
-          :elevation="isHovering || isDragging ? 8 : 2"
           @click="triggerFileDialog"
           @dragover.prevent="isDragging = true"
           @dragleave.prevent="isDragging = false"
           @drop.prevent="handleDrop"
         >
           <v-card-text class="pa-8">
-            <div class="drop-zone-content">
-              <v-sheet
-                class="icon-wrapper mx-auto mb-6"
-                :class="{ 'icon-loading': loading, 'icon-active': isHovering || isDragging }"
-                rounded="circle"
-              >
-                <v-icon
-                  :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
-                  size="56"
-                  :class="{ 'rotating': loading }"
-                />
-              </v-sheet>
-
-              <div class="drop-zone-title mb-2">
-                {{ loading ? 'Loading Extension...' : isDragging ? 'Drop to Install' : 'Click or Drag & Drop Extension' }}
-              </div>
-
-              <div class="drop-zone-subtitle">
-                (.es.js files only)
-              </div>
+            <v-sheet
+              class="mx-auto mb-6 d-flex align-center justify-center"
+              :color="isHovering || isDragging ? 'primary' : 'grey-lighten-2'"
+              :style="{
+                width: '100px',
+                height: '100px',
+                transition: 'all 0.3s ease'
+              }"
+              rounded="circle"
+              :elevation="isHovering || isDragging ? 4 : 0"
+            >
+              <v-icon
+                :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
+                size="56"
+                :color="isHovering || isDragging ? 'white' : 'grey-darken-1'"
+                :class="{ 'rotating': loading }"
+              />
+            </v-sheet>
+
+            <div class="text-h6 font-weight-semibold mb-2" :class="isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'" style="transition: color 0.3s ease">
+              {{ loading ? 'Loading Extension...' : isDragging ? 'Drop to Install' : 'Click or Drag & Drop Extension' }}
+            </div>
+
+            <div class="text-body-2 text-grey-darken-1">
+              (.es.js files only)
             </div>
           </v-card-text>
 
@@ -69,13 +83,10 @@
           v-if="successMessage"
           type="success"
           rounded="xl"
-          class="mt-4 alert-animated"
+          class="mt-4"
           closable
           @click:close="successMessage = ''"
         >
-          <template #prepend>
-            <v-icon class="success-icon">mdi-check-circle</v-icon>
-          </template>
           {{ successMessage }}
         </v-alert>
       </v-slide-y-transition>
@@ -85,13 +96,10 @@
           v-if="errorMessage"
           type="info"
           rounded="xl"
-          class="mt-4 alert-animated"
+          class="mt-4"
           closable
           @click:close="errorMessage = ''"
         >
-          <template #prepend>
-            <v-icon class="error-icon">mdi-information</v-icon>
-          </template>
           {{ errorMessage }}
         </v-alert>
       </v-slide-y-transition>
@@ -99,10 +107,10 @@
       <!-- Loaded Extensions -->
       <v-fade-transition>
         <div v-if="loadedExtensions.length" class="mt-8">
-          <div class="section-header mb-4">
+          <div class="d-flex align-center mb-4 text-h6 font-weight-semibold text-primary">
             <v-icon icon="mdi-puzzle-check" class="mr-2" />
             Active Extensions
-            <v-chip size="small" class="ml-3 count-chip" color="primary" variant="flat">
+            <v-chip size="small" class="ml-3" color="primary" variant="flat" elevation="2">
               {{ loadedExtensions.length }}
             </v-chip>
           </div>
@@ -114,35 +122,41 @@
               cols="12"
             >
               <v-scale-transition :delay="index * 50">
-                <v-expansion-panels variant="accordion" class="extension-panels">
-                  <v-expansion-panel rounded="xl" class="extension-panel">
-                    <v-expansion-panel-title class="extension-panel-title">
+                <v-expansion-panels variant="accordion" class="bg-transparent">
+                  <v-expansion-panel rounded="xl" border elevation="0" :style="{ transition: 'box-shadow 0.3s ease' }">
+                    <v-expansion-panel-title class="pa-5">
                       <template v-slot:default="{ expanded }">
                         <v-hover v-slot="{ isHovering, props: hoverProps }">
-                          <div v-bind="hoverProps" class="extension-header" :class="{ 'extension-header-expanded': expanded }">
+                          <div v-bind="hoverProps" class="d-flex align-center ga-4" :class="expanded ? 'bg-blue-lighten-5 rounded-lg pa-2 ma-n2' : ''" :style="{ width: '100%' }">
                             <v-sheet
-                              class="extension-icon"
-                              :class="{ 'extension-icon-active': isHovering || expanded }"
+                              class="d-flex align-center justify-center flex-shrink-0"
+                              :color="isHovering || expanded ? 'primary' : 'grey-lighten-3'"
+                              :style="{
+                                width: '56px',
+                                height: '56px',
+                                transition: 'all 0.3s ease'
+                              }"
                               rounded="circle"
+                              :elevation="isHovering || expanded ? 4 : 0"
                             >
-                              <v-icon icon="mdi-puzzle" size="32" />
+                              <v-icon icon="mdi-puzzle" size="32" :color="isHovering || expanded ? 'white' : 'grey-darken-1'" />
                             </v-sheet>
 
-                            <div class="extension-info">
-                              <div class="extension-name">
+                            <div class="flex-grow-1" style="min-width: 0">
+                              <div class="text-body-1 font-weight-semibold text-grey-darken-4 mb-1">
                                 {{ getExtensionName(extension) }}
                               </div>
 
-                              <div class="extension-description">
+                              <div class="text-body-2 text-grey-darken-1 mb-2" style="line-height: 1.5; white-space: normal; word-wrap: break-word">
                                 {{ getExtensionDescription(extension) }}
                               </div>
 
-                              <div class="extension-badges">
+                              <div class="d-flex align-center ga-2 flex-wrap">
                                 <v-chip
                                   size="x-small"
                                   color="success"
                                   variant="flat"
-                                  class="status-chip"
+                                  elevation="1"
                                 >
                                   <v-icon start size="12">mdi-check-circle</v-icon>
                                   Active
@@ -151,7 +165,6 @@
                                 <v-chip
                                   v-if="getExtensionVersion(extension)"
                                   size="x-small"
-                                  class="ml-2"
                                   variant="tonal"
                                   color="primary"
                                 >
@@ -160,9 +173,9 @@
 
                                 <v-chip
                                   size="x-small"
-                                  class="ml-2 tools-chip"
                                   color="primary"
                                   variant="flat"
+                                  elevation="1"
                                 >
                                   <v-icon start size="12">mdi-tools</v-icon>
                                   {{ getExtensionToolsCount(extension) }}
@@ -170,7 +183,7 @@
 
                                 <v-spacer />
 
-                                <span class="extension-date">
+                                <span class="text-caption text-grey" style="white-space: nowrap">
                                   {{ formatDate(extension.loadedAt) }}
                                 </span>
                               </div>
@@ -181,7 +194,7 @@
                               size="small"
                               variant="text"
                               color="error"
-                              class="remove-btn"
+                              :style="{ transition: 'all 0.2s ease', opacity: 0.7 }"
                               @click.stop="confirmRemove(extension)"
                             />
                           </div>
@@ -189,50 +202,75 @@
                       </template>
                     </v-expansion-panel-title>
 
-                    <v-expansion-panel-text class="extension-panel-content">
-                      <v-divider class="mb-6 divider-gradient" />
+                    <v-expansion-panel-text class="px-6 pb-6">
+                      <v-divider class="mb-6" />
                       
-                      <div class="tools-section-header">
+                      <div class="d-flex align-center text-body-1 font-weight-semibold text-grey-darken-2 mb-3">
                         <v-icon icon="mdi-tools" size="20" class="mr-2" />
                         Tools Added by This Extension
                       </div>
 
-                      <div v-if="getExtensionTools(extension).length" class="tools-list">
+                      <div v-if="getExtensionTools(extension).length" class="d-flex flex-column ga-2">
                         <v-fade-transition group>
-                          <div
+                          <v-hover
                             v-for="(tool, toolIndex) in getExtensionTools(extension)"
                             :key="tool.id"
-                            class="tool-item"
-                            :style="{ transitionDelay: `${toolIndex * 30}ms` }"
+                            v-slot="{ isHovering, props: toolProps }"
                           >
-                            <v-sheet
-                              class="tool-icon-wrapper"
-                              rounded="circle"
+                            <v-card
+                              v-bind="toolProps"
+                              class="d-flex align-start ga-3 pa-3"
+                              :style="{
+                                transitionDelay: `${toolIndex * 30}ms`,
+                                transition: 'all 0.2s ease',
+                                background: isHovering ? '#f5f9ff' : '#fafafa',
+                                borderColor: isHovering ? 'rgba(33, 150, 243, 0.3)' : '#e0e0e0'
+                              }"
+                              border
+                              rounded="lg"
+                              :elevation="isHovering ? 2 : 0"
                             >
-                              <v-icon
-                                v-if="tool.iconType === 'mdi'"
-                                :icon="tool.iconSource"
-                                size="20"
-                              />
-                              <v-img
-                                v-else-if="tool.iconType === 'svg'"
-                                :src="tool.iconSource"
-                                width="20"
-                                height="20"
-                                contain
-                              />
-                            </v-sheet>
-
-                            <div class="tool-content">
-                              <div class="tool-title">
-                                {{ tool.title }}
+                              <v-sheet
+                                class="d-flex align-center justify-center flex-shrink-0"
+                                :color="isHovering ? 'primary' : 'blue-lighten-4'"
+                                :style="{
+                                  width: '40px',
+                                  height: '40px',
+                                  transition: 'background 0.2s ease'
+                                }"
+                                rounded="circle"
+                              >
+                                <v-icon
+                                  v-if="tool.iconType === 'mdi'"
+                                  :icon="tool.iconSource"
+                                  size="20"
+                                  :color="isHovering ? 'white' : 'primary'"
+                                  :style="{ transition: 'color 0.2s ease' }"
+                                />
+                                <v-img
+                                  v-else-if="tool.iconType === 'svg'"
+                                  :src="tool.iconSource"
+                                  width="20"
+                                  height="20"
+                                  contain
+                                  :style="{
+                                    transition: 'filter 0.2s ease',
+                                    filter: isHovering ? 'brightness(0) invert(1)' : 'none'
+                                  }"
+                                />
+                              </v-sheet>
+
+                              <div class="flex-grow-1" style="min-width: 0">
+                                <div class="text-body-1 font-weight-semibold text-grey-darken-4 mb-1" style="line-height: 1.4">
+                                  {{ tool.title }}
+                                </div>
+
+                                <div class="text-body-2 text-grey-darken-1" style="line-height: 1.5">
+                                  {{ tool.description }}
+                                </div>
                               </div>
-
-                              <div class="tool-description">
-                                {{ tool.description }}
-                              </div>
-                            </div>
-                          </div>
+                            </v-card>
+                          </v-hover>
                         </v-fade-transition>
                       </div>
 
@@ -241,11 +279,8 @@
                         type="info"
                         variant="tonal"
                         rounded="lg"
-                        class="empty-tools-alert"
+                        class="mt-2"
                       >
-                        <template #prepend>
-                          <v-icon>mdi-information</v-icon>
-                        </template>
                         No tools registered by this extension
                       </v-alert>
                     </v-expansion-panel-text>
@@ -263,19 +298,25 @@
           v-if="!loadedExtensions.length"
           rounded="xl"
           variant="outlined"
-          class="mt-8 empty-state"
+          class="mt-8 bg-grey-lighten-4"
+          :style="{ border: '2px dashed #e0e0e0' }"
         >
           <v-card-text class="text-center pa-8">
             <v-sheet
-              class="empty-icon-wrapper mx-auto mb-4"
+              class="mx-auto mb-4 d-flex align-center justify-center"
+              color="grey-lighten-3"
+              :style="{
+                width: '100px',
+                height: '100px'
+              }"
               rounded="circle"
             >
-              <v-icon icon="mdi-puzzle-outline" size="64" />
+              <v-icon icon="mdi-puzzle-outline" size="64" color="grey-lighten-1" />
             </v-sheet>
-            <div class="empty-title mb-2">
+            <div class="text-body-1 font-weight-semibold text-grey-darken-2 mb-2">
               No extensions loaded yet
             </div>
-            <div class="empty-subtitle">
+            <div class="text-body-2 text-grey-darken-1">
               Upload an extension file to get started
             </div>
           </v-card-text>
@@ -284,26 +325,48 @@
     </v-card-text>
 
     <!-- Dialog Remove -->
-    <v-dialog v-model="showRemoveDialog" max-width="450">
-      <v-card rounded="xl" class="remove-dialog">
-        <v-card-title class="dialog-title">
-          <v-icon icon="mdi-alert" class="mr-3 warning-icon" />
+    <v-dialog v-model="showRemoveDialog" max-width="500">
+      <v-card rounded="xl" elevation="8">
+        <v-card-title class="d-flex align-center text-h6 font-weight-semibold text-warning pa-6 pb-4">
+          <v-icon icon="mdi-alert-circle" size="28" class="mr-3" color="warning" />
           Remove Extension?
         </v-card-title>
 
-        <v-card-text class="dialog-text">
-          Are you sure you want to remove <strong>{{ getExtensionName(extensionToRemove) }}</strong>?
-          <div class="mt-2 text-caption text-medium-emphasis">
-            This will remove all tools registered by this extension.
+        <v-card-text class="px-6 pb-6 text-body-1">
+          <div class="text-medium-emphasis mb-3">
+            Are you sure you want to remove <span class="font-weight-bold text-high-emphasis">{{ getExtensionName(extensionToRemove) }}</span>?
           </div>
+          <v-alert
+            type="info"
+            variant="tonal"
+            density="compact"
+            rounded="lg"
+            class="text-caption"
+          >
+            <template #prepend>
+              <v-icon size="18">mdi-information</v-icon>
+            </template>
+            This will remove all tools registered by this extension.
+          </v-alert>
         </v-card-text>
 
+        <v-divider />
+
         <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="showRemoveDialog = false" class="cancel-btn">
+          <v-btn
+            variant="text"
+            size="large"
+            @click="showRemoveDialog = false"
+          >
             Cancel
           </v-btn>
-          <v-btn color="error" variant="flat" @click="removeExtension" class="remove-confirm-btn">
+          <v-btn
+            color="error"
+            variant="elevated"
+            size="large"
+            @click="removeExtension"
+          >
             <v-icon start>mdi-delete</v-icon>
             Remove
           </v-btn>
@@ -314,8 +377,6 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-
 const UIStore = useUIStore()
 const appStore = useAppStore()
 const files = ref([])
@@ -441,75 +502,6 @@ const getExtensionToolsCount = (extension) => {
 </script>
 
 <style scoped>
-/* Container */
-.extension-container {
-  background: #ffffff;
-}
-
-/* Drop Zone */
-.drop-zone-card {
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s ease;
-  background: #fafafa;
-  border: 2px dashed #e0e0e0;
-}
-
-.drop-zone-hover {
-  transform: translateY(-2px);
-  border-color: rgb(var(--v-theme-primary));
-  background: #f5f9ff;
-  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);
-}
-
-.drop-zone-loading {
-  pointer-events: none;
-  opacity: 0.6;
-}
-
-/* Icon Wrapper */
-.icon-wrapper {
-  width: 100px;
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #eeeeee;
-  transition: all 0.3s ease;
-}
-
-.icon-active {
-  background: rgb(var(--v-theme-primary));
-  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
-}
-
-.icon-wrapper .v-icon {
-  color: #757575;
-  transition: color 0.3s ease;
-}
-
-.icon-active .v-icon {
-  color: white;
-}
-
-/* Drop Zone Text */
-.drop-zone-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #424242;
-  transition: color 0.3s ease;
-}
-
-.drop-zone-hover .drop-zone-title {
-  color: rgb(var(--v-theme-primary));
-}
-
-.drop-zone-subtitle {
-  font-size: 0.875rem;
-  color: #757575;
-}
-
-/* Rotating Animation */
 .rotating {
   animation: rotate 1s linear infinite;
 }
@@ -519,320 +511,6 @@ const getExtensionToolsCount = (extension) => {
   to { transform: rotate(360deg); }
 }
 
-/* Alerts */
-.alert-animated {
-  animation: slide-in 0.3s ease;
-}
-
-@keyframes slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Section Header */
-.section-header {
-  font-size: 1rem;
-  font-weight: 600;
-  color: rgb(var(--v-theme-primary));
-  display: flex;
-  align-items: center;
-}
-
-.count-chip {
-  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.15);
-}
-
-/* Extension Panels */
-.extension-panels {
-  background: transparent !important;
-}
-
-.extension-panel {
-  transition: box-shadow 0.3s ease;
-  overflow: hidden;
-  background: white;
-  border: 1px solid #e0e0e0;
-}
-
-.extension-panel:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.extension-panel-title {
-  padding: 20px;
-}
-
-/* Extension Header */
-.extension-header {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 16px;
-}
-
-.extension-header-expanded {
-  background: #f5f9ff;
-  border-radius: 8px;
-  padding: 8px;
-  margin: -8px;
-}
-
-/* Extension Icon */
-.extension-icon {
-  width: 56px;
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f5f5f5;
-  transition: all 0.3s ease;
-  flex-shrink: 0;
-}
-
-.extension-icon-active {
-  background: rgb(var(--v-theme-primary));
-  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
-}
-
-.extension-icon .v-icon {
-  color: #757575;
-  transition: color 0.3s ease;
-}
-
-.extension-icon-active .v-icon {
-  color: white;
-}
-
-/* Extension Info */
-.extension-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.extension-name {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #212121;
-  margin-bottom: 4px;
-}
-
-.extension-description {
-  font-size: 0.875rem;
-  color: #757575;
-  margin-bottom: 8px;
-  line-height: 1.5;
-  white-space: normal;
-  word-wrap: break-word;
-}
-
-.extension-badges {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.status-chip {
-  box-shadow: 0 1px 3px rgba(76, 175, 80, 0.15);
-}
-
-.tools-chip {
-  box-shadow: 0 1px 3px rgba(33, 150, 243, 0.15);
-}
-
-.extension-date {
-  font-size: 0.75rem;
-  color: #9e9e9e;
-  white-space: nowrap;
-}
-
-/* Remove Button */
-.remove-btn {
-  transition: all 0.2s ease;
-  opacity: 0.7;
-}
-
-.remove-btn:hover {
-  opacity: 1;
-  background-color: rgba(244, 67, 54, 0.08);
-}
-
-/* Extension Panel Content */
-.extension-panel-content {
-  padding: 0 24px 24px 24px;
-}
-
-.divider-gradient {
-  background: #e0e0e0;
-  height: 1px;
-  border: none;
-}
-
-/* Tools Section */
-.tools-section-header {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: #424242;
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.tools-list {
-  background: transparent;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.tool-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 12px;
-  transition: all 0.2s ease;
-  background: #fafafa;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-}
-
-.tool-item:hover {
-  background: #f5f9ff;
-  border-color: rgba(33, 150, 243, 0.3);
-  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.08);
-}
-
-.tool-icon-wrapper {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #e3f2fd;
-  transition: background 0.2s ease;
-  flex-shrink: 0;
-}
-
-.tool-item:hover .tool-icon-wrapper {
-  background: rgb(var(--v-theme-primary));
-}
-
-.tool-icon-wrapper .v-icon {
-  color: rgb(var(--v-theme-primary));
-  transition: color 0.2s ease;
-}
-
-.tool-item:hover .tool-icon-wrapper .v-icon {
-  color: white;
-}
-
-.tool-icon-wrapper .v-img {
-  transition: filter 0.2s ease;
-}
-
-.tool-item:hover .tool-icon-wrapper .v-img {
-  filter: brightness(0) invert(1);
-}
-
-.tool-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.tool-title {
-  font-weight: 600;
-  color: #212121;
-  font-size: 0.9375rem;
-  line-height: 1.4;
-  margin-bottom: 4px;
-}
-
-.tool-description {
-  font-size: 0.8125rem;
-  color: #757575;
-  line-height: 1.5;
-}
-
-.empty-tools-alert {
-  margin-top: 8px;
-}
-
-/* Empty State */
-.empty-state {
-  border: 2px dashed #e0e0e0;
-  background: #fafafa;
-}
-
-.empty-icon-wrapper {
-  width: 100px;
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f5f5f5;
-  margin: 0 auto;
-}
-
-.empty-icon-wrapper .v-icon {
-  color: #bdbdbd;
-}
-
-.empty-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #424242;
-}
-
-.empty-subtitle {
-  font-size: 0.875rem;
-  color: #757575;
-}
-
-/* Remove Dialog */
-.remove-dialog {
-  overflow: hidden;
-}
-
-.dialog-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #f57c00;
-  padding: 24px 24px 16px 24px;
-  display: flex;
-  align-items: center;
-}
-
-.dialog-text {
-  padding: 0 24px 24px 24px;
-  font-size: 0.9375rem;
-  color: #424242;
-  line-height: 1.6;
-}
-
-.cancel-btn {
-  transition: background-color 0.2s ease;
-}
-
-.cancel-btn:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-.remove-confirm-btn {
-  transition: all 0.2s ease;
-}
-
-.remove-confirm-btn:hover {
-  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
-}
-
-/* Utility */
 .cursor-pointer {
   cursor: pointer;
 }
@@ -844,25 +522,4 @@ const getExtensionToolsCount = (extension) => {
   opacity: 0;
   pointer-events: none;
 }
-
-/* Responsive */
-@media (max-width: 600px) {
-  .extension-icon {
-    width: 48px;
-    height: 48px;
-  }
-  
-  .extension-icon .v-icon {
-    font-size: 24px;
-  }
-  
-  .extension-name {
-    font-size: 0.9375rem;
-  }
-  
-  .icon-wrapper {
-    width: 80px;
-    height: 80px;
-  }
-}
 </style>

From b488054b6b72da981dbf8edb973313b428512f59 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 27 Nov 2025 10:51:34 +0100
Subject: [PATCH 11/23] added on off btn

---
 app/components/Extension.vue | 144 ++++++++++++++++++++++-------------
 app/stores/UI.js             |   8 +-
 app/utils/extensionAPI.js    |  50 +-----------
 3 files changed, 103 insertions(+), 99 deletions(-)

diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index 2069e2f0..75d2cde8 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -12,7 +12,6 @@
     </v-card-subtitle>
 
     <v-card-text class="px-6 pb-6">
-      <!-- Drag & Drop Zone -->
       <v-hover v-slot="{ isHovering, props }">
         <v-card
           v-bind="props"
@@ -77,7 +76,6 @@
         </v-card>
       </v-hover>
 
-      <!-- Messages -->
       <v-slide-y-transition>
         <v-alert
           v-if="successMessage"
@@ -104,7 +102,6 @@
         </v-alert>
       </v-slide-y-transition>
 
-      <!-- Loaded Extensions -->
       <v-fade-transition>
         <div v-if="loadedExtensions.length" class="mt-8">
           <div class="d-flex align-center mb-4 text-h6 font-weight-semibold text-primary">
@@ -123,14 +120,22 @@
             >
               <v-scale-transition :delay="index * 50">
                 <v-expansion-panels variant="accordion" class="bg-transparent">
-                  <v-expansion-panel rounded="xl" border elevation="0" :style="{ transition: 'box-shadow 0.3s ease' }">
+                  <v-expansion-panel 
+                    rounded="xl" 
+                    border 
+                    elevation="0" 
+                    :style="{ 
+                      transition: 'all 0.3s ease',
+                      opacity: extension.enabled ? 1 : 0.6
+                    }"
+                  >
                     <v-expansion-panel-title class="pa-5">
                       <template v-slot:default="{ expanded }">
                         <v-hover v-slot="{ isHovering, props: hoverProps }">
                           <div v-bind="hoverProps" class="d-flex align-center ga-4" :class="expanded ? 'bg-blue-lighten-5 rounded-lg pa-2 ma-n2' : ''" :style="{ width: '100%' }">
                             <v-sheet
                               class="d-flex align-center justify-center flex-shrink-0"
-                              :color="isHovering || expanded ? 'primary' : 'grey-lighten-3'"
+                              :color="extension.enabled ? (isHovering || expanded ? 'primary' : 'grey-lighten-3') : 'grey-lighten-2'"
                               :style="{
                                 width: '56px',
                                 height: '56px',
@@ -139,29 +144,23 @@
                               rounded="circle"
                               :elevation="isHovering || expanded ? 4 : 0"
                             >
-                              <v-icon icon="mdi-puzzle" size="32" :color="isHovering || expanded ? 'white' : 'grey-darken-1'" />
+                              <v-icon 
+                                icon="mdi-puzzle" 
+                                size="32" 
+                                :color="extension.enabled ? (isHovering || expanded ? 'white' : 'grey-darken-1') : 'grey'"
+                              />
                             </v-sheet>
 
                             <div class="flex-grow-1" style="min-width: 0">
-                              <div class="text-body-1 font-weight-semibold text-grey-darken-4 mb-1">
+                              <div class="text-body-1 font-weight-semibold mb-1" :class="extension.enabled ? 'text-grey-darken-4' : 'text-grey'">
                                 {{ getExtensionName(extension) }}
                               </div>
 
-                              <div class="text-body-2 text-grey-darken-1 mb-2" style="line-height: 1.5; white-space: normal; word-wrap: break-word">
+                              <div class="text-body-2 mb-2" :class="extension.enabled ? 'text-grey-darken-1' : 'text-grey'" style="line-height: 1.5; white-space: normal; word-wrap: break-word">
                                 {{ getExtensionDescription(extension) }}
                               </div>
 
                               <div class="d-flex align-center ga-2 flex-wrap">
-                                <v-chip
-                                  size="x-small"
-                                  color="success"
-                                  variant="flat"
-                                  elevation="1"
-                                >
-                                  <v-icon start size="12">mdi-check-circle</v-icon>
-                                  Active
-                                </v-chip>
-
                                 <v-chip
                                   v-if="getExtensionVersion(extension)"
                                   size="x-small"
@@ -173,7 +172,7 @@
 
                                 <v-chip
                                   size="x-small"
-                                  color="primary"
+                                  :color="extension.enabled ? 'primary' : 'grey'"
                                   variant="flat"
                                   elevation="1"
                                 >
@@ -189,28 +188,55 @@
                               </div>
                             </div>
 
-                            <v-btn
-                              icon="mdi-close"
-                              size="small"
-                              variant="text"
-                              color="error"
-                              :style="{ transition: 'all 0.2s ease', opacity: 0.7 }"
-                              @click.stop="confirmRemove(extension)"
-                            />
+                            <div class="d-flex align-center ga-2 flex-shrink-0">
+                              <v-switch
+                                :model-value="extension.enabled"
+                                color="success"
+                                density="compact"
+                                hide-details
+                                inset
+                                @click.stop
+                                @update:model-value="toggleExtensionState(extension)"
+                              >
+                                <template #label>
+                                  <span class="text-caption" :class="extension.enabled ? 'text-success' : 'text-grey'">
+                                    {{ extension.enabled ? 'Enabled' : 'Disabled' }}
+                                  </span>
+                                </template>
+                              </v-switch>
+
+                              <v-btn
+                                icon="mdi-delete"
+                                size="small"
+                                variant="text"
+                                color="error"
+                                :style="{ transition: 'all 0.2s ease', opacity: 0.7 }"
+                                @click.stop="confirmRemove(extension)"
+                              />
+                            </div>
                           </div>
                         </v-hover>
                       </template>
                     </v-expansion-panel-title>
 
                     <v-expansion-panel-text class="px-6 pb-6">
-                      <v-divider class="mb-6" />
+                      <v-divider class="mb-4" />
                       
-                      <div class="d-flex align-center text-body-1 font-weight-semibold text-grey-darken-2 mb-3">
-                        <v-icon icon="mdi-tools" size="20" class="mr-2" />
-                        Tools Added by This Extension
+                      <div class="d-flex align-center justify-space-between mb-4">
+                        <div class="d-flex align-center text-h6 font-weight-semibold text-grey-darken-3">
+                          <v-icon icon="mdi-tools" size="22" class="mr-2" />
+                          Tools
+                        </div>
+                        <v-chip
+                          size="small"
+                          :color="extension.enabled ? 'primary' : 'grey'"
+                          variant="tonal"
+                        >
+                          {{ getExtensionToolsCount(extension) }} {{ getExtensionToolsCount(extension) === 1 ? 'tool' : 'tools' }}
+                        </v-chip>
                       </div>
 
-                      <div v-if="getExtensionTools(extension).length" class="d-flex flex-column ga-2">
+                      <div v-if="getExtensionTools(extension).length" class="d-flex flex-column ga-3">
                         <v-fade-transition group>
                           <v-hover
                             v-for="(tool, toolIndex) in getExtensionTools(extension)"
@@ -219,53 +245,64 @@
                           >
                             <v-card
                               v-bind="toolProps"
-                              class="d-flex align-start ga-3 pa-3"
+                              class="d-flex align-start ga-3 pa-4"
                               :style="{
                                 transitionDelay: `${toolIndex * 30}ms`,
                                 transition: 'all 0.2s ease',
-                                background: isHovering ? '#f5f9ff' : '#fafafa',
-                                borderColor: isHovering ? 'rgba(33, 150, 243, 0.3)' : '#e0e0e0'
+                                background: extension.enabled ? (isHovering ? '#f5f9ff' : '#fafafa') : '#f5f5f5',
+                                borderColor: extension.enabled ? (isHovering ? 'rgba(33, 150, 243, 0.3)' : '#e0e0e0') : '#e0e0e0',
+                                opacity: extension.enabled ? 1 : 0.7
                               }"
                               border
                               rounded="lg"
-                              :elevation="isHovering ? 2 : 0"
+                              :elevation="isHovering && extension.enabled ? 2 : 0"
                             >
                               <v-sheet
                                 class="d-flex align-center justify-center flex-shrink-0"
-                                :color="isHovering ? 'primary' : 'blue-lighten-4'"
+                                :color="extension.enabled ? (isHovering ? 'primary' : 'blue-lighten-4') : 'grey-lighten-2'"
                                 :style="{
-                                  width: '40px',
-                                  height: '40px',
+                                  width: '48px',
+                                  height: '48px',
                                   transition: 'background 0.2s ease'
                                 }"
-                                rounded="circle"
+                                rounded="lg"
                               >
                                 <v-icon
                                   v-if="tool.iconType === 'mdi'"
                                   :icon="tool.iconSource"
-                                  size="20"
-                                  :color="isHovering ? 'white' : 'primary'"
+                                  size="24"
+                                  :color="extension.enabled ? (isHovering ? 'white' : 'primary') : 'grey'"
                                   :style="{ transition: 'color 0.2s ease' }"
                                 />
                                 <v-img
                                   v-else-if="tool.iconType === 'svg'"
                                   :src="tool.iconSource"
-                                  width="20"
-                                  height="20"
+                                  width="24"
+                                  height="24"
                                   contain
                                   :style="{
                                     transition: 'filter 0.2s ease',
-                                    filter: isHovering ? 'brightness(0) invert(1)' : 'none'
+                                    filter: extension.enabled ? (isHovering ? 'brightness(0) invert(1)' : 'none') : 'grayscale(100%) opacity(0.5)'
                                   }"
                                 />
                               </v-sheet>
 
                               <div class="flex-grow-1" style="min-width: 0">
-                                <div class="text-body-1 font-weight-semibold text-grey-darken-4 mb-1" style="line-height: 1.4">
-                                  {{ tool.title }}
+                                <div class="d-flex align-center ga-2 mb-1">
+                                  <span class="text-body-1 font-weight-semibold" :class="extension.enabled ? 'text-grey-darken-4' : 'text-grey-darken-1'" style="line-height: 1.4">
+                                    {{ tool.title }}
+                                  </span>
+                                  <v-chip
+                                    v-if="!extension.enabled"
+                                    size="x-small"
+                                    color="grey"
+                                    variant="flat"
+                                  >
+                                    Disabled
+                                  </v-chip>
                                 </div>
 
-                                <div class="text-body-2 text-grey-darken-1" style="line-height: 1.5">
+                                <div class="text-body-2" :class="extension.enabled ? 'text-grey-darken-1' : 'text-grey'" style="line-height: 1.5">
                                   {{ tool.description }}
                                 </div>
                               </div>
@@ -278,10 +315,11 @@
                         v-else
                         type="info"
                         variant="tonal"
+                        density="comfortable"
                         rounded="lg"
                         class="mt-2"
                       >
-                        No tools registered by this extension
+                        This extension doesn't register any tools
                       </v-alert>
                     </v-expansion-panel-text>
                   </v-expansion-panel>
@@ -292,7 +330,6 @@
         </div>
       </v-fade-transition>
 
-      <!-- Empty State -->
       <v-fade-transition>
         <v-card
           v-if="!loadedExtensions.length"
@@ -324,7 +361,6 @@
       </v-fade-transition>
     </v-card-text>
 
-    <!-- Dialog Remove -->
     <v-dialog v-model="showRemoveDialog" max-width="500">
       <v-card rounded="xl" elevation="8">
         <v-card-title class="d-flex align-center text-h6 font-weight-semibold text-warning pa-6 pb-4">
@@ -450,6 +486,10 @@ const processFiles = async (filesToProcess) => {
   }
 }
 
+const toggleExtensionState = (extension) => {
+  appStore.toggleExtension(extension.path)
+}
+
 const formatDate = (dateString) => {
   const date = new Date(dateString)
   const now = new Date()
@@ -493,7 +533,7 @@ const removeExtension = () => {
 
 const getExtensionTools = (extension) => {
   if (!extension) return []
-  return UIStore.activeTools.filter(tool => tool.extensionPath === extension.path)
+  return UIStore.toolsDefinitions.filter(tool => tool.extensionPath === extension.path)
 }
 
 const getExtensionToolsCount = (extension) => {
diff --git a/app/stores/UI.js b/app/stores/UI.js
index a781a7ae..bd6179a2 100644
--- a/app/stores/UI.js
+++ b/app/stores/UI.js
@@ -58,7 +58,13 @@ export const useUIStore = defineStore("UI", () => {
     console.log(`[UIStore] Removed ${removedCount} tools from extension: ${extensionPath}`)
   }
 
-  const activeTools = computed(() => toolsDefinitions.value)
+  const activeTools = computed(() => {
+    const appStore = useAppStore()
+    return toolsDefinitions.value.filter(tool => {
+      if (!tool.extensionPath) return true
+      return appStore.getExtensionEnabled(tool.extensionPath)
+    })
+  })
 
   function setShowDropZone(value) {
     showDropZone.value = value
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index 76046d36..642968ae 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -1,9 +1,3 @@
-/**
- * VeaseExtensionAPI
- * 
- * API exposed to extensions for interacting with Vease application
- * Provides access to stores, tool registration, and UI interactions
- */
 export class VeaseExtensionAPI {
   constructor() {
     this._uiStore = null
@@ -13,9 +7,6 @@ export class VeaseExtensionAPI {
     this._importItem = null
   }
 
-  /**
-   * Get the UI Store
-   */
   get UIStore() {
     if (!this._uiStore) {
       this._uiStore = useUIStore()
@@ -23,9 +14,6 @@ export class VeaseExtensionAPI {
     return this._uiStore
   }
 
-  /**
-   * Get the HybridViewer Store
-   */
   get HybridViewerStore() {
     if (!this._hybridViewerStore) {
       this._hybridViewerStore = useHybridViewerStore()
@@ -33,9 +21,6 @@ export class VeaseExtensionAPI {
     return this._hybridViewerStore
   }
 
-  /**
-   * Get the App Store (from OpenGeodeWeb-Front)
-   */
   get AppStore() {
     if (!this._appStore) {
       this._appStore = useAppStore()
@@ -43,9 +28,6 @@ export class VeaseExtensionAPI {
     return this._appStore
   }
 
-  /**
-   * Get the DataBase Store
-   */
   get DataBaseStore() {
     if (!this._dataBaseStore) {
       this._dataBaseStore = useDataBaseStore()
@@ -53,17 +35,6 @@ export class VeaseExtensionAPI {
     return this._dataBaseStore
   }
 
-  /**
-   * Register a tool component
-   * @param {Object} toolDefinition - Tool definition object
-   * @param {string} toolDefinition.id - Unique tool identifier
-   * @param {string} toolDefinition.title - Tool display title
-   * @param {string} toolDefinition.description - Tool description
-   * @param {string} toolDefinition.iconType - Icon type ('mdi' or 'svg')
-   * @param {string} toolDefinition.iconSource - Icon source (mdi icon name or svg path)
-   * @param {Component} toolDefinition.component - Vue component (must be markRaw)
-   * @param {string} extensionPath - Optional path of the extension registering this tool
-   */
   registerTool(toolDefinition, extensionPath = null) {
     if (!toolDefinition.id) {
       throw new Error('Tool definition must have an id')
@@ -75,25 +46,18 @@ export class VeaseExtensionAPI {
     this.UIStore.registerToolComponent(toolDefinition, extensionPath)
   }
 
-  /**
-   * Unregister a specific tool by ID
-   * @param {string} toolId - ID of the tool to unregister
-   */
   unregisterTool(toolId) {
     this.UIStore.unregisterTool(toolId)
   }
 
-  /**
-   * Unregister all tools registered by a specific extension
-   * @param {string} extensionPath - Path of the extension whose tools should be removed
-   */
   unregisterToolsByExtension(extensionPath) {
     this.UIStore.unregisterToolsByExtension(extensionPath)
   }
 
-  /**
-   * Access to Vue utilities
-   */
+  getExtensionEnabled(extensionPath) {
+    return this.AppStore.getExtensionEnabled(extensionPath)
+  }
+
   get vue() {
     return {
       defineAsyncComponent,
@@ -107,16 +71,10 @@ export class VeaseExtensionAPI {
     }
   }
 
-  /**
-   * Access to api_fetch utility
-   */
   get api_fetch() {
     return api_fetch
   }
 
-  /**
-   * Access to importItem utility (lazy loaded)
-   */
   async importItem(data) {
     if (!this._importItem) {
       const module = await import('@ogw_front/utils/file_import_workflow.js')

From 3e395bb203b25d6c42e97dea6591e08474adb025 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 27 Nov 2025 11:29:54 +0100
Subject: [PATCH 12/23] changes about UI

---
 app/components/Extension.vue | 58 ++++++++++++++++++++----------------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index 75d2cde8..84fca9ba 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -132,7 +132,7 @@
                     <v-expansion-panel-title class="pa-5">
                       <template v-slot:default="{ expanded }">
                         <v-hover v-slot="{ isHovering, props: hoverProps }">
-                          <div v-bind="hoverProps" class="d-flex align-center ga-4" :class="expanded ? 'bg-blue-lighten-5 rounded-lg pa-2 ma-n2' : ''" :style="{ width: '100%' }">
+                          <div v-bind="hoverProps" class="d-flex align-center ga-4" :style="{ width: '100%' }">
                             <v-sheet
                               class="d-flex align-center justify-center flex-shrink-0"
                               :color="extension.enabled ? (isHovering || expanded ? 'primary' : 'grey-lighten-3') : 'grey-lighten-2'"
@@ -188,31 +188,37 @@
                               </div>
                             </div>
 
-                            <div class="d-flex align-center ga-2 flex-shrink-0">
-                              <v-switch
-                                :model-value="extension.enabled"
-                                color="success"
-                                density="compact"
-                                hide-details
-                                inset
-                                @click.stop
-                                @update:model-value="toggleExtensionState(extension)"
-                              >
-                                <template #label>
-                                  <span class="text-caption" :class="extension.enabled ? 'text-success' : 'text-grey'">
-                                    {{ extension.enabled ? 'Enabled' : 'Disabled' }}
-                                  </span>
+
+                            <div class="d-flex align-center ga-1 flex-shrink-0 mr-n2">
+                              <v-tooltip location="bottom">
+                                <template #activator="{ props: tooltipProps }">
+                                  <v-switch
+                                    v-bind="tooltipProps"
+                                    :model-value="extension.enabled"
+                                    color="success"
+                                    density="compact"
+                                    hide-details
+                                    inset
+                                    @click.stop
+                                    @update:model-value="toggleExtensionState(extension)"
+                                  />
                                 </template>
-                              </v-switch>
-
-                              <v-btn
-                                icon="mdi-delete"
-                                size="small"
-                                variant="text"
-                                color="error"
-                                :style="{ transition: 'all 0.2s ease', opacity: 0.7 }"
-                                @click.stop="confirmRemove(extension)"
-                              />
+                                <span>{{ extension.enabled ? 'Disable extension' : 'Enable extension' }}</span>
+                              </v-tooltip>
+
+                              <v-tooltip location="bottom">
+                                <template #activator="{ props: tooltipProps }">
+                                  <v-btn
+                                    v-bind="tooltipProps"
+                                    icon="mdi-delete"
+                                    size="small"
+                                    variant="text"
+                                    color="error"
+                                    @click.stop="confirmRemove(extension)"
+                                  />
+                                </template>
+                                <span>Remove extension</span>
+                              </v-tooltip>
                             </div>
                           </div>
                         </v-hover>
@@ -259,7 +265,7 @@
                             >
                               <v-sheet
                                 class="d-flex align-center justify-center flex-shrink-0"
-                                :color="extension.enabled ? (isHovering ? 'primary' : 'blue-lighten-4') : 'grey-lighten-2'"
+                                :color="extension.enabled ? (isHovering ? 'primary' : 'grey-lighten-3') : 'grey-lighten-2'"
                                 :style="{
                                   width: '48px',
                                   height: '48px',

From 0621ed7bba50aa10d733373ead51a4660b4a7a94 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 27 Nov 2025 11:49:22 +0100
Subject: [PATCH 13/23] add animation to the drawer

---
 app/layouts/default.vue | 50 ++++++++++-------------------------------
 1 file changed, 12 insertions(+), 38 deletions(-)

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index c87f22df..506f4dfd 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -75,31 +75,24 @@
       indeterminate
       color="white"
     />
-<Transition name="slide-left">
-  <v-navigation-drawer
-    v-if="UIStore.showExtensions"
-    class="align-start"
-    radius="10px"
-    :width="500"
-    location="left"
-    temporary
-    app
-    :model-value="true"
-    style="z-index: 1005;"
-    @update:model-value="UIStore.setShowExtensions($event)"
-  >
-    <Extension />
-  </v-navigation-drawer>
-</Transition>
+    <v-navigation-drawer
+      class="align-start"
+      radius="10px"
+      :width="500"
+      location="left"
+      temporary
+      v-model="UIStore.showExtensions"
+      style="z-index: 9999; left: 0 !important;"
+    >
+      <Extension />
+    </v-navigation-drawer>
   </v-app>
 </template>
 
 <script setup>
-  // Third party imports
   import FeedBackSnackers from "@ogw_front/components/FeedBack/Snackers.vue"
   import InfraConnected from "@ogw_front/components/InfraConnected.vue"
 
-  // Local imports
   import CreateTools from "@vease/components/CreateTools.vue"
   import FullScrenDropZone from "@vease/components/FullScrenDropZone.vue"
   import StepImport from "@vease/components/StepImport.vue"
@@ -176,25 +169,6 @@
   .slide-leave-to {
     transform: translateX(100%);
   }
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.slide-left-enter-from {
-  transform: translateX(-100%);
-}
-
-.slide-left-enter-to {
-  transform: translateX(0);
-}
-
-.slide-left-leave-from {
-  transform: translateX(0);
-}
-
-.slide-left-leave-to {
-  transform: translateX(-100%);
-}
+
 
 </style>

From 99d8b3d8be2b401ae38f4192733d4b04f179fed7 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 27 Nov 2025 14:43:50 +0100
Subject: [PATCH 14/23] add back schemas to extensionAPI

---
 app/plugins/extension.client.js | 16 +++-------------
 app/utils/extensionAPI.js       |  7 +++++++
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/app/plugins/extension.client.js b/app/plugins/extension.client.js
index 30d757bb..c9f43e1d 100644
--- a/app/plugins/extension.client.js
+++ b/app/plugins/extension.client.js
@@ -1,22 +1,12 @@
 import { VeaseExtensionAPI } from '../utils/extensionAPI.js'
-import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 
-/**
- * Extension API Plugin
- * Initializes the VeaseExtensionAPI and registers it with the app store
- */
 export default defineNuxtPlugin((nuxtApp) => {
-  // Expose schemas globally for extensions
-  window.__GEODE_BACK_SCHEMAS__ = back_schemas
-
   const appStore = useAppStore()
   const extensionAPI = new VeaseExtensionAPI()
-  
-  // Register the extension API with the app store
+
   appStore.setExtensionAPI(extensionAPI)
-  
-  // Provide the API to the Vue app so components can inject it
+
   nuxtApp.vueApp.provide('extensionAPI', extensionAPI)
-  
+
   console.log('[Vease] Extension API initialized')
 })
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index 642968ae..950fcf77 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -1,3 +1,5 @@
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+
 export class VeaseExtensionAPI {
   constructor() {
     this._uiStore = null
@@ -5,6 +7,7 @@ export class VeaseExtensionAPI {
     this._appStore = null
     this._dataBaseStore = null
     this._importItem = null
+    this._schemas = back_schemas
   }
 
   get UIStore() {
@@ -35,6 +38,10 @@ export class VeaseExtensionAPI {
     return this._dataBaseStore
   }
 
+  getSchemas() {
+    return this._schemas
+  }
+
   registerTool(toolDefinition, extensionPath = null) {
     if (!toolDefinition.id) {
       throw new Error('Tool definition must have an id')

From 9ab8c21d16aeea150ef09def744bca9ce2fca3d2 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 27 Nov 2025 16:36:55 +0100
Subject: [PATCH 15/23] clean all

---
 app/plugins/extension.client.js      | 14 +++++++---
 app/plugins/module-globals.client.js | 16 ------------
 app/plugins/tools.client.js          | 38 +++-------------------------
 app/stores/UI.js                     | 37 ---------------------------
 app/utils/extensionAPI.js            |  6 ++---
 5 files changed, 16 insertions(+), 95 deletions(-)
 delete mode 100644 app/plugins/module-globals.client.js

diff --git a/app/plugins/extension.client.js b/app/plugins/extension.client.js
index c9f43e1d..a65577d3 100644
--- a/app/plugins/extension.client.js
+++ b/app/plugins/extension.client.js
@@ -1,12 +1,18 @@
+import * as Vue from 'vue'
+import * as Pinia from 'pinia'
 import { VeaseExtensionAPI } from '../utils/extensionAPI.js'
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 
 export default defineNuxtPlugin((nuxtApp) => {
+  if (typeof window !== 'undefined') {
+    window.Vue = Vue
+    window.Pinia = Pinia
+  }
+  
   const appStore = useAppStore()
-  const extensionAPI = new VeaseExtensionAPI()
-
+  const extensionAPI = new VeaseExtensionAPI({ schemas: back_schemas })
   appStore.setExtensionAPI(extensionAPI)
-
   nuxtApp.vueApp.provide('extensionAPI', extensionAPI)
 
-  console.log('[Vease] Extension API initialized')
+  console.log('[Vease] Extension system initialized')
 })
diff --git a/app/plugins/module-globals.client.js b/app/plugins/module-globals.client.js
deleted file mode 100644
index 1894c6ac..00000000
--- a/app/plugins/module-globals.client.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Module Globals Plugin
- * Exposes Vue and Pinia as global references for extensions
- */
-import * as Vue from 'vue'
-import * as Pinia from 'pinia'
-
-export default defineNuxtPlugin(() => {
-  if (import.meta.client) {
-    // Expose modules globally for extensions
-    window.__VUE_RUNTIME__ = Vue
-    window.__PINIA__ = Pinia
-    
-    console.log('[Vease] Module globals initialized for extensions')
-  }
-})
diff --git a/app/plugins/tools.client.js b/app/plugins/tools.client.js
index 405f1653..ef5977a7 100644
--- a/app/plugins/tools.client.js
+++ b/app/plugins/tools.client.js
@@ -1,44 +1,14 @@
-import AOIicon from "../assets/img/aoi.svg"
-import VOIicon from "../assets/img/voi.svg"
-
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(() => {
   const UIStore = useUIStore()
 
-  UIStore.initializeDefaultTools()
-
-  const CreatePointComponent = defineAsyncComponent(
-    () => import("../components/tools/CreatePoint.vue"),
-  )
   UIStore.registerToolComponent({
     id: "Point",
     title: "Specific Point",
     description: "Create a point object with exact coordinates on the viewer.",
     iconType: "mdi",
     iconSource: "mdi-circle-medium",
-    component: markRaw(CreatePointComponent),
+    component: markRaw(defineAsyncComponent(
+      () => import("../components/tools/CreatePoint.vue")
+    )),
   })
-
-  // const CreateAOIComponent = defineAsyncComponent(
-  //   () => import("@/components/tools/CreateAOI.vue"),
-  // )
-  // UIStore.registerToolComponent({
-  //   id: "AOI",
-  //   title: "Area of Interest",
-  //   description: "Define an area of interest on the viewer with 4 points.",
-  //   iconType: "svg",
-  //   iconSource: AOIicon,
-  //   component: markRaw(CreateAOIComponent),
-  // })
-
-  // const CreateVOIComponent = defineAsyncComponent(
-  //   () => import("@/components/tools/CreateVOI.vue"),
-  // )
-  // UIStore.registerToolComponent({
-  //   id: "VOI",
-  //   title: "Volume of Interest",
-  //   description: "Create a 3D bounding box from an existing AOI with Z bounds.",
-  //   iconType: "svg",
-  //   iconSource: VOIicon,
-  //   component: markRaw(CreateVOIComponent),
-  // })
 })
diff --git a/app/stores/UI.js b/app/stores/UI.js
index bd6179a2..ce98daf1 100644
--- a/app/stores/UI.js
+++ b/app/stores/UI.js
@@ -5,26 +5,8 @@ export const useUIStore = defineStore("UI", () => {
   const showButton = ref(false)
   const showStepImportMenu = ref(false)
   const showCreateTools = ref(false)
-  const showCreatePoint = ref(false)
-  const showCreateAOI = ref(false)
-  const showCreateVOI = ref(false)
   const toolsDefinitions = ref([])
 
-  const initializeDefaultTools = () => {
-    const defaultTools = [
-      {
-        id: "Point",
-        title: "Specific Point",
-        description:
-          "Create a point object with exact coordinates on the viewer.",
-        iconType: "mdi",
-        iconSource: "mdi-circle-medium",
-        component: null,
-      },
-    ]
-    toolsDefinitions.value = defaultTools
-  }
-
   const registerToolComponent = (toolDefinition, extensionPath = null) => {
     const { id, component, ...rest } = toolDefinition
     const existingIndex = toolsDefinitions.value.findIndex(
@@ -91,18 +73,6 @@ export const useUIStore = defineStore("UI", () => {
     showCreateTools.value = value
   }
 
-  function setShowCreatePoint(value) {
-    showCreatePoint.value = value
-  }
-
-  function setShowCreateAOI(value) {
-    showCreateAOI.value = value
-  }
-
-  function setShowCreateVOI(value) {
-    showCreateVOI.value = value
-  }
-
   const showExtensions = ref(false)
   function setShowExtensions(value) {
     showExtensions.value = value
@@ -111,7 +81,6 @@ export const useUIStore = defineStore("UI", () => {
   return {
     toolsDefinitions,
     activeTools,
-    initializeDefaultTools,
     registerToolComponent,
     unregisterTool,
     unregisterToolsByExtension,
@@ -121,18 +90,12 @@ export const useUIStore = defineStore("UI", () => {
     showButton,
     showStepImportMenu,
     showCreateTools,
-    showCreatePoint,
-    showCreateAOI,
-    showCreateVOI,
     setShowDropZone,
     setShowStepper,
     setDroppedFiles,
     setShowButton,
     toggleDrawer,
     setShowCreateTools,
-    setShowCreatePoint,
-    setShowCreateAOI,
-    setShowCreateVOI,
     showExtensions,
     setShowExtensions,
   }
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index 950fcf77..5655e679 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -1,13 +1,11 @@
-import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
-
 export class VeaseExtensionAPI {
-  constructor() {
+  constructor({ schemas } = {}) {
     this._uiStore = null
     this._hybridViewerStore = null
     this._appStore = null
     this._dataBaseStore = null
     this._importItem = null
-    this._schemas = back_schemas
+    this._schemas = schemas || null
   }
 
   get UIStore() {

From 3be8e1c140f4ab3fe739ccbabd996b347ca67d0b Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 27 Nov 2025 17:03:03 +0100
Subject: [PATCH 16/23] change z index of the delete modal

---
 app/components/Extension.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index 84fca9ba..6033fe6b 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -367,7 +367,7 @@
       </v-fade-transition>
     </v-card-text>
 
-    <v-dialog v-model="showRemoveDialog" max-width="500">
+    <v-dialog v-model="showRemoveDialog" max-width="500" style="z-index: 10000;">
       <v-card rounded="xl" elevation="8">
         <v-card-title class="d-flex align-center text-h6 font-weight-semibold text-warning pa-6 pb-4">
           <v-icon icon="mdi-alert-circle" size="28" class="mr-3" color="warning" />

From c52afd6b183763c211d0dc0f73dcf2d18343c388 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Fri, 28 Nov 2025 16:14:19 +0100
Subject: [PATCH 17/23] refacto & move some logics

---
 app/components/CreateTools.vue          |   4 -
 app/components/Extension.vue            |  77 +++-----------
 app/composables/useExtensionMetadata.js |  35 ++++++
 app/plugins/extension.client.js         |  16 ++-
 app/stores/UI.js                        |   4 +-
 app/stores/extensions.js                | 135 ++++++++++++++++++++++++
 app/utils/extensionAPI.js               |  29 +----
 app/utils/extensionCodeTransformer.js   |  21 ++++
 app/utils/formatDate.js                 |  20 ++++
 9 files changed, 247 insertions(+), 94 deletions(-)
 create mode 100644 app/composables/useExtensionMetadata.js
 create mode 100644 app/stores/extensions.js
 create mode 100644 app/utils/extensionCodeTransformer.js
 create mode 100644 app/utils/formatDate.js

diff --git a/app/components/CreateTools.vue b/app/components/CreateTools.vue
index 8453ff47..292e1b2b 100644
--- a/app/components/CreateTools.vue
+++ b/app/components/CreateTools.vue
@@ -143,10 +143,6 @@
     transform: scale(1.03);
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
   .svg-white-filter {
     filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
       brightness(100%) contrast(100%);
diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index 6033fe6b..60894c53 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -419,9 +419,11 @@
 </template>
 
 <script setup>
+import { formatRelativeTime } from '@/utils/formatDate.js'
+import { useExtensionMetadata } from '@/composables/useExtensionMetadata.js'
+
 const UIStore = useUIStore()
-const appStore = useAppStore()
-const files = ref([])
+const extensionsStore = useExtensionsStore()
 const hiddenFileInput = ref(null)
 const loading = ref(false)
 const isDragging = ref(false)
@@ -430,22 +432,17 @@ const successMessage = ref('')
 const showRemoveDialog = ref(false)
 const extensionToRemove = ref(null)
 
-const loadedExtensions = computed(() => appStore.getLoadedExtensions())
-
-const triggerFileDialog = () => hiddenFileInput.value?.click()
+const loadedExtensions = computed(() => extensionsStore.getLoadedExtensions())
 
-const getExtensionName = (extension) => {
-  if (!extension) return 'Unknown Extension'
-  if (extension.metadata?.name) return extension.metadata.name
-  const filename = (extension.path || '').split('/').pop()
-  return filename.replace(/\.es\.js$/, '').replace(/[-_]/g, ' ')
-}
+const {
+  getExtensionName,
+  getExtensionDescription,
+  getExtensionVersion,
+  getExtensionTools,
+  getExtensionToolsCount,
+} = useExtensionMetadata()
 
-const getExtensionDescription = (extension) =>
-  extension?.metadata?.description || 'Custom extension module'
-
-const getExtensionVersion = (extension) =>
-  extension?.metadata?.version || null
+const triggerFileDialog = () => hiddenFileInput.value?.click()
 
 const handleDrop = async (event) => {
   isDragging.value = false
@@ -475,7 +472,7 @@ const processFiles = async (filesToProcess) => {
     for (const file of filesToProcess) {
       const fileURL = URL.createObjectURL(file)
       try {
-        await appStore.loadExtension(fileURL)
+        await extensionsStore.loadExtension(fileURL)
         successCount++
       } catch (error) {
         errorMessage.value = `${error.message}`
@@ -487,42 +484,15 @@ const processFiles = async (filesToProcess) => {
       successMessage.value = `Successfully loaded ${successCount} extension${successCount>1?'s':''} !`
   } finally {
     loading.value = false
-    files.value = []
     setTimeout(() => (successMessage.value = ''), 4000)
   }
 }
 
 const toggleExtensionState = (extension) => {
-  appStore.toggleExtension(extension.path)
+  extensionsStore.toggleExtension(extension.path)
 }
 
-const formatDate = (dateString) => {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffMs = now - date
-  const diffSecs = Math.floor(diffMs / 1000)
-  const diffMins = Math.floor(diffSecs / 60)
-  const diffHours = Math.floor(diffMins / 60)
-  const diffDays = Math.floor(diffHours / 24)
-  const diffWeeks = Math.floor(diffDays / 7)
-  const diffMonths = Math.floor(diffDays / 30)
-
-  if (diffSecs < 60) {
-    return 'just now'
-  } else if (diffMins < 60) {
-    return `${diffMins} ${diffMins === 1 ? 'minute' : 'minutes'} ago`
-  } else if (diffHours < 24) {
-    return `${diffHours} ${diffHours === 1 ? 'hour' : 'hours'} ago`
-  } else if (diffDays < 7) {
-    return `${diffDays} ${diffDays === 1 ? 'day' : 'days'} ago`
-  } else if (diffWeeks < 4) {
-    return `${diffWeeks} ${diffWeeks === 1 ? 'week' : 'weeks'} ago`
-  } else if (diffMonths < 12) {
-    return `${diffMonths} ${diffMonths === 1 ? 'month' : 'months'} ago`
-  } else {
-    return date.toLocaleDateString()
-  }
-}
+const formatDate = (dateString) => formatRelativeTime(dateString)
 
 const confirmRemove = (extension) => {
   extensionToRemove.value = extension
@@ -531,20 +501,11 @@ const confirmRemove = (extension) => {
 
 const removeExtension = () => {
   if (extensionToRemove.value) {
-    appStore.unloadExtension(extensionToRemove.value.path)
+    extensionsStore.unloadExtension(extensionToRemove.value.path)
     showRemoveDialog.value = false
     extensionToRemove.value = null
   }
 }
-
-const getExtensionTools = (extension) => {
-  if (!extension) return []
-  return UIStore.toolsDefinitions.filter(tool => tool.extensionPath === extension.path)
-}
-
-const getExtensionToolsCount = (extension) => {
-  return getExtensionTools(extension).length
-}
 </script>
 
 <style scoped>
@@ -557,10 +518,6 @@ const getExtensionToolsCount = (extension) => {
   to { transform: rotate(360deg); }
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .file-input-hidden {
   position: absolute;
   width: 0;
diff --git a/app/composables/useExtensionMetadata.js b/app/composables/useExtensionMetadata.js
new file mode 100644
index 00000000..6d261347
--- /dev/null
+++ b/app/composables/useExtensionMetadata.js
@@ -0,0 +1,35 @@
+export function useExtensionMetadata() {
+  const UIStore = useUIStore()
+
+  const getExtensionName = (extension) => {
+    if (!extension) return 'Unknown Extension'
+    if (extension.metadata?.name) return extension.metadata.name
+    const filename = (extension.path || '').split('/').pop()
+    return filename.replace(/\.es\.js$/, '').replace(/[-_]/g, ' ')
+  }
+
+  const getExtensionDescription = (extension) => {
+    return extension?.metadata?.description || 'Custom extension module'
+  }
+
+  const getExtensionVersion = (extension) => {
+    return extension?.metadata?.version || null
+  }
+
+  const getExtensionTools = (extension) => {
+    if (!extension) return []
+    return UIStore.toolsDefinitions.filter(tool => tool.extensionPath === extension.path)
+  }
+
+  const getExtensionToolsCount = (extension) => {
+    return getExtensionTools(extension).length
+  }
+
+  return {
+    getExtensionName,
+    getExtensionDescription,
+    getExtensionVersion,
+    getExtensionTools,
+    getExtensionToolsCount,
+  }
+}
diff --git a/app/plugins/extension.client.js b/app/plugins/extension.client.js
index a65577d3..81fecc01 100644
--- a/app/plugins/extension.client.js
+++ b/app/plugins/extension.client.js
@@ -9,9 +9,19 @@ export default defineNuxtPlugin((nuxtApp) => {
     window.Pinia = Pinia
   }
   
-  const appStore = useAppStore()
-  const extensionAPI = new VeaseExtensionAPI({ schemas: back_schemas })
-  appStore.setExtensionAPI(extensionAPI)
+  const extensionsStore = useExtensionsStore()
+  const uiStore = useUIStore()
+  const hybridViewerStore = useHybridViewerStore()
+  const dataBaseStore = useDataBaseStore()
+  
+  const extensionAPI = new VeaseExtensionAPI({ 
+    schemas: back_schemas,
+    uiStore,
+    hybridViewerStore,
+    dataBaseStore
+  })
+  
+  extensionsStore.setExtensionAPI(extensionAPI)
   nuxtApp.vueApp.provide('extensionAPI', extensionAPI)
 
   console.log('[Vease] Extension system initialized')
diff --git a/app/stores/UI.js b/app/stores/UI.js
index ce98daf1..a194f2b4 100644
--- a/app/stores/UI.js
+++ b/app/stores/UI.js
@@ -41,10 +41,10 @@ export const useUIStore = defineStore("UI", () => {
   }
 
   const activeTools = computed(() => {
-    const appStore = useAppStore()
+    const extensionsStore = useExtensionsStore()
     return toolsDefinitions.value.filter(tool => {
       if (!tool.extensionPath) return true
-      return appStore.getExtensionEnabled(tool.extensionPath)
+      return extensionsStore.getExtensionEnabled(tool.extensionPath)
     })
   })
 
diff --git a/app/stores/extensions.js b/app/stores/extensions.js
new file mode 100644
index 00000000..928deda6
--- /dev/null
+++ b/app/stores/extensions.js
@@ -0,0 +1,135 @@
+import { transformExtensionCode } from '../utils/extensionCodeTransformer.js'
+
+export const useExtensionsStore = defineStore("extensions", () => {
+  const loadedExtensions = ref(new Map())
+  const extensionAPI = ref(null)
+
+  function setExtensionAPI(api) {
+    extensionAPI.value = api
+  }
+  function getExtension(path) {
+    return loadedExtensions.value.get(path)
+  }
+
+  async function loadExtension(path) {
+    try {
+      if (loadedExtensions.value.has(path)) {
+        console.warn(`[ExtensionsStore] Extension already loaded from this path: ${path}`)
+        throw new Error('This extension file is already loaded')
+      }
+
+      if (!extensionAPI.value) {
+        throw new Error("Extension API not initialized")
+      }
+
+      let finalURL = path
+
+      if (path.startsWith('blob:')) {
+        const response = await fetch(path)
+        const code = await response.text()
+        const transformedCode = transformExtensionCode(code)
+
+        const newBlob = new Blob([transformedCode], { type: 'application/javascript' })
+        finalURL = URL.createObjectURL(newBlob)
+      }
+
+      const extensionModule = await import(finalURL)
+
+      if (finalURL !== path && finalURL.startsWith('blob:')) {
+        URL.revokeObjectURL(finalURL)
+      }
+
+      const extensionName = extensionModule.metadata?.name
+      if (extensionName) {
+        const alreadyLoaded = Array.from(loadedExtensions.value.values()).find(
+          ext => ext.metadata?.name === extensionName
+        )
+        if (alreadyLoaded) {
+          console.warn(`[ExtensionsStore] Extension "${extensionName}" is already loaded`)
+          throw new Error(`Extension "${extensionName}" is already loaded.`)
+        }
+      }
+
+      if (typeof extensionModule.install === 'function') {
+        await extensionModule.install(extensionAPI.value, path)
+        
+        const extensionData = {
+          module: extensionModule,
+          path,
+          loadedAt: new Date().toISOString(),
+          metadata: extensionModule.metadata || {},
+          enabled: true,
+        }
+        loadedExtensions.value.set(path, extensionData)
+
+        console.log(`[ExtensionsStore] Extension loaded successfully: ${path}`)
+
+        return extensionModule
+      } else {
+        throw new Error('Extension must export an install function')
+      }
+    } catch (error) {
+      console.error(`[ExtensionsStore] Failed to load extension from ${path}:`, error)
+      throw error
+    }
+  }
+
+  function getLoadedExtensions() {
+    return Array.from(loadedExtensions.value.values())
+  }
+
+  function unloadExtension(path) {
+    const extensionData = getExtension(path)
+    if (!extensionData) return false
+    
+    if (extensionData.module && typeof extensionData.module.uninstall === 'function') {
+      try {
+        extensionData.module.uninstall(extensionAPI.value, path)
+        console.log(`[ExtensionsStore] Extension uninstall called: ${path}`)
+      } catch (error) {
+        console.error(`[ExtensionsStore] Error calling uninstall for ${path}:`, error)
+      }
+    }
+    
+    if (extensionAPI.value) {
+      extensionAPI.value.unregisterToolsByExtension(path)
+    }
+    
+    loadedExtensions.value.delete(path)
+    console.log(`[ExtensionsStore] Extension unloaded: ${path}`)
+    return true
+  }
+
+  function toggleExtension(path) {
+    const extensionData = getExtension(path)
+    if (!extensionData) return false
+    
+    extensionData.enabled = !extensionData.enabled
+    console.log(`[ExtensionsStore] Extension ${extensionData.enabled ? 'enabled' : 'disabled'}: ${path}`)
+    return extensionData.enabled
+  }
+
+  function setExtensionEnabled(path, enabled) {
+    const extensionData = getExtension(path)
+    if (!extensionData) return false
+    
+    extensionData.enabled = enabled
+    console.log(`[ExtensionsStore] Extension ${enabled ? 'enabled' : 'disabled'}: ${path}`)
+    return true
+  }
+
+  function getExtensionEnabled(path) {
+    return getExtension(path)?.enabled ?? false
+  }
+
+  return {
+    loadedExtensions,
+    setExtensionAPI,
+    loadExtension,
+    getLoadedExtensions,
+    unloadExtension,
+    toggleExtension,
+    setExtensionEnabled,
+    getExtensionEnabled,
+  }
+})
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index 5655e679..54474e2c 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -1,38 +1,21 @@
 export class VeaseExtensionAPI {
-  constructor({ schemas } = {}) {
-    this._uiStore = null
-    this._hybridViewerStore = null
-    this._appStore = null
-    this._dataBaseStore = null
+  constructor({ schemas, uiStore, hybridViewerStore, dataBaseStore } = {}) {
+    this._uiStore = uiStore
+    this._hybridViewerStore = hybridViewerStore
+    this._dataBaseStore = dataBaseStore
     this._importItem = null
     this._schemas = schemas || null
   }
 
   get UIStore() {
-    if (!this._uiStore) {
-      this._uiStore = useUIStore()
-    }
     return this._uiStore
   }
 
   get HybridViewerStore() {
-    if (!this._hybridViewerStore) {
-      this._hybridViewerStore = useHybridViewerStore()
-    }
     return this._hybridViewerStore
   }
 
-  get AppStore() {
-    if (!this._appStore) {
-      this._appStore = useAppStore()
-    }
-    return this._appStore
-  }
-
   get DataBaseStore() {
-    if (!this._dataBaseStore) {
-      this._dataBaseStore = useDataBaseStore()
-    }
     return this._dataBaseStore
   }
 
@@ -59,10 +42,6 @@ export class VeaseExtensionAPI {
     this.UIStore.unregisterToolsByExtension(extensionPath)
   }
 
-  getExtensionEnabled(extensionPath) {
-    return this.AppStore.getExtensionEnabled(extensionPath)
-  }
-
   get vue() {
     return {
       defineAsyncComponent,
diff --git a/app/utils/extensionCodeTransformer.js b/app/utils/extensionCodeTransformer.js
new file mode 100644
index 00000000..b73da879
--- /dev/null
+++ b/app/utils/extensionCodeTransformer.js
@@ -0,0 +1,21 @@
+export function transformExtensionCode(code) {
+  code = code.replace(
+    /from\s+["']vue["']/g,
+    'from "data:text/javascript,' + encodeURIComponent(`
+      const Vue = window.Vue;
+      export default Vue;
+      ${Object.keys(window.Vue || {}).map(key => `export const ${key} = Vue.${key};`).join('')}
+    `) + '"'
+  )
+
+  code = code.replace(
+    /from\s+["']pinia["']/g,
+    'from "data:text/javascript,' + encodeURIComponent(`
+      const Pinia = window.Pinia;
+      export default Pinia;
+      ${Object.keys(window.Pinia || {}).map(key => `export const ${key} = Pinia.${key};`).join('')}
+    `) + '"'
+  )
+
+  return code
+}
diff --git a/app/utils/formatDate.js b/app/utils/formatDate.js
new file mode 100644
index 00000000..864633ef
--- /dev/null
+++ b/app/utils/formatDate.js
@@ -0,0 +1,20 @@
+export function formatRelativeTime(dateInput) {
+  const date = typeof dateInput === 'string' ? new Date(dateInput) : dateInput
+  const now = new Date()
+  const diffMs = now - date
+  const diffSecs = Math.floor(diffMs / 1000)
+  const diffMins = Math.floor(diffSecs / 60)
+  const diffHours = Math.floor(diffMins / 60)
+  const diffDays = Math.floor(diffHours / 24)
+  const diffWeeks = Math.floor(diffDays / 7)
+  const diffMonths = Math.floor(diffDays / 30)
+
+  if (diffSecs < 60) return 'just now'
+  if (diffMins < 60) return `${diffMins} ${diffMins === 1 ? 'minute' : 'minutes'} ago`
+  if (diffHours < 24) return `${diffHours} ${diffHours === 1 ? 'hour' : 'hours'} ago`
+  if (diffDays < 7) return `${diffDays} ${diffDays === 1 ? 'day' : 'days'} ago`
+  if (diffWeeks < 4) return `${diffWeeks} ${diffWeeks === 1 ? 'week' : 'weeks'} ago`
+  if (diffMonths < 12) return `${diffMonths} ${diffMonths === 1 ? 'month' : 'months'} ago`
+  
+  return date.toLocaleDateString()
+}

From e526d793d52ec27860ae651d1b4c5c7227bdc009 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 1 Dec 2025 11:17:11 +0100
Subject: [PATCH 18/23] move feature using ogw front

---
 app/api/VeaseExtensionAPI.js |   4 +
 app/stores/extensions.js     | 147 ++++-------------------------------
 2 files changed, 17 insertions(+), 134 deletions(-)

diff --git a/app/api/VeaseExtensionAPI.js b/app/api/VeaseExtensionAPI.js
index 1a4c771e..f7857b8b 100644
--- a/app/api/VeaseExtensionAPI.js
+++ b/app/api/VeaseExtensionAPI.js
@@ -10,4 +10,8 @@ export class VeaseExtensionAPI {
   registerTool(toolDefinition) {
     this.uiStore.registerToolComponent(toolDefinition)
   }
+
+  unregisterToolsByExtension(extensionPath) {
+    this.uiStore.unregisterToolsByExtension(extensionPath)
+  }
 }
diff --git a/app/stores/extensions.js b/app/stores/extensions.js
index 928deda6..7765874e 100644
--- a/app/stores/extensions.js
+++ b/app/stores/extensions.js
@@ -1,135 +1,14 @@
 import { transformExtensionCode } from '../utils/extensionCodeTransformer.js'
-
-export const useExtensionsStore = defineStore("extensions", () => {
-  const loadedExtensions = ref(new Map())
-  const extensionAPI = ref(null)
-
-  function setExtensionAPI(api) {
-    extensionAPI.value = api
-  }
-  function getExtension(path) {
-    return loadedExtensions.value.get(path)
-  }
-
-  async function loadExtension(path) {
-    try {
-      if (loadedExtensions.value.has(path)) {
-        console.warn(`[ExtensionsStore] Extension already loaded from this path: ${path}`)
-        throw new Error('This extension file is already loaded')
-      }
-
-      if (!extensionAPI.value) {
-        throw new Error("Extension API not initialized")
-      }
-
-      let finalURL = path
-
-      if (path.startsWith('blob:')) {
-        const response = await fetch(path)
-        const code = await response.text()
-        const transformedCode = transformExtensionCode(code)
-
-        const newBlob = new Blob([transformedCode], { type: 'application/javascript' })
-        finalURL = URL.createObjectURL(newBlob)
-      }
-
-      const extensionModule = await import(finalURL)
-
-      if (finalURL !== path && finalURL.startsWith('blob:')) {
-        URL.revokeObjectURL(finalURL)
-      }
-
-      const extensionName = extensionModule.metadata?.name
-      if (extensionName) {
-        const alreadyLoaded = Array.from(loadedExtensions.value.values()).find(
-          ext => ext.metadata?.name === extensionName
-        )
-        if (alreadyLoaded) {
-          console.warn(`[ExtensionsStore] Extension "${extensionName}" is already loaded`)
-          throw new Error(`Extension "${extensionName}" is already loaded.`)
-        }
-      }
-
-      if (typeof extensionModule.install === 'function') {
-        await extensionModule.install(extensionAPI.value, path)
-        
-        const extensionData = {
-          module: extensionModule,
-          path,
-          loadedAt: new Date().toISOString(),
-          metadata: extensionModule.metadata || {},
-          enabled: true,
-        }
-        loadedExtensions.value.set(path, extensionData)
-
-        console.log(`[ExtensionsStore] Extension loaded successfully: ${path}`)
-
-        return extensionModule
-      } else {
-        throw new Error('Extension must export an install function')
-      }
-    } catch (error) {
-      console.error(`[ExtensionsStore] Failed to load extension from ${path}:`, error)
-      throw error
-    }
-  }
-
-  function getLoadedExtensions() {
-    return Array.from(loadedExtensions.value.values())
-  }
-
-  function unloadExtension(path) {
-    const extensionData = getExtension(path)
-    if (!extensionData) return false
-    
-    if (extensionData.module && typeof extensionData.module.uninstall === 'function') {
-      try {
-        extensionData.module.uninstall(extensionAPI.value, path)
-        console.log(`[ExtensionsStore] Extension uninstall called: ${path}`)
-      } catch (error) {
-        console.error(`[ExtensionsStore] Error calling uninstall for ${path}:`, error)
-      }
-    }
-    
-    if (extensionAPI.value) {
-      extensionAPI.value.unregisterToolsByExtension(path)
-    }
-    
-    loadedExtensions.value.delete(path)
-    console.log(`[ExtensionsStore] Extension unloaded: ${path}`)
-    return true
-  }
-
-  function toggleExtension(path) {
-    const extensionData = getExtension(path)
-    if (!extensionData) return false
-    
-    extensionData.enabled = !extensionData.enabled
-    console.log(`[ExtensionsStore] Extension ${extensionData.enabled ? 'enabled' : 'disabled'}: ${path}`)
-    return extensionData.enabled
-  }
-
-  function setExtensionEnabled(path, enabled) {
-    const extensionData = getExtension(path)
-    if (!extensionData) return false
-    
-    extensionData.enabled = enabled
-    console.log(`[ExtensionsStore] Extension ${enabled ? 'enabled' : 'disabled'}: ${path}`)
-    return true
-  }
-
-  function getExtensionEnabled(path) {
-    return getExtension(path)?.enabled ?? false
-  }
-
-  return {
-    loadedExtensions,
-    setExtensionAPI,
-    loadExtension,
-    getLoadedExtensions,
-    unloadExtension,
-    toggleExtension,
-    setExtensionEnabled,
-    getExtensionEnabled,
-  }
-})
+import { useAppStore } from '@ogw_front/stores/app.js'
+
+export function useExtensionsStore() {
+  const appStore = useAppStore()
+  
+  const originalLoadExtension = appStore.loadExtension
+  
+  appStore.loadExtension = async function(path) {
+    return await originalLoadExtension.call(this, path, transformExtensionCode)
+  }
+  
+  return appStore
+}

From 815323315e275984d5ed09377e9c4e1827d4232d Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 1 Dec 2025 14:31:53 +0100
Subject: [PATCH 19/23] Edit path, now id is used

---
 app/api/VeaseExtensionAPI.js            | 15 ++++++++++++---
 app/components/Extension.vue            |  4 ++--
 app/composables/useExtensionMetadata.js |  5 ++---
 app/stores/extensions.js                |  6 +-----
 app/utils/extensionAPI.js               | 17 +++++++++++++----
 5 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/app/api/VeaseExtensionAPI.js b/app/api/VeaseExtensionAPI.js
index f7857b8b..fa7d1d84 100644
--- a/app/api/VeaseExtensionAPI.js
+++ b/app/api/VeaseExtensionAPI.js
@@ -5,13 +5,22 @@ export class VeaseExtensionAPI {
   constructor() {
     this.vue = Vue
     this.uiStore = useUIStore()
+    this.currentExtensionId = null
+  }
+
+  setCurrentExtensionId(id) {
+    this.currentExtensionId = id
+  }
+
+  clearCurrentExtensionId() {
+    this.currentExtensionId = null
   }
 
   registerTool(toolDefinition) {
-    this.uiStore.registerToolComponent(toolDefinition)
+    this.uiStore.registerToolComponent(toolDefinition, this.currentExtensionId)
   }
 
-  unregisterToolsByExtension(extensionPath) {
-    this.uiStore.unregisterToolsByExtension(extensionPath)
+  unregisterToolsByExtension(extensionId) {
+    this.uiStore.unregisterToolsByExtension(extensionId)
   }
 }
diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index 60894c53..d688962a 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -489,7 +489,7 @@ const processFiles = async (filesToProcess) => {
 }
 
 const toggleExtensionState = (extension) => {
-  extensionsStore.toggleExtension(extension.path)
+  extensionsStore.toggleExtension(extension.id)
 }
 
 const formatDate = (dateString) => formatRelativeTime(dateString)
@@ -501,7 +501,7 @@ const confirmRemove = (extension) => {
 
 const removeExtension = () => {
   if (extensionToRemove.value) {
-    extensionsStore.unloadExtension(extensionToRemove.value.path)
+    extensionsStore.unloadExtension(extensionToRemove.value.id)
     showRemoveDialog.value = false
     extensionToRemove.value = null
   }
diff --git a/app/composables/useExtensionMetadata.js b/app/composables/useExtensionMetadata.js
index 6d261347..69780293 100644
--- a/app/composables/useExtensionMetadata.js
+++ b/app/composables/useExtensionMetadata.js
@@ -4,8 +4,7 @@ export function useExtensionMetadata() {
   const getExtensionName = (extension) => {
     if (!extension) return 'Unknown Extension'
     if (extension.metadata?.name) return extension.metadata.name
-    const filename = (extension.path || '').split('/').pop()
-    return filename.replace(/\.es\.js$/, '').replace(/[-_]/g, ' ')
+    return extension.id || 'Unknown Extension'
   }
 
   const getExtensionDescription = (extension) => {
@@ -18,7 +17,7 @@ export function useExtensionMetadata() {
 
   const getExtensionTools = (extension) => {
     if (!extension) return []
-    return UIStore.toolsDefinitions.filter(tool => tool.extensionPath === extension.path)
+    return UIStore.toolsDefinitions.filter(tool => tool.extensionPath === extension.id)
   }
 
   const getExtensionToolsCount = (extension) => {
diff --git a/app/stores/extensions.js b/app/stores/extensions.js
index 7765874e..7a74a36d 100644
--- a/app/stores/extensions.js
+++ b/app/stores/extensions.js
@@ -4,11 +4,7 @@ import { useAppStore } from '@ogw_front/stores/app.js'
 export function useExtensionsStore() {
   const appStore = useAppStore()
   
-  const originalLoadExtension = appStore.loadExtension
-  
-  appStore.loadExtension = async function(path) {
-    return await originalLoadExtension.call(this, path, transformExtensionCode)
-  }
+  appStore.setCodeTransformer(transformExtensionCode)
   
   return appStore
 }
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index 54474e2c..5a37c79a 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -5,6 +5,7 @@ export class VeaseExtensionAPI {
     this._dataBaseStore = dataBaseStore
     this._importItem = null
     this._schemas = schemas || null
+    this.currentExtensionId = null
   }
 
   get UIStore() {
@@ -23,7 +24,15 @@ export class VeaseExtensionAPI {
     return this._schemas
   }
 
-  registerTool(toolDefinition, extensionPath = null) {
+  setCurrentExtensionId(id) {
+    this.currentExtensionId = id
+  }
+
+  clearCurrentExtensionId() {
+    this.currentExtensionId = null
+  }
+
+  registerTool(toolDefinition) {
     if (!toolDefinition.id) {
       throw new Error('Tool definition must have an id')
     }
@@ -31,15 +40,15 @@ export class VeaseExtensionAPI {
       throw new Error('Tool definition must have a component')
     }
 
-    this.UIStore.registerToolComponent(toolDefinition, extensionPath)
+    this.UIStore.registerToolComponent(toolDefinition, this.currentExtensionId)
   }
 
   unregisterTool(toolId) {
     this.UIStore.unregisterTool(toolId)
   }
 
-  unregisterToolsByExtension(extensionPath) {
-    this.UIStore.unregisterToolsByExtension(extensionPath)
+  unregisterToolsByExtension(extensionId) {
+    this.UIStore.unregisterToolsByExtension(extensionId)
   }
 
   get vue() {

From 5313dc942163e7775277dc5b961ff79520de426b Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 1 Dec 2025 15:59:02 +0100
Subject: [PATCH 20/23] clear the files

---
 app/plugins/extension.client.js | 11 +------
 app/utils/extensionAPI.js       | 54 +++------------------------------
 2 files changed, 5 insertions(+), 60 deletions(-)

diff --git a/app/plugins/extension.client.js b/app/plugins/extension.client.js
index 81fecc01..d38957df 100644
--- a/app/plugins/extension.client.js
+++ b/app/plugins/extension.client.js
@@ -1,7 +1,6 @@
 import * as Vue from 'vue'
 import * as Pinia from 'pinia'
 import { VeaseExtensionAPI } from '../utils/extensionAPI.js'
-import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 
 export default defineNuxtPlugin((nuxtApp) => {
   if (typeof window !== 'undefined') {
@@ -10,16 +9,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   }
   
   const extensionsStore = useExtensionsStore()
-  const uiStore = useUIStore()
-  const hybridViewerStore = useHybridViewerStore()
-  const dataBaseStore = useDataBaseStore()
   
-  const extensionAPI = new VeaseExtensionAPI({ 
-    schemas: back_schemas,
-    uiStore,
-    hybridViewerStore,
-    dataBaseStore
-  })
+  const extensionAPI = new VeaseExtensionAPI()
   
   extensionsStore.setExtensionAPI(extensionAPI)
   nuxtApp.vueApp.provide('extensionAPI', extensionAPI)
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index 5a37c79a..a1dbeb7e 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -1,29 +1,8 @@
 export class VeaseExtensionAPI {
-  constructor({ schemas, uiStore, hybridViewerStore, dataBaseStore } = {}) {
-    this._uiStore = uiStore
-    this._hybridViewerStore = hybridViewerStore
-    this._dataBaseStore = dataBaseStore
-    this._importItem = null
-    this._schemas = schemas || null
+  constructor() {
     this.currentExtensionId = null
   }
 
-  get UIStore() {
-    return this._uiStore
-  }
-
-  get HybridViewerStore() {
-    return this._hybridViewerStore
-  }
-
-  get DataBaseStore() {
-    return this._dataBaseStore
-  }
-
-  getSchemas() {
-    return this._schemas
-  }
-
   setCurrentExtensionId(id) {
     this.currentExtensionId = id
   }
@@ -40,39 +19,14 @@ export class VeaseExtensionAPI {
       throw new Error('Tool definition must have a component')
     }
 
-    this.UIStore.registerToolComponent(toolDefinition, this.currentExtensionId)
+    useUIStore().registerToolComponent(toolDefinition, this.currentExtensionId)
   }
 
   unregisterTool(toolId) {
-    this.UIStore.unregisterTool(toolId)
+    useUIStore().unregisterTool(toolId)
   }
 
   unregisterToolsByExtension(extensionId) {
-    this.UIStore.unregisterToolsByExtension(extensionId)
-  }
-
-  get vue() {
-    return {
-      defineAsyncComponent,
-      markRaw,
-      ref,
-      computed,
-      watch,
-      onMounted,
-      onUnmounted,
-      inject,
-    }
-  }
-
-  get api_fetch() {
-    return api_fetch
-  }
-
-  async importItem(data) {
-    if (!this._importItem) {
-      const module = await import('@ogw_front/utils/file_import_workflow.js')
-      this._importItem = module.importItem
-    }
-    return this._importItem(data)
+    useUIStore().unregisterToolsByExtension(extensionId)
   }
 }

From 1035e521c2992d1edf3f84c5c9accb573f188a28 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 1 Dec 2025 16:10:30 +0100
Subject: [PATCH 21/23] fully cleared api

---
 app/utils/extensionAPI.js | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index a1dbeb7e..b142600c 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -1,17 +1,5 @@
 export class VeaseExtensionAPI {
-  constructor() {
-    this.currentExtensionId = null
-  }
-
-  setCurrentExtensionId(id) {
-    this.currentExtensionId = id
-  }
-
-  clearCurrentExtensionId() {
-    this.currentExtensionId = null
-  }
-
-  registerTool(toolDefinition) {
+  registerTool(extensionId, toolDefinition) {
     if (!toolDefinition.id) {
       throw new Error('Tool definition must have an id')
     }
@@ -19,7 +7,7 @@ export class VeaseExtensionAPI {
       throw new Error('Tool definition must have a component')
     }
 
-    useUIStore().registerToolComponent(toolDefinition, this.currentExtensionId)
+    useUIStore().registerToolComponent(toolDefinition, extensionId)
   }
 
   unregisterTool(toolId) {

From 1868dcfa78c3a75e1bc0e466d918a31377d7b786 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 1 Dec 2025 16:58:24 +0100
Subject: [PATCH 22/23] rm veaseextensionapi

---
 app/api/VeaseExtensionAPI.js | 26 --------------------------
 1 file changed, 26 deletions(-)
 delete mode 100644 app/api/VeaseExtensionAPI.js

diff --git a/app/api/VeaseExtensionAPI.js b/app/api/VeaseExtensionAPI.js
deleted file mode 100644
index fa7d1d84..00000000
--- a/app/api/VeaseExtensionAPI.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as Vue from "vue"
-import { useUIStore } from "../stores/UI"
-
-export class VeaseExtensionAPI {
-  constructor() {
-    this.vue = Vue
-    this.uiStore = useUIStore()
-    this.currentExtensionId = null
-  }
-
-  setCurrentExtensionId(id) {
-    this.currentExtensionId = id
-  }
-
-  clearCurrentExtensionId() {
-    this.currentExtensionId = null
-  }
-
-  registerTool(toolDefinition) {
-    this.uiStore.registerToolComponent(toolDefinition, this.currentExtensionId)
-  }
-
-  unregisterToolsByExtension(extensionId) {
-    this.uiStore.unregisterToolsByExtension(extensionId)
-  }
-}

From 8dff51cfac006d8843ffa3261c56986d84ce176e Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 2 Dec 2025 15:18:57 +0000
Subject: [PATCH 23/23] Apply prepare changes

---
 app/components/CreateTools.vue          |  18 +-
 app/components/Extension.vue            | 444 ++++++++++++++++--------
 app/composables/useExtensionMetadata.js |  10 +-
 app/layouts/default.vue                 |   4 +-
 app/plugins/extension.client.js         |  18 +-
 app/plugins/tools.client.js             |   6 +-
 app/stores/UI.js                        |  11 +-
 app/stores/extensions.js                |   8 +-
 app/utils/extensionAPI.js               |  44 +--
 app/utils/extensionCodeTransformer.js   |  20 +-
 app/utils/formatDate.js                 |  20 +-
 microservices/back/requirements.txt     |   1 -
 microservices/viewer/requirements.txt   |   1 -
 13 files changed, 380 insertions(+), 225 deletions(-)

diff --git a/app/components/CreateTools.vue b/app/components/CreateTools.vue
index 292e1b2b..869e0b4a 100644
--- a/app/components/CreateTools.vue
+++ b/app/components/CreateTools.vue
@@ -1,10 +1,10 @@
 <template>
-  <v-card 
-    v-if="!selectedTool" 
-    :width="500" 
-    flat 
-    class="d-flex flex-column" 
-    style="height: 100%;"
+  <v-card
+    v-if="!selectedTool"
+    :width="500"
+    flat
+    class="d-flex flex-column"
+    style="height: 100%"
   >
     <div class="flex-shrink-0">
       <v-card-title
@@ -80,13 +80,13 @@
       </v-row>
     </v-card-text>
   </v-card>
-  
+
   <v-sheet v-else class="position-relative tool-component-wrapper">
     <v-btn
       icon
       variant="text"
       class="ma-2 position-sticky bg-white"
-      style="top: 0; z-index: 10;"
+      style="top: 0; z-index: 10"
       @click="handleBack"
     >
       <v-icon>mdi-arrow-left</v-icon>
@@ -138,7 +138,7 @@
   .custom-tool-card {
     transition: all 0.2s ease-in-out;
   }
-  
+
   .custom-tool-card:hover {
     transform: scale(1.03);
   }
diff --git a/app/components/Extension.vue b/app/components/Extension.vue
index d688962a..25dd2e10 100644
--- a/app/components/Extension.vue
+++ b/app/components/Extension.vue
@@ -18,7 +18,7 @@
           class="text-center cursor-pointer"
           :class="{
             'elevation-8': isHovering || isDragging,
-            'elevation-2': !(isHovering || isDragging)
+            'elevation-2': !(isHovering || isDragging),
           }"
           :style="{
             position: 'relative',
@@ -28,7 +28,7 @@
             border: `2px dashed ${isHovering || isDragging ? 'rgb(var(--v-theme-primary))' : '#e0e0e0'}`,
             transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
             pointerEvents: loading ? 'none' : 'auto',
-            opacity: loading ? 0.6 : 1
+            opacity: loading ? 0.6 : 1,
           }"
           rounded="xl"
           @click="triggerFileDialog"
@@ -43,7 +43,7 @@
               :style="{
                 width: '100px',
                 height: '100px',
-                transition: 'all 0.3s ease'
+                transition: 'all 0.3s ease',
               }"
               rounded="circle"
               :elevation="isHovering || isDragging ? 4 : 0"
@@ -52,12 +52,24 @@
                 :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
                 size="56"
                 :color="isHovering || isDragging ? 'white' : 'grey-darken-1'"
-                :class="{ 'rotating': loading }"
+                :class="{ rotating: loading }"
               />
             </v-sheet>
 
-            <div class="text-h6 font-weight-semibold mb-2" :class="isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'" style="transition: color 0.3s ease">
-              {{ loading ? 'Loading Extension...' : isDragging ? 'Drop to Install' : 'Click or Drag & Drop Extension' }}
+            <div
+              class="text-h6 font-weight-semibold mb-2"
+              :class="
+                isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'
+              "
+              style="transition: color 0.3s ease"
+            >
+              {{
+                loading
+                  ? "Loading Extension..."
+                  : isDragging
+                    ? "Drop to Install"
+                    : "Click or Drag & Drop Extension"
+              }}
             </div>
 
             <div class="text-body-2 text-grey-darken-1">
@@ -104,10 +116,18 @@
 
       <v-fade-transition>
         <div v-if="loadedExtensions.length" class="mt-8">
-          <div class="d-flex align-center mb-4 text-h6 font-weight-semibold text-primary">
+          <div
+            class="d-flex align-center mb-4 text-h6 font-weight-semibold text-primary"
+          >
             <v-icon icon="mdi-puzzle-check" class="mr-2" />
             Active Extensions
-            <v-chip size="small" class="ml-3" color="primary" variant="flat" elevation="2">
+            <v-chip
+              size="small"
+              class="ml-3"
+              color="primary"
+              variant="flat"
+              elevation="2"
+            >
               {{ loadedExtensions.length }}
             </v-chip>
           </div>
@@ -120,43 +140,78 @@
             >
               <v-scale-transition :delay="index * 50">
                 <v-expansion-panels variant="accordion" class="bg-transparent">
-                  <v-expansion-panel 
-                    rounded="xl" 
-                    border 
-                    elevation="0" 
-                    :style="{ 
+                  <v-expansion-panel
+                    rounded="xl"
+                    border
+                    elevation="0"
+                    :style="{
                       transition: 'all 0.3s ease',
-                      opacity: extension.enabled ? 1 : 0.6
+                      opacity: extension.enabled ? 1 : 0.6,
                     }"
                   >
                     <v-expansion-panel-title class="pa-5">
                       <template v-slot:default="{ expanded }">
                         <v-hover v-slot="{ isHovering, props: hoverProps }">
-                          <div v-bind="hoverProps" class="d-flex align-center ga-4" :style="{ width: '100%' }">
+                          <div
+                            v-bind="hoverProps"
+                            class="d-flex align-center ga-4"
+                            :style="{ width: '100%' }"
+                          >
                             <v-sheet
                               class="d-flex align-center justify-center flex-shrink-0"
-                              :color="extension.enabled ? (isHovering || expanded ? 'primary' : 'grey-lighten-3') : 'grey-lighten-2'"
+                              :color="
+                                extension.enabled
+                                  ? isHovering || expanded
+                                    ? 'primary'
+                                    : 'grey-lighten-3'
+                                  : 'grey-lighten-2'
+                              "
                               :style="{
                                 width: '56px',
                                 height: '56px',
-                                transition: 'all 0.3s ease'
+                                transition: 'all 0.3s ease',
                               }"
                               rounded="circle"
                               :elevation="isHovering || expanded ? 4 : 0"
                             >
-                              <v-icon 
-                                icon="mdi-puzzle" 
-                                size="32" 
-                                :color="extension.enabled ? (isHovering || expanded ? 'white' : 'grey-darken-1') : 'grey'"
+                              <v-icon
+                                icon="mdi-puzzle"
+                                size="32"
+                                :color="
+                                  extension.enabled
+                                    ? isHovering || expanded
+                                      ? 'white'
+                                      : 'grey-darken-1'
+                                    : 'grey'
+                                "
                               />
                             </v-sheet>
 
                             <div class="flex-grow-1" style="min-width: 0">
-                              <div class="text-body-1 font-weight-semibold mb-1" :class="extension.enabled ? 'text-grey-darken-4' : 'text-grey'">
+                              <div
+                                class="text-body-1 font-weight-semibold mb-1"
+                                :class="
+                                  extension.enabled
+                                    ? 'text-grey-darken-4'
+                                    : 'text-grey'
+                                "
+                              >
                                 {{ getExtensionName(extension) }}
                               </div>
 
-                              <div class="text-body-2 mb-2" :class="extension.enabled ? 'text-grey-darken-1' : 'text-grey'" style="line-height: 1.5; white-space: normal; word-wrap: break-word">
+                              <div
+                                class="text-body-2 mb-2"
+                                :class="
+                                  extension.enabled
+                                    ? 'text-grey-darken-1'
+                                    : 'text-grey'
+                                "
+                                style="
+                                  line-height: 1.5;
+                                  white-space: normal;
+                                  word-wrap: break-word;
+                                "
+                              >
                                 {{ getExtensionDescription(extension) }}
                               </div>
 
@@ -172,7 +227,9 @@
 
                                 <v-chip
                                   size="x-small"
-                                  :color="extension.enabled ? 'primary' : 'grey'"
+                                  :color="
+                                    extension.enabled ? 'primary' : 'grey'
+                                  "
                                   variant="flat"
                                   elevation="1"
                                 >
@@ -182,14 +239,18 @@
 
                                 <v-spacer />
 
-                                <span class="text-caption text-grey" style="white-space: nowrap">
+                                <span
+                                  class="text-caption text-grey"
+                                  style="white-space: nowrap"
+                                >
                                   {{ formatDate(extension.loadedAt) }}
                                 </span>
                               </div>
                             </div>
 
-
-                            <div class="d-flex align-center ga-1 flex-shrink-0 mr-n2">
+                            <div
+                              class="d-flex align-center ga-1 flex-shrink-0 mr-n2"
+                            >
                               <v-tooltip location="bottom">
                                 <template #activator="{ props: tooltipProps }">
                                   <v-switch
@@ -200,10 +261,16 @@
                                     hide-details
                                     inset
                                     @click.stop
-                                    @update:model-value="toggleExtensionState(extension)"
+                                    @update:model-value="
+                                      toggleExtensionState(extension)
+                                    "
                                   />
                                 </template>
-                                <span>{{ extension.enabled ? 'Disable extension' : 'Enable extension' }}</span>
+                                <span>{{
+                                  extension.enabled
+                                    ? "Disable extension"
+                                    : "Enable extension"
+                                }}</span>
                               </v-tooltip>
 
                               <v-tooltip location="bottom">
@@ -227,9 +294,13 @@
 
                     <v-expansion-panel-text class="px-6 pb-6">
                       <v-divider class="mb-4" />
-                      
-                      <div class="d-flex align-center justify-space-between mb-4">
-                        <div class="d-flex align-center text-h6 font-weight-semibold text-grey-darken-3">
+
+                      <div
+                        class="d-flex align-center justify-space-between mb-4"
+                      >
+                        <div
+                          class="d-flex align-center text-h6 font-weight-semibold text-grey-darken-3"
+                        >
                           <v-icon icon="mdi-tools" size="22" class="mr-2" />
                           Tools
                         </div>
@@ -238,14 +309,24 @@
                           :color="extension.enabled ? 'primary' : 'grey'"
                           variant="tonal"
                         >
-                          {{ getExtensionToolsCount(extension) }} {{ getExtensionToolsCount(extension) === 1 ? 'tool' : 'tools' }}
+                          {{ getExtensionToolsCount(extension) }}
+                          {{
+                            getExtensionToolsCount(extension) === 1
+                              ? "tool"
+                              : "tools"
+                          }}
                         </v-chip>
                       </div>
 
-                      <div v-if="getExtensionTools(extension).length" class="d-flex flex-column ga-3">
+                      <div
+                        v-if="getExtensionTools(extension).length"
+                        class="d-flex flex-column ga-3"
+                      >
                         <v-fade-transition group>
                           <v-hover
-                            v-for="(tool, toolIndex) in getExtensionTools(extension)"
+                            v-for="(tool, toolIndex) in getExtensionTools(
+                              extension,
+                            )"
                             :key="tool.id"
                             v-slot="{ isHovering, props: toolProps }"
                           >
@@ -255,21 +336,37 @@
                               :style="{
                                 transitionDelay: `${toolIndex * 30}ms`,
                                 transition: 'all 0.2s ease',
-                                background: extension.enabled ? (isHovering ? '#f5f9ff' : '#fafafa') : '#f5f5f5',
-                                borderColor: extension.enabled ? (isHovering ? 'rgba(33, 150, 243, 0.3)' : '#e0e0e0') : '#e0e0e0',
-                                opacity: extension.enabled ? 1 : 0.7
+                                background: extension.enabled
+                                  ? isHovering
+                                    ? '#f5f9ff'
+                                    : '#fafafa'
+                                  : '#f5f5f5',
+                                borderColor: extension.enabled
+                                  ? isHovering
+                                    ? 'rgba(33, 150, 243, 0.3)'
+                                    : '#e0e0e0'
+                                  : '#e0e0e0',
+                                opacity: extension.enabled ? 1 : 0.7,
                               }"
                               border
                               rounded="lg"
-                              :elevation="isHovering && extension.enabled ? 2 : 0"
+                              :elevation="
+                                isHovering && extension.enabled ? 2 : 0
+                              "
                             >
                               <v-sheet
                                 class="d-flex align-center justify-center flex-shrink-0"
-                                :color="extension.enabled ? (isHovering ? 'primary' : 'grey-lighten-3') : 'grey-lighten-2'"
+                                :color="
+                                  extension.enabled
+                                    ? isHovering
+                                      ? 'primary'
+                                      : 'grey-lighten-3'
+                                    : 'grey-lighten-2'
+                                "
                                 :style="{
                                   width: '48px',
                                   height: '48px',
-                                  transition: 'background 0.2s ease'
+                                  transition: 'background 0.2s ease',
                                 }"
                                 rounded="lg"
                               >
@@ -277,7 +374,13 @@
                                   v-if="tool.iconType === 'mdi'"
                                   :icon="tool.iconSource"
                                   size="24"
-                                  :color="extension.enabled ? (isHovering ? 'white' : 'primary') : 'grey'"
+                                  :color="
+                                    extension.enabled
+                                      ? isHovering
+                                        ? 'white'
+                                        : 'primary'
+                                      : 'grey'
+                                  "
                                   :style="{ transition: 'color 0.2s ease' }"
                                 />
                                 <v-img
@@ -288,14 +391,26 @@
                                   contain
                                   :style="{
                                     transition: 'filter 0.2s ease',
-                                    filter: extension.enabled ? (isHovering ? 'brightness(0) invert(1)' : 'none') : 'grayscale(100%) opacity(0.5)'
+                                    filter: extension.enabled
+                                      ? isHovering
+                                        ? 'brightness(0) invert(1)'
+                                        : 'none'
+                                      : 'grayscale(100%) opacity(0.5)',
                                   }"
                                 />
                               </v-sheet>
 
                               <div class="flex-grow-1" style="min-width: 0">
                                 <div class="d-flex align-center ga-2 mb-1">
-                                  <span class="text-body-1 font-weight-semibold" :class="extension.enabled ? 'text-grey-darken-4' : 'text-grey-darken-1'" style="line-height: 1.4">
+                                  <span
+                                    class="text-body-1 font-weight-semibold"
+                                    :class="
+                                      extension.enabled
+                                        ? 'text-grey-darken-4'
+                                        : 'text-grey-darken-1'
+                                    "
+                                    style="line-height: 1.4"
+                                  >
                                     {{ tool.title }}
                                   </span>
                                   <v-chip
@@ -308,7 +423,15 @@
                                   </v-chip>
                                 </div>
 
-                                <div class="text-body-2" :class="extension.enabled ? 'text-grey-darken-1' : 'text-grey'" style="line-height: 1.5">
+                                <div
+                                  class="text-body-2"
+                                  :class="
+                                    extension.enabled
+                                      ? 'text-grey-darken-1'
+                                      : 'text-grey'
+                                  "
+                                  style="line-height: 1.5"
+                                >
                                   {{ tool.description }}
                                 </div>
                               </div>
@@ -350,13 +473,19 @@
               color="grey-lighten-3"
               :style="{
                 width: '100px',
-                height: '100px'
+                height: '100px',
               }"
               rounded="circle"
             >
-              <v-icon icon="mdi-puzzle-outline" size="64" color="grey-lighten-1" />
+              <v-icon
+                icon="mdi-puzzle-outline"
+                size="64"
+                color="grey-lighten-1"
+              />
             </v-sheet>
-            <div class="text-body-1 font-weight-semibold text-grey-darken-2 mb-2">
+            <div
+              class="text-body-1 font-weight-semibold text-grey-darken-2 mb-2"
+            >
               No extensions loaded yet
             </div>
             <div class="text-body-2 text-grey-darken-1">
@@ -367,16 +496,27 @@
       </v-fade-transition>
     </v-card-text>
 
-    <v-dialog v-model="showRemoveDialog" max-width="500" style="z-index: 10000;">
+    <v-dialog v-model="showRemoveDialog" max-width="500" style="z-index: 10000">
       <v-card rounded="xl" elevation="8">
-        <v-card-title class="d-flex align-center text-h6 font-weight-semibold text-warning pa-6 pb-4">
-          <v-icon icon="mdi-alert-circle" size="28" class="mr-3" color="warning" />
+        <v-card-title
+          class="d-flex align-center text-h6 font-weight-semibold text-warning pa-6 pb-4"
+        >
+          <v-icon
+            icon="mdi-alert-circle"
+            size="28"
+            class="mr-3"
+            color="warning"
+          />
           Remove Extension?
         </v-card-title>
 
         <v-card-text class="px-6 pb-6 text-body-1">
           <div class="text-medium-emphasis mb-3">
-            Are you sure you want to remove <span class="font-weight-bold text-high-emphasis">{{ getExtensionName(extensionToRemove) }}</span>?
+            Are you sure you want to remove
+            <span class="font-weight-bold text-high-emphasis">{{
+              getExtensionName(extensionToRemove)
+            }}</span
+            >?
           </div>
           <v-alert
             type="info"
@@ -396,11 +536,7 @@
 
         <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn
-            variant="text"
-            size="large"
-            @click="showRemoveDialog = false"
-          >
+          <v-btn variant="text" size="large" @click="showRemoveDialog = false">
             Cancel
           </v-btn>
           <v-btn
@@ -419,110 +555,116 @@
 </template>
 
 <script setup>
-import { formatRelativeTime } from '@/utils/formatDate.js'
-import { useExtensionMetadata } from '@/composables/useExtensionMetadata.js'
-
-const UIStore = useUIStore()
-const extensionsStore = useExtensionsStore()
-const hiddenFileInput = ref(null)
-const loading = ref(false)
-const isDragging = ref(false)
-const errorMessage = ref('')
-const successMessage = ref('')
-const showRemoveDialog = ref(false)
-const extensionToRemove = ref(null)
-
-const loadedExtensions = computed(() => extensionsStore.getLoadedExtensions())
-
-const {
-  getExtensionName,
-  getExtensionDescription,
-  getExtensionVersion,
-  getExtensionTools,
-  getExtensionToolsCount,
-} = useExtensionMetadata()
-
-const triggerFileDialog = () => hiddenFileInput.value?.click()
-
-const handleDrop = async (event) => {
-  isDragging.value = false
-  const droppedFiles = [...event.dataTransfer.files].filter(f => f.name.endsWith('.es.js'))
-  if (!droppedFiles.length) {
-    errorMessage.value = 'Please drop valid extension files (.es.js)'
-    return
+  import { formatRelativeTime } from "@/utils/formatDate.js"
+  import { useExtensionMetadata } from "@/composables/useExtensionMetadata.js"
+
+  const UIStore = useUIStore()
+  const extensionsStore = useExtensionsStore()
+  const hiddenFileInput = ref(null)
+  const loading = ref(false)
+  const isDragging = ref(false)
+  const errorMessage = ref("")
+  const successMessage = ref("")
+  const showRemoveDialog = ref(false)
+  const extensionToRemove = ref(null)
+
+  const loadedExtensions = computed(() => extensionsStore.getLoadedExtensions())
+
+  const {
+    getExtensionName,
+    getExtensionDescription,
+    getExtensionVersion,
+    getExtensionTools,
+    getExtensionToolsCount,
+  } = useExtensionMetadata()
+
+  const triggerFileDialog = () => hiddenFileInput.value?.click()
+
+  const handleDrop = async (event) => {
+    isDragging.value = false
+    const droppedFiles = [...event.dataTransfer.files].filter((f) =>
+      f.name.endsWith(".es.js"),
+    )
+    if (!droppedFiles.length) {
+      errorMessage.value = "Please drop valid extension files (.es.js)"
+      return
+    }
+    await processFiles(droppedFiles)
+  }
+
+  const handleFileChange = async (event) => {
+    const newFiles = event.target?.files
+    if (!newFiles?.length) return
+    await processFiles([...newFiles])
+    event.target.value = ""
   }
-  await processFiles(droppedFiles)
-}
-
-const handleFileChange = async (event) => {
-  const newFiles = event.target?.files
-  if (!newFiles?.length) return
-  await processFiles([...newFiles])
-  event.target.value = ''
-}
-
-const processFiles = async (filesToProcess) => {
-  errorMessage.value = ''
-  successMessage.value = ''
-  loading.value = true
-
-  let successCount = 0
-
-  try {
-    for (const file of filesToProcess) {
-      const fileURL = URL.createObjectURL(file)
-      try {
-        await extensionsStore.loadExtension(fileURL)
-        successCount++
-      } catch (error) {
-        errorMessage.value = `${error.message}`
-      } finally {
-        URL.revokeObjectURL(fileURL)
+
+  const processFiles = async (filesToProcess) => {
+    errorMessage.value = ""
+    successMessage.value = ""
+    loading.value = true
+
+    let successCount = 0
+
+    try {
+      for (const file of filesToProcess) {
+        const fileURL = URL.createObjectURL(file)
+        try {
+          await extensionsStore.loadExtension(fileURL)
+          successCount++
+        } catch (error) {
+          errorMessage.value = `${error.message}`
+        } finally {
+          URL.revokeObjectURL(fileURL)
+        }
       }
+      if (successCount)
+        successMessage.value = `Successfully loaded ${successCount} extension${successCount > 1 ? "s" : ""} !`
+    } finally {
+      loading.value = false
+      setTimeout(() => (successMessage.value = ""), 4000)
     }
-    if (successCount)
-      successMessage.value = `Successfully loaded ${successCount} extension${successCount>1?'s':''} !`
-  } finally {
-    loading.value = false
-    setTimeout(() => (successMessage.value = ''), 4000)
   }
-}
 
-const toggleExtensionState = (extension) => {
-  extensionsStore.toggleExtension(extension.id)
-}
+  const toggleExtensionState = (extension) => {
+    extensionsStore.toggleExtension(extension.id)
+  }
 
-const formatDate = (dateString) => formatRelativeTime(dateString)
+  const formatDate = (dateString) => formatRelativeTime(dateString)
 
-const confirmRemove = (extension) => {
-  extensionToRemove.value = extension
-  showRemoveDialog.value = true
-}
+  const confirmRemove = (extension) => {
+    extensionToRemove.value = extension
+    showRemoveDialog.value = true
+  }
 
-const removeExtension = () => {
-  if (extensionToRemove.value) {
-    extensionsStore.unloadExtension(extensionToRemove.value.id)
-    showRemoveDialog.value = false
-    extensionToRemove.value = null
+  const removeExtension = () => {
+    if (extensionToRemove.value) {
+      extensionsStore.unloadExtension(extensionToRemove.value.id)
+      showRemoveDialog.value = false
+      extensionToRemove.value = null
+    }
   }
-}
 </script>
 
 <style scoped>
-.rotating {
-  animation: rotate 1s linear infinite;
-}
-
-@keyframes rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.file-input-hidden {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  pointer-events: none;
-}
+  .rotating {
+    animation: rotate 1s linear infinite;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .file-input-hidden {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
 </style>
diff --git a/app/composables/useExtensionMetadata.js b/app/composables/useExtensionMetadata.js
index 69780293..0c9a0010 100644
--- a/app/composables/useExtensionMetadata.js
+++ b/app/composables/useExtensionMetadata.js
@@ -2,13 +2,13 @@ export function useExtensionMetadata() {
   const UIStore = useUIStore()
 
   const getExtensionName = (extension) => {
-    if (!extension) return 'Unknown Extension'
+    if (!extension) return "Unknown Extension"
     if (extension.metadata?.name) return extension.metadata.name
-    return extension.id || 'Unknown Extension'
+    return extension.id || "Unknown Extension"
   }
 
   const getExtensionDescription = (extension) => {
-    return extension?.metadata?.description || 'Custom extension module'
+    return extension?.metadata?.description || "Custom extension module"
   }
 
   const getExtensionVersion = (extension) => {
@@ -17,7 +17,9 @@ export function useExtensionMetadata() {
 
   const getExtensionTools = (extension) => {
     if (!extension) return []
-    return UIStore.toolsDefinitions.filter(tool => tool.extensionPath === extension.id)
+    return UIStore.toolsDefinitions.filter(
+      (tool) => tool.extensionPath === extension.id,
+    )
   }
 
   const getExtensionToolsCount = (extension) => {
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 506f4dfd..401c94e4 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -82,7 +82,7 @@
       location="left"
       temporary
       v-model="UIStore.showExtensions"
-      style="z-index: 9999; left: 0 !important;"
+      style="z-index: 9999; left: 0 !important"
     >
       <Extension />
     </v-navigation-drawer>
@@ -169,6 +169,4 @@
   .slide-leave-to {
     transform: translateX(100%);
   }
-
-
 </style>
diff --git a/app/plugins/extension.client.js b/app/plugins/extension.client.js
index d38957df..f89a85fa 100644
--- a/app/plugins/extension.client.js
+++ b/app/plugins/extension.client.js
@@ -1,19 +1,19 @@
-import * as Vue from 'vue'
-import * as Pinia from 'pinia'
-import { VeaseExtensionAPI } from '../utils/extensionAPI.js'
+import * as Vue from "vue"
+import * as Pinia from "pinia"
+import { VeaseExtensionAPI } from "../utils/extensionAPI.js"
 
 export default defineNuxtPlugin((nuxtApp) => {
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     window.Vue = Vue
     window.Pinia = Pinia
   }
-  
+
   const extensionsStore = useExtensionsStore()
-  
+
   const extensionAPI = new VeaseExtensionAPI()
-  
+
   extensionsStore.setExtensionAPI(extensionAPI)
-  nuxtApp.vueApp.provide('extensionAPI', extensionAPI)
+  nuxtApp.vueApp.provide("extensionAPI", extensionAPI)
 
-  console.log('[Vease] Extension system initialized')
+  console.log("[Vease] Extension system initialized")
 })
diff --git a/app/plugins/tools.client.js b/app/plugins/tools.client.js
index ef5977a7..0ff8734d 100644
--- a/app/plugins/tools.client.js
+++ b/app/plugins/tools.client.js
@@ -7,8 +7,8 @@ export default defineNuxtPlugin(() => {
     description: "Create a point object with exact coordinates on the viewer.",
     iconType: "mdi",
     iconSource: "mdi-circle-medium",
-    component: markRaw(defineAsyncComponent(
-      () => import("../components/tools/CreatePoint.vue")
-    )),
+    component: markRaw(
+      defineAsyncComponent(() => import("../components/tools/CreatePoint.vue")),
+    ),
   })
 })
diff --git a/app/stores/UI.js b/app/stores/UI.js
index 197a4c13..d256e6dd 100644
--- a/app/stores/UI.js
+++ b/app/stores/UI.js
@@ -37,15 +37,17 @@ export const useUIStore = defineStore("UI", () => {
   const unregisterToolsByExtension = (extensionPath) => {
     const beforeCount = toolsDefinitions.value.length
     toolsDefinitions.value = toolsDefinitions.value.filter(
-      (tool) => tool.extensionPath !== extensionPath
+      (tool) => tool.extensionPath !== extensionPath,
     )
     const removedCount = beforeCount - toolsDefinitions.value.length
-    console.log(`[UIStore] Removed ${removedCount} tools from extension: ${extensionPath}`)
+    console.log(
+      `[UIStore] Removed ${removedCount} tools from extension: ${extensionPath}`,
+    )
   }
 
   const activeTools = computed(() => {
     const extensionsStore = useExtensionsStore()
-    return toolsDefinitions.value.filter(tool => {
+    return toolsDefinitions.value.filter((tool) => {
       if (!tool.extensionPath) return true
       return extensionsStore.getExtensionEnabled(tool.extensionPath)
     })
@@ -87,7 +89,6 @@ export const useUIStore = defineStore("UI", () => {
   function setShowCreateAOI(value) {
     showCreateAOI.value = value
   }
-  
 
   return {
     toolsDefinitions,
@@ -114,4 +115,4 @@ export const useUIStore = defineStore("UI", () => {
     setShowCreateVOI,
     setShowCreateAOI,
   }
-})
\ No newline at end of file
+})
diff --git a/app/stores/extensions.js b/app/stores/extensions.js
index 7a74a36d..8b1b8804 100644
--- a/app/stores/extensions.js
+++ b/app/stores/extensions.js
@@ -1,10 +1,10 @@
-import { transformExtensionCode } from '../utils/extensionCodeTransformer.js'
-import { useAppStore } from '@ogw_front/stores/app.js'
+import { transformExtensionCode } from "../utils/extensionCodeTransformer.js"
+import { useAppStore } from "@ogw_front/stores/app.js"
 
 export function useExtensionsStore() {
   const appStore = useAppStore()
-  
+
   appStore.setCodeTransformer(transformExtensionCode)
-  
+
   return appStore
 }
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
index f292237a..8b023b93 100644
--- a/app/utils/extensionAPI.js
+++ b/app/utils/extensionAPI.js
@@ -1,14 +1,14 @@
-import back_schemas from '@geode/opengeodeweb-back/opengeodeweb_back_schemas.json'
-import vease_back_schemas from '@geode/vease-back/vease_back_schemas.json'
-import { importItem } from '@ogw_front/utils/file_import_workflow.js'
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+import vease_back_schemas from "@geode/vease-back/vease_back_schemas.json"
+import { importItem } from "@ogw_front/utils/file_import_workflow.js"
 
 export class VeaseExtensionAPI {
   registerTool(extensionId, toolDefinition) {
     if (!toolDefinition.id) {
-      throw new Error('Tool definition must have an id')
+      throw new Error("Tool definition must have an id")
     }
     if (!toolDefinition.component) {
-      throw new Error('Tool definition must have a component')
+      throw new Error("Tool definition must have a component")
     }
 
     useUIStore().registerToolComponent(toolDefinition, extensionId)
@@ -25,15 +25,17 @@ export class VeaseExtensionAPI {
   getSchemas() {
     return {
       opengeodeweb_back: back_schemas.opengeodeweb_back,
-      vease_back: vease_back_schemas.vease_back
+      vease_back: vease_back_schemas.vease_back,
     }
   }
 
   async api_fetch(
     { schema, params },
-    { request_error_function, response_function, response_error_function } = {}
+    { request_error_function, response_function, response_error_function } = {},
   ) {
-    const validate_schema = (await import('@ogw_front/utils/validate_schema.js')).default
+    const validate_schema = (
+      await import("@ogw_front/utils/validate_schema.js")
+    ).default
     const feedbackStore = useFeedbackStore()
     const geodeStore = useGeodeStore()
 
@@ -42,16 +44,16 @@ export class VeaseExtensionAPI {
     const { valid, error } = validate_schema(schema, body)
 
     if (!valid) {
-      if (process.env.NODE_ENV !== 'production') {
-        console.log('Bad request', error, schema, params)
+      if (process.env.NODE_ENV !== "production") {
+        console.log("Bad request", error, schema, params)
       }
-      feedbackStore.add_error(400, schema.$id, 'Bad request', error)
-      throw new Error(schema.$id.concat(': ', error))
+      feedbackStore.add_error(400, schema.$id, "Bad request", error)
+      throw new Error(schema.$id.concat(": ", error))
     }
 
     geodeStore.start_request()
 
-    const method = schema.methods.filter((m) => m !== 'OPTIONS')[0]
+    const method = schema.methods.filter((m) => m !== "OPTIONS")[0]
     const requestOptions = {
       method: method,
       baseURL: geodeStore.base_url,
@@ -64,21 +66,21 @@ export class VeaseExtensionAPI {
     try {
       const response = await $fetch(schema.$id, requestOptions)
       await geodeStore.stop_request()
-      
+
       if (response_function) {
         await response_function({ _data: response, ok: true })
       }
-      
+
       return { data: { value: response } }
     } catch (error) {
       await geodeStore.stop_request()
-      
+
       if (error.response) {
         await feedbackStore.add_error(
           error.response.status,
           schema.$id,
-          error.response._data?.name || 'Error',
-          error.response._data?.description || error.message
+          error.response._data?.name || "Error",
+          error.response._data?.description || error.message,
         )
         if (response_error_function) {
           await response_error_function(error.response)
@@ -88,13 +90,13 @@ export class VeaseExtensionAPI {
           error.code || 500,
           schema.$id,
           error.message,
-          error.stack
+          error.stack,
         )
         if (request_error_function) {
           await request_error_function(error)
         }
       }
-      
+
       throw error
     }
   }
@@ -107,7 +109,7 @@ export class VeaseExtensionAPI {
     return useUIStore()
   }
 
-  get DataBaseStore(){
+  get DataBaseStore() {
     return useDataBaseStore()
   }
 
diff --git a/app/utils/extensionCodeTransformer.js b/app/utils/extensionCodeTransformer.js
index b73da879..a03ff605 100644
--- a/app/utils/extensionCodeTransformer.js
+++ b/app/utils/extensionCodeTransformer.js
@@ -1,20 +1,28 @@
 export function transformExtensionCode(code) {
   code = code.replace(
     /from\s+["']vue["']/g,
-    'from "data:text/javascript,' + encodeURIComponent(`
+    'from "data:text/javascript,' +
+      encodeURIComponent(`
       const Vue = window.Vue;
       export default Vue;
-      ${Object.keys(window.Vue || {}).map(key => `export const ${key} = Vue.${key};`).join('')}
-    `) + '"'
+      ${Object.keys(window.Vue || {})
+        .map((key) => `export const ${key} = Vue.${key};`)
+        .join("")}
+    `) +
+      '"',
   )
 
   code = code.replace(
     /from\s+["']pinia["']/g,
-    'from "data:text/javascript,' + encodeURIComponent(`
+    'from "data:text/javascript,' +
+      encodeURIComponent(`
       const Pinia = window.Pinia;
       export default Pinia;
-      ${Object.keys(window.Pinia || {}).map(key => `export const ${key} = Pinia.${key};`).join('')}
-    `) + '"'
+      ${Object.keys(window.Pinia || {})
+        .map((key) => `export const ${key} = Pinia.${key};`)
+        .join("")}
+    `) +
+      '"',
   )
 
   return code
diff --git a/app/utils/formatDate.js b/app/utils/formatDate.js
index 864633ef..c62dd903 100644
--- a/app/utils/formatDate.js
+++ b/app/utils/formatDate.js
@@ -1,5 +1,5 @@
 export function formatRelativeTime(dateInput) {
-  const date = typeof dateInput === 'string' ? new Date(dateInput) : dateInput
+  const date = typeof dateInput === "string" ? new Date(dateInput) : dateInput
   const now = new Date()
   const diffMs = now - date
   const diffSecs = Math.floor(diffMs / 1000)
@@ -9,12 +9,16 @@ export function formatRelativeTime(dateInput) {
   const diffWeeks = Math.floor(diffDays / 7)
   const diffMonths = Math.floor(diffDays / 30)
 
-  if (diffSecs < 60) return 'just now'
-  if (diffMins < 60) return `${diffMins} ${diffMins === 1 ? 'minute' : 'minutes'} ago`
-  if (diffHours < 24) return `${diffHours} ${diffHours === 1 ? 'hour' : 'hours'} ago`
-  if (diffDays < 7) return `${diffDays} ${diffDays === 1 ? 'day' : 'days'} ago`
-  if (diffWeeks < 4) return `${diffWeeks} ${diffWeeks === 1 ? 'week' : 'weeks'} ago`
-  if (diffMonths < 12) return `${diffMonths} ${diffMonths === 1 ? 'month' : 'months'} ago`
-  
+  if (diffSecs < 60) return "just now"
+  if (diffMins < 60)
+    return `${diffMins} ${diffMins === 1 ? "minute" : "minutes"} ago`
+  if (diffHours < 24)
+    return `${diffHours} ${diffHours === 1 ? "hour" : "hours"} ago`
+  if (diffDays < 7) return `${diffDays} ${diffDays === 1 ? "day" : "days"} ago`
+  if (diffWeeks < 4)
+    return `${diffWeeks} ${diffWeeks === 1 ? "week" : "weeks"} ago`
+  if (diffMonths < 12)
+    return `${diffMonths} ${diffMonths === 1 ? "month" : "months"} ago`
+
   return date.toLocaleDateString()
 }
diff --git a/microservices/back/requirements.txt b/microservices/back/requirements.txt
index ac8655df..812d6591 100644
--- a/microservices/back/requirements.txt
+++ b/microservices/back/requirements.txt
@@ -5,4 +5,3 @@
 #    pip-compile --output-file=microservices/back/requirements.txt microservices/back/requirements.in
 #
 
-vease-back==1.*,>=1.6.7rc1
diff --git a/microservices/viewer/requirements.txt b/microservices/viewer/requirements.txt
index 7f7f1c1a..68277183 100644
--- a/microservices/viewer/requirements.txt
+++ b/microservices/viewer/requirements.txt
@@ -5,4 +5,3 @@
 #    pip-compile --output-file=microservices/viewer/requirements.txt microservices/viewer/requirements.in
 #
 
-vease-viewer==2.*,>=2.3.19